零基础开发妇幼保健档案管理系统全流程实操
一、开发环境与工具准备
在开始编写代码之前，我们需要准备好开发环境。本系统采用目前业界最稳定的“前后端分离”架构：后端使用 Node.js + Express + SQLite，前端使用 Vue 3 + Element Plus。SQLite 是一个轻量级数据库，无需安装额外的数据库服务，非常适合快速落地。
1. 安装 Node.js
访问 Node.js 官方长期支持版下载页面：https://nodejs.org/zh-cn/download/。下载并安装 LTS 版本。安装完成后，打开终端（Windows 使用 PowerShell 或 CMD，Mac 使用 Terminal），输入以下命令验证安装是否成功：
node -v
npm -v
如果输出了版本号，说明环境已就绪。
2. 创建项目目录结构
在电脑上创建一个名为 maternal-health-system 的文件夹。进入该文件夹，我们将在其中分别创建后端和前端项目。
二、后端服务搭建（数据存储与API接口）
后端负责数据的存储、读取和业务逻辑处理。我们将创建一个简单的 RESTful API 服务。
1. 初始化后端项目
在终端中进入项目根目录，执行以下命令创建后端文件夹并初始化：
mkdir backend
cd backend
npm init -y
2. 安装核心依赖包
我们需要安装 Express（Web 框架）、Cors（跨域处理）、Body-parser（请求体解析）以及 Better-sqlite3（SQLite 数据库驱动）。执行以下命令：
npm install express cors body-parser better-sqlite3
3. 编写数据库与服务器代码
在 backend 文件夹下新建一个名为 server.js 的文件，并将以下完整代码复制进去。这段代码包含了数据库初始化、建表以及增删改查（CRUD）的所有接口逻辑。
```javascript
const express = require('express');
const cors = require('cors');
const bodyParser = require('body-parser');
const Database = require('better-sqlite3');
const path = require('path');
// 初始化应用
const app = express();
app.use(cors());
app.use(bodyParser.json());
// 初始化数据库（自动在当前目录下生成 maternal.db 文件）
const dbPath = path.join(__dirname, 'maternal.db');
const db = new Database(dbPath);
// 创建档案表（如果不存在）
// 字段包含：姓名、身份证、联系方式、末次月经时间、预产期、高危等级、备注
const initDb = () => {
const createTableSql = `
CREATE TABLE IF NOT EXISTS records (
id INTEGER PRIMARY KEY AUTOINCREMENT,
name TEXT NOT NULL,
id_card TEXT UNIQUE,
phone TEXT,
last_period TEXT,
due_date TEXT,
risk_level TEXT DEFAULT '绿色',
notes TEXT,
created_at DATETIME DEFAULT CURRENT_TIMESTAMP
)
`;
db.exec(createTableSql);
console.log('数据库初始化完成，表 records 已就绪。');
};
initDb();
// API 1: 获取所有档案列表
app.get('/api/records', (req, res) => {
try {
const stmt = db.prepare('SELECT FROM records ORDER BY created_at DESC');
const rows = stmt.all();
res.json({ success: true, data: rows });
} catch (err) {
res.status(500).json({ success: false, message: err.message });
}
});
// API 2: 新增档案
app.post('/api/records', (req, res) => {
const { name, id_card, phone, last_period, due_date, risk_level, notes } = req.body;
try {
const insertSql = `
INSERT INTO records (name, id_card, phone, last_period, due_date, risk_level, notes)
VALUES (?, ?, ?, ?, ?, ?, ?)
`;
const stmt = db.prepare(insertSql);
const result = stmt.run(name, id_card, phone, last_period, due_date, risk_level, notes);
res.json({ success: true, id: result.lastInsertRowid });
} catch (err) {
res.status(500).json({ success: false, message: err.message });
}
});
// API 3: 删除档案
app.delete('/api/records/:id', (req, res) => {
const { id } = req.params;
try {
const stmt = db.prepare('DELETE FROM records WHERE id = ?');
stmt.run(id);
res.json({ success: true });
} catch (err) {
res.status(500).json({ success: false, message: err.message });
}
});
// 启动服务器，监听 3000 端口
app.listen(3000, () => {
console.log('后端服务已启动：http://localhost:3000');
});
```
4. 启动后端服务
在 backend 目录下执行：
node server.js
看到“后端服务已启动”和“数据库初始化完成”的提示，说明后端已成功运行。请保持该终端窗口开启。
三、前端界面开发（可视化操作界面）
前端我们将使用 Vue 3 配合 Element Plus 组件库，快速构建出包含表格和表单的现代化管理界面。
1. 初始化前端项目
打开一个新的终端窗口，回到项目根目录 maternal-health-system。使用 Vite 脚手架创建前端项目：
npm create vite@latest client -- --template vue
进入 client 目录并安装依赖：
cd client
npm install
2. 安装 UI 组件库与 HTTP 客户端
我们需要安装 Element Plus（界面组件）和 Axios（发送网络请求）：
npm install element-plus axios
3. 配置入口文件
打开 client/src/main.js，将其修改为以下内容，以全局引入 Element Plus 的样式和组件：
```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')
```
4. 编写主界面逻辑
打开 client/src/App.vue，删除原有代码，复制以下完整代码。该代码实现了一个包含“新增档案”弹窗和“档案列表”表格的完整页面，并直接对接后端 API。
```vue
妇幼保健档案管理系统
```
```vue