目录
一、项目概述
二、系统架构
1. 技术栈
2. 架构图
三、后端设计
1. 数据模型
2. API 设计
四、前端设计
五、功能实现
1. 用户登录注册
2. 接种建档
3. 疫苗展示
六、总结
一、项目概述
本项目旨在为社区医院提供一个高效便捷的疫苗接种预约管理系统。系统主要功能包括用户登录注册、接种建档、疫苗展示、疫苗预约、历史预约和历史接种等功能。通过前端 Vue.js 实现用户界面，后端 Spring Boot 提供数据服务，确保系统的稳定性和扩展性。
二、系统架构
1. 技术栈
前端：Vue.js + Vuex + Vue Router
后端：Spring Boot + MyBatis
数据库：MySQL
2. 架构图
+----------------+ +----------------+ +----------------+
| Vue.js 前端 | ---> | Spring Boot 后端 | ---> | MySQL 数据库 |
+----------------+ +----------------+ +----------------+
三、后端设计
1. 数据模型
User：用户表
字段：id, username, password, role
Profile：个人档案表
字段：id, userId, name, age, birthdate, gender, relation, allergy
Vaccine：疫苗表
字段：id, name, category, description, doses, price, stock, contraindications
Appointment：预约表
字段：id, profileId, vaccineId, appointmentTime, status
Record：接种记录表
字段：id, profileId, vaccineId, vaccinationDate
2. API 设计
用户模块
/api/users/register - POST: 用户注册
/api/users/login - POST: 用户登录
档案模块
/api/profiles - GET: 获取档案列表
/api/profiles - POST: 新建档案
/api/profiles/{id} - GET: 获取单个档案信息
/api/profiles/{id} - PUT: 更新档案信息
疫苗模块
/api/vaccines - GET: 获取疫苗列表
/api/vaccines/{id} - GET: 获取单个疫苗详细信息
预约模块
/api/appointments - POST: 创建预约
/api/appointments - GET: 获取预约列表
/api/appointments/{id} - GET: 获取单个预约信息
接种记录模块
/api/records - GET: 获取接种记录列表
/api/records/{id} - GET: 获取单个接种记录信息
四、前端设计
组件划分
Login.vue - 登录页面 用户输入用户名和密码进行登录。
Register.vue - 注册页面 用户输入基本信息进行注册。
ProfileList.vue - 档案列表页面 显示用户及其家庭成员的档案信息。
ProfileEdit.vue - 编辑档案页面 添加或编辑档案信息。
VaccineList.vue - 疫苗列表页面 分类展示所有疫苗信息。
VaccineDetail.vue - 疫苗详情页面 显示单个疫苗的详细信息。
AppointmentForm.vue - 预约表单 用户选择疫苗进行预约。
AppointmentList.vue - 预约列表页面 显示用户的预约信息。
RecordList.vue - 接种记录列表页面 显示用户的接种记录信息。
五、功能实现
1. 用户登录注册
登录
用户在登录页面输入用户名和密码，点击登录按钮。
前端向后端发送登录请求，携带用户名和密码。
后端验证用户名和密码是否正确，并返回登录结果。
前端根据登录结果更新状态并跳转到相应的页面。
注册
用户在注册页面输入基本信息，点击注册按钮。
前端向后端发送注册请求，携带用户信息。
后端验证用户信息是否合法，并返回注册结果。
前端根据注册结果提示用户并跳转到登录页面。
2. 接种建档
添加档案
用户在档案列表页面点击“添加档案”按钮。
进入编辑档案页面，填写档案信息。
点击保存按钮，前端向后端发送新建档案请求。
后端验证档案信息是否合法，并返回结果。
前端根据结果更新状态并显示新的档案信息。
编辑档案
用户在档案列表页面点击某个档案的“编辑”按钮。
进入编辑档案页面，显示档案信息。
用户修改信息后点击保存按钮，前端向后端发送更新档案请求。
后端验证更新信息是否合法，并返回结果。
前端根据结果更新状态并显示更新后的档案信息。
3. 疫苗展示
疫苗列表
用户在疫苗列表页面可以看到所有疫苗的分类展示。
前端向后端发送获取疫苗列表请求。
后端返回疫苗列表信息。
前端显示疫苗列表，并支持分类筛选。
疫苗详情
用户点击某个疫苗，进入疫苗详情页面。
前端向后端发送获取疫苗详细信息请求。
后端返回疫苗详细信息。
前端显示疫苗详细信息，包括编号、功能、接种次数、价格、存量、接种禁忌等。
4. 疫苗预约
创建预约
用户在疫苗详情页面点击“预约”按钮。
进入预约表单页面，选择接种者和预约时间。
点击提交按钮，前端向后端发送创建预约请求。
后端验证预约信息是否合法，并返回结果。
前端根据结果提示用户并显示新的预约信息。
5. 历史预约
预约列表
用户在预约列表页面可以看到自己的所有预约信息。
前端向后端发送获取预约列表请求。
后端返回预约列表信息。
前端显示预约列表，并支持筛选和排序。
6. 历史接种
接种记录
用户在接种记录页面可以看到自己及家庭成员的接种记录。
前端向后端发送获取接种记录列表请求。
后端返回接种记录列表信息。
前端显示接种记录列表，并支持筛选和排序。
六、总结
通过上述设计，我们实现了基于 Spring Boot 和 Vue.js 的社区医院疫苗接种预约小程序系统。系统具备用户登录注册、接种建档、疫苗展示、疫苗预约、历史预约和历史接种等功能。前端使用 Vue.js 实现用户界面，后端使用 Spring Boot 提供数据服务，确保了系统的稳定性和扩展性。希望这个设计方案能够帮助社区医院更好地管理和优化疫苗接种预约流程。
