基于Vue3搭建机关单位档案培训报名系统全流程

一、开发环境初始化与依赖安装

在开始构建机关单位档案培训报名系统之前，必须确保本地开发环境配置正确。本系统采用Vue3作为前端框架，Element Plus作为UI组件库（符合机关单位严谨的UI风格），后端采用Node.js的Express框架配合SQLite数据库（无需配置数据库服务，开箱即用）。

确保已安装Node.js环境。若未安装，请访问 https://nodejs.org/ 下载LTS版本并直接安装。安装完成后，打开终端（CMD或PowerShell），执行以下命令检查版本：

```bash node -v npm -v ```

接下来，使用Vite构建工具创建项目。Vite相比Webpack启动速度更快，开发体验更好。在终端执行以下命令创建项目名为 archive-training 的工程：

```bash npm create vite@latest archive-training -- --template vue cd archive-training npm install ```

进入项目目录后，安装前端核心依赖库。我们需要安装Element Plus（UI库）、Axios（请求库）以及Sass（样式预处理）：

```bash npm install element-plus axios sass ```

二、前端页面配置与报名表单开发

前端开发的核心是构建一个包含数据校验的报名表单。机关单位报名通常需要严格的身份信息录入。修改入口文件 src/main.js，全局引入Element Plus组件库和样式，确保所有页面都能直接使用组件。

将 src/main.js 的内容完全替换为以下代码：

```javascript import { createApp } from 'vue' import './style.css' import App from './App.vue' import ElementPlus from 'element-plus' import 'element-plus/dist/index.css' const app = createApp(App) app.use(ElementPlus) app.mount('app') ```

接下来，重点开发 src/App.vue 文件。我们将构建一个包含姓名、单位、职务、手机号、身份证号的表单，并添加机关单位常用的校验规则（如手机号格式、身份证号长度校验）。以下是完整的 App.vue 代码，可直接复制覆盖：

```html ```

三、后端服务搭建与数据库配置

为了确保数据能够落地存储，我们需要搭建一个简单的后端服务。在项目根目录下创建一个名为 server 的文件夹。进入该文件夹并初始化Node.js项目，安装Express、CORS（解决跨域）、Body-parser（解析JSON）以及SQLite3（数据库驱动）：

```bash mkdir server cd server npm init -y npm install express cors body-parser sqlite3 ```

在 server 文件夹内创建 index.js 文件。这个文件将负责启动HTTP服务器、创建SQLite数据库文件（如果不存在）以及处理前端的POST请求。以下是完整的后端代码：

```javascript const express = require('express') const cors = require('cors') const bodyParser = require('body-parser') const sqlite3 = require('sqlite3').verbose() const path = require('path') const app = express() const PORT = 3000 // 中间件配置 app.use(cors()) app.use(bodyParser.json()) // 初始化数据库，文件名为 training.db const dbPath = path.resolve(__dirname, 'training.db') const db = new sqlite3.Database(dbPath, (err) => { if (err) { console.error('数据库连接失败:', err.message) } else { console.log('已连接到SQLite数据库') initDb() } }) // 创建数据表 function initDb() { const createTableSql = ` CREATE TABLE IF NOT EXISTS registrations ( id INTEGER PRIMARY KEY AUTOINCREMENT, name TEXT NOT NULL, unit TEXT NOT NULL, job_title TEXT, phone TEXT NOT NULL, id_card TEXT NOT NULL, created_at DATETIME DEFAULT CURRENT_TIMESTAMP ) ` db.run(createTableSql, (err) => { if (err) { console.error('创建表失败:', err.message) } else { console.log('数据表检查完成') } }) } // 报名接口 app.post('/api/register', (req, res) => { const { name, unit, jobTitle, phone, idCard } = req.body // 简单的后端兜底校验 if (!name || !unit || !phone || !idCard) { return res.status(400).json({ success: false, message: '必填项不能为空' }) } const sql = ` INSERT INTO registrations (name, unit, job_title, phone, id_card) VALUES (?, ?, ?, ?, ?) ` const params = [name, unit, jobTitle, phone, idCard] db.run(sql, params, function(err) { if (err) { console.error('插入数据失败:', err.message) return res.status(500).json({ success: false, message: '服务器内部错误' }) } console.log(`新增报名记录ID: ${this.lastID}`) res.json({ success: true, message: '报名成功', id: this.lastID }) }) }) // 启动服务器 app.listen(PORT, () => { console.log(`后端服务运行中: http://localhost:${PORT}`) }) ```

四、系统启动与全流程测试

代码编写完成后，需要分别启动后端服务和前端开发服务器。请打开两个终端窗口进行操作。

第一步：启动后端服务。
在第一个终端窗口中，进入 server 目录并执行：

```bash cd server node index.js ```

当终端显示“后端服务运行中: http://localhost:3000”和“数据表检查完成”时，说明后端已就绪，并且会在 server 目录下自动生成 training.db 数据库文件。

第二步：启动前端服务。
在第二个终端窗口中，回到项目根目录，执行：

```bash npm run dev ```

终端会输出一个Local地址，通常是 http://localhost:5173。按住Ctrl键并点击该地址，浏览器将自动打开报名系统页面。

第三步：功能验证。
1. 在浏览器页面中，尝试直接点击“提交报名”，系统应弹出“请检查表单标记的错误项”提示，且输入框变红。
2. 输入姓名、单位，但在手机号输入非数字字符，系统应提示“请输入正确的手机号码”。
3. 输入正确的11位手机号和18位身份证号，点击提交。若后端运行正常，页面右上角会弹出“报名信息提交成功！”的绿色提示框，且表单内容会被清空。
4. 回到后端终端窗口，可以看到“新增报名记录ID: 1”的日志输出。打开 server/training.db 文件（可使用DB Browser for SQLite工具查看），即可看到刚才提交的数据已持久化存储。