基于Spring Boot和Vue构建体检档案管理系统实战

一、环境准备与数据库设计

在开始编写代码之前，请确保你的开发环境中已经安装了 JDK 17、Maven 3.6+、Node.js 16+ 以及 MySQL 8.0 数据库。为了确保大家能一次性跑通，我们先设计数据库表结构，这是系统的基石。

打开 MySQL 客户端或命令行工具，执行以下 SQL 脚本。该脚本将创建一个名为 medical_system 的数据库，并建立核心的 health_record 表，用于存储体检人员的档案信息。

```sql CREATE DATABASE IF NOT EXISTS medical_system DEFAULT CHARSET utf8mb4 COLLATE utf8mb4_unicode_ci; USE medical_system; CREATE TABLE IF NOT EXISTS health_record ( id BIGINT AUTO_INCREMENT PRIMARY KEY COMMENT '主键ID', name VARCHAR(50) NOT NULL COMMENT '姓名', id_card VARCHAR(18) NOT NULL UNIQUE COMMENT '身份证号', gender TINYINT NOT NULL COMMENT '性别：0-女，1-男', age INT NOT NULL COMMENT '年龄', phone VARCHAR(20) COMMENT '联系电话', check_date DATE COMMENT '体检日期', diagnosis TEXT COMMENT '体检诊断结果', doctor VARCHAR(50) COMMENT '主治医生', create_time DATETIME DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间', update_time DATETIME DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT '更新时间' ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='体检档案表'; -- 插入一条测试数据，方便后续验证 INSERT INTO health_record (name, id_card, gender, age, phone, check_date, diagnosis, doctor) VALUES ('张三', '110101199001011234', 1, 34, '13800138000', '2023-10-01', '身体健康，各项指标正常', '王医生'); ```

二、后端服务搭建

后端我们采用 Spring Boot 3.x 结合 MyBatis-Plus 来快速构建。使用 Spring Initializr 创建一个 Maven 项目，或者在 IDE 中新建项目。以下将直接列出核心配置与代码，确保复制即可使用。

1. Maven 依赖配置

打开 pom.xml 文件，确保包含以下依赖。这里引入了 Web、MySQL 驱动、MyBatis-Plus 以及 Lombok 以简化代码。

```xml org.springframework.boot spring-boot-starter-web com.baomidou mybatis-plus-boot-starter 3.5.3.1 mysql mysql-connector-java 8.0.33 org.projectlombok lombok true ```

2. 数据库连接配置

在 src/main/resources/application.yml 中配置数据库连接信息。请根据你本地的 MySQL 账号密码修改 username 和 password。

```yaml server: port: 8080 spring: datasource: driver-class-name: com.mysql.cj.jdbc.Driver url: jdbc:mysql://localhost:3306/medical_system?useUnicode=true&characterEncoding=utf8&serverTimezone=Asia/Shanghai&useSSL=false username: root password: your_password mybatis-plus: configuration: log-impl: org.apache.ibatis.logging.stdout.StdOutImpl global-config: db-config: id-type: auto ```

3. 实体类与 Mapper

创建包结构 com.example.medical.entity，并编写实体类 HealthRecord.java。

```java package com.example.medical.entity; import com.baomidou.mybatisplus.annotation.IdType; import com.baomidou.mybatisplus.annotation.TableId; import com.baomidou.mybatisplus.annotation.TableName; import lombok.Data; import java.time.LocalDate; @Data @TableName("health_record") public class HealthRecord { @TableId(type = IdType.AUTO) private Long id; private String name; private String idCard; private Integer gender; private Integer age; private String phone; private LocalDate checkDate; private String diagnosis; private String doctor; } ```

在 com.example.medical.mapper 包下创建 Mapper 接口。

```java package com.example.medical.mapper; import com.baomidou.mybatisplus.core.mapper.BaseMapper; import com.example.medical.entity.HealthRecord; import org.apache.ibatis.annotations.Mapper; @Mapper public interface HealthRecordMapper extends BaseMapper { } ```

4. 业务层与控制层

为了演示清晰，我们直接在 Controller 中调用 Service，省略复杂的 ServiceImpl 编写。在 com.example.medical.controller 包下创建 HealthRecordController.java，实现增删改查（CRUD）接口。

```java package com.example.medical.controller; import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper; import com.baomidou.mybatisplus.extension.plugins.pagination.Page; import com.example.medical.entity.HealthRecord; import com.example.medical.mapper.HealthRecordMapper; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.web.bind.annotation.; import java.util.List; @RestController @RequestMapping("/api/records") @CrossOrigin(origins = "") // 允许前端跨域访问 public class HealthRecordController { @Autowired private HealthRecordMapper healthRecordMapper; // 新增档案 @PostMapping public String save(@RequestBody HealthRecord record) { healthRecordMapper.insert(record); return "保存成功"; } // 查询所有档案 @GetMapping public List list() { return healthRecordMapper.selectList(null); } // 根据ID查询 @GetMapping("/{id}") public HealthRecord getById(@PathVariable Long id) { return healthRecordMapper.selectById(id); } // 更新档案 @PutMapping public String update(@RequestBody HealthRecord record) { healthRecordMapper.updateById(record); return "更新成功"; } // 删除档案 @DeleteMapping("/{id}") public String delete(@PathVariable Long id) { healthRecordMapper.deleteById(id); return "删除成功"; } } ```

在启动类 MedicalApplication.java 上添加 Mapper 扫描注解（虽然使用了 @Mapper 但加上此注解更保险）。

```java package com.example.medical; import org.mybatis.spring.annotation.MapperScan; import org.springframework.boot.SpringApplication; import org.springframework.boot.autoconfigure.SpringBootApplication; @SpringBootApplication @MapperScan("com.example.medical.mapper") public class MedicalApplication { public static void main(String[] args) { SpringApplication.run(MedicalApplication.class, args); } } ```

三、前端页面开发

前端使用 Vue 3 配合 Element Plus UI 组件库，以及 Axios 进行 HTTP 请求。请在终端执行以下命令初始化项目。

```bash npm create vue@latest medical-frontend cd medical-frontend npm install element-plus axios npm run dev ```

1. 配置 Element Plus

修改 src/main.js，全局引入 Element Plus 样式和组件。

```javascript import { createApp } from 'vue' 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') ```

2. 编写主页面组件

我们将所有逻辑集中在 App.vue 中，实现一个包含表格、分页、新增/编辑弹窗的完整页面。请清空 App.vue 原有内容，复制以下代码：

```html ```

四、系统运行与验证

至此，所有代码已编写完毕。现在按照以下步骤启动系统并进行验证。

• 启动后端： 在 IDE 中运行 MedicalApplication 的 main 方法，或在终端执行 mvn spring-boot:run。看到控制台输出 "Started MedicalApplication" 即表示后端启动成功，端口为 8080。
• 启动前端： 在 medical-frontend 目录下执行 npm run dev。终端会输出一个 Local URL，通常是 http://localhost:5173。
• 功能验证：
  • 打开浏览器访问前端 URL，你应该能看到表格中显示了 SQL 脚本中插入的“张三”的测试数据。
  • 点击“新增档案”，输入姓名“李四”等信息并保存，表格会自动刷新显示新数据。
  • 点击“编辑”，修改李四的诊断结果，点击确定，检查数据是否更新。
  • 点击“删除”，确认后该行数据应从表格中移除。

如果在操作过程中遇到任何连接错误，请检查 MySQL 服务是否开启，以及 application.yml 中的密码配置是否正确。本系统采用了前后端分离架构，通过 RESTful API 进行通信，是一个标准的现代化 Web 应用雏形，具备良好的扩展性，后续可以轻松接入用户鉴权、PDF 报告生成等高级功能。