一、技术选型与架构规划
为了确保系统既轻量又具备高扩展性，本方案采用前后端分离架构。后端选用 Spring Boot 3.2 处理业务逻辑与数据持久化，前端使用 Vue 3 配合 Element Plus 构建响应式界面，数据库采用 MySQL 8.0。开发环境需提前安装 JDK 17、Node.js 18 及 Maven 3.6+。
二、数据库设计与初始化
首先在 MySQL 中执行以下脚本，创建数据库及核心表结构。这里设计了戒毒人员基础信息表，包含入所时间、管控等级等关键字段。
1. 建库建表 SQL
```sql
CREATE DATABASE IF NOT EXISTS rehab_db DEFAULT CHARSET utf8mb4;
USE rehab_db;
CREATE TABLE drug_rehab_person (
id BIGINT AUTO_INCREMENT PRIMARY KEY COMMENT '主键ID',
name VARCHAR(50) NOT NULL COMMENT '姓名',
id_card VARCHAR(18) UNIQUE NOT NULL COMMENT '身份证号',
gender TINYINT DEFAULT 1 COMMENT '性别：1男 2女',
birth_date DATE COMMENT '出生日期',
in_date DATE NOT NULL COMMENT '入所日期',
control_level VARCHAR(20) COMMENT '管控等级：严管/普管/宽管',
address VARCHAR(255) COMMENT '家庭住址',
status TINYINT DEFAULT 1 COMMENT '状态：1在所 2出所',
create_time DATETIME DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间',
update_time DATETIME DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT '更新时间'
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='戒毒人员档案表';
```
三、后端服务搭建
使用 Spring Initializr 生成项目，依赖选择 Spring Web、MyBatis Framework、MySQL Driver 和 Lombok。
1. 配置文件
修改 application.yml，配置数据源及 MyBatis 日志，确保连接信息准确。
```yaml
server:
port: 8080
spring:
datasource:
url: jdbc:mysql://localhost:3306/rehab_db?useUnicode=true&characterEncoding=utf8&serverTimezone=Asia/Shanghai
username: root
password: 123456
driver-class-name: com.mysql.cj.jdbc.Driver
mybatis:
configuration:
log-impl: org.apache.ibatis.logging.stdout.StdOutImpl
map-underscore-to-camel-case: true
```
2. 实体类
在 com.rehab.entity 包下创建实体类，使用 Lombok 简化代码。
```java
package com.rehab.entity;
import lombok.Data;
import java.time.LocalDate;
import java.time.LocalDateTime;
@Data
public class DrugRehabPerson {
private Long id;
private String name;
private String idCard;
private Integer gender;
private LocalDate birthDate;
private LocalDate inDate;
private String controlLevel;
private String address;
private Integer status;
private LocalDateTime createTime;
private LocalDateTime updateTime;
}
```
3. 持久层 Mapper
在 com.rehab.mapper 包下创建接口，标注 @Mapper。
```java
package com.rehab.mapper;
import com.rehab.entity.DrugRehabPerson;
import org.apache.ibatis.annotations.;
import java.util.List;
@Mapper
public interface PersonMapper {
@Select("SELECT FROM drug_rehab_person WHERE status = 1 ORDER BY in_date DESC")
List
findAll();
@Insert("INSERT INTO drug_rehab_person(name, id_card, gender, birth_date, in_date, control_level, address) " +
"VALUES({name}, {idCard}, {gender}, {birthDate}, {inDate}, {controlLevel}, {address})")
void insert(DrugRehabPerson person);
@Select("SELECT FROM drug_rehab_person WHERE id = {id}")
DrugRehabPerson findById(Long id);
@Update("UPDATE drug_rehab_person SET name={name}, control_level={controlLevel}, address={address} WHERE id={id}")
void update(DrugRehabPerson person);
}
```
4. 控制层 Controller
在 com.rehab.controller 包下创建控制器，提供 RESTful 接口。
```java
package com.rehab.controller;
import com.rehab.entity.DrugRehabPerson;
import com.rehab.mapper.PersonMapper;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.;
import java.util.List;
@RestController
@RequestMapping("/api/persons")
@CrossOrigin(origins = "")
public class PersonController {
@Autowired
private PersonMapper personMapper;
@GetMapping
public List list() {
return personMapper.findAll();
}
@PostMapping
public String add(@RequestBody DrugRehabPerson person) {
personMapper.insert(person);
return "success";
}
@GetMapping("/{id}")
public DrugRehabPerson get(@PathVariable Long id) {
return personMapper.findById(id);
}
@PutMapping
public String update(@RequestBody DrugRehabPerson person) {
personMapper.update(person);
return "success";
}
}
```
四、前端界面开发
使用 Vite 构建 Vue 3 项目，并引入 Element Plus 组件库。
1. 项目初始化
在终端执行以下命令创建项目并安装依赖：
```bash
npm create vue@latest rehab-admin
cd rehab-admin
npm install element-plus axios
```
2. 配置入口文件
修改 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'
import axios from 'axios'
const app = createApp(App)
app.use(ElementPlus)
app.config.globalProperties.$http = axios
app.mount('app')
```
3. 编写档案管理页面
在 src/components 下创建 PersonList.vue，实现列表展示、新增和编辑功能。这是核心交互页面，包含完整的表格和弹窗逻辑。
```html
戒毒人员档案管理
新增人员
{{ scope.row.gender === 1 ? '男' : '女' }}
编辑
男
女
取消
确定
```
4. 挂载组件
修改 src/App.vue，引入刚才编写的组件。
```html
```
五、启动与运行验证
完成代码编写后，按顺序启动后端和前端服务。
1. 启动后端服务
在 IDE 中运行 RehabApplication.java 的 main 方法，或使用 Maven 命令：
```bash
mvn spring-boot:run
```
看到控制台输出 Started RehabApplication 即表示后端启动成功，端口监听在 8080。
2. 启动前端服务
在项目根目录下执行：
```bash
npm run dev
```
3. 功能验证
打开浏览器访问终端输出的 Local 地址（通常是 http://localhost:5173）。点击“新增人员”按钮，输入姓名、身份证号及管控等级，点击确定。表格应立即刷新显示新录入的数据。点击“编辑”修改管控等级，确认后数据更新。至此，一套基础的戒毒人员档案管理软件已完全落地。
