SpringBoot与Vue.js框架下宠物医院网站的设计与实现

摘要

随着社会经济的发展和人们生活水平的提高，饲养宠物已成为许多家庭生活的一部分，宠物健康管理需求随之激增。传统宠物医院管理模式在预约、信息查询、医患沟通等方面存在效率瓶颈。本文旨在设计并实现一个基于SpringBoot后端与Vue.js前端的现代化宠物医院网站，以提升宠物医疗服务的信息化水平与用户体验。

1. 引言

1.1 项目背景与意义

宠物医疗行业正经历数字化转型。一个功能完备、操作便捷的在线平台，能够有效整合医院资源，优化服务流程，增强客户粘性。本设计将计算机Web开发技术应用于实际场景，对于计算机专业学生而言，是一次对前后端分离架构、数据库设计及业务逻辑实现的综合实践。

1.2 技术选型

• 后端框架：SpringBoot。它简化了Spring应用的初始搭建和开发过程，内嵌Tomcat服务器，提供自动配置和起步依赖，能快速构建RESTful API接口。
• 前端框架：Vue.js。一套用于构建用户界面的渐进式框架，核心库只关注视图层，易于与第三方库或既有项目整合，配合Vue Router、Vuex、Axios等生态工具，能高效开发单页面应用（SPA）。
• 数据库：MySQL。一种关系型数据库管理系统，稳定可靠，社区活跃，适合存储结构化数据如用户信息、宠物档案、预约记录等。
• 项目管理与构建：Maven（后端）、Node.js与npm（前端）。
• 其他：Element-UI（前端UI组件库），MyBatis-Plus（数据持久层框架）。

2. 系统需求分析与设计

2.1 功能性需求

系统主要服务于三类用户：普通客户/宠物主人、医院医护人员（医生、管理员）、系统管理员。

• 客户端功能：

1. 用户注册与登录：手机号或邮箱注册，支持密码找回。

1. 宠物档案管理：添加、编辑、查看名下宠物信息（品种、年龄、病史等）。

1. 在线预约挂号：选择科室、医生、时间，提交预约申请。

1. 查看预约记录：查看历史及当前预约状态（待确认、已预约、已完成、已取消）。

1. 健康知识浏览：查看医院发布的宠物养护、疾病预防等文章。

1. 个人中心：修改个人信息、查看消息通知。

• 医护/管理端功能：

1. 预约管理：审核、确认或取消客户的预约请求。

1. 病历管理：为就诊的宠物创建电子病历，记录诊断结果、处方、复查建议。

1. 宠物档案查询：查询关联宠物的完整历史档案。

1. 医生排班管理（管理员）：设置医生的可预约时间段。

1. 健康知识管理（管理员）：发布、编辑、下架科普文章。

1. 用户管理（系统管理员）：管理所有用户账号与权限。

2.2 非功能性需求

• 性能：页面加载响应时间应在3秒内，支持并发用户访问。
• 安全性：用户密码加密存储（如BCrypt），接口访问需Token验证，防止SQL注入与XSS攻击。
• 易用性：界面简洁直观，操作流程符合逻辑，提供清晰的引导与反馈。
• 可维护性：采用前后端分离架构，代码结构清晰，便于后续功能扩展与维护。

2.3 系统架构设计

采用经典的前后端分离架构。

1. 前端：Vue.js构建的单页面应用，通过Axios调用后端API，获取JSON格式数据并渲染页面。路由由Vue Router管理，状态管理使用Vuex。部署在Nginx服务器上。
2. 后端：SpringBoot构建的RESTful API服务层，处理业务逻辑、数据验证和数据库交互。通过Controller接收请求，Service处理业务，Mapper（MyBatis-Plus）操作数据库。使用JWT进行用户认证与授权。
3. 数据库：MySQL数据库，设计规范化的数据表，如user、pet、appointment、medical_record、article等，并建立适当的索引优化查询。

2.4 数据库设计（核心表举例）

• 用户表 (sysuser)：id, username, password, phone, email, avatar, role（角色：client/doctor/admin）, status, createtime。
• 宠物表 (petinfo)：id, name, type（品种）, age, weight, ownerid（关联用户）, healthcondition, createtime。
• 预约表 (appointment)：id, petid, doctorid, department, appointmenttime, status, symptomsdesc, create_time。
• 病历表 (medicalrecord)：id, appointmentid, diagnosis, prescription, advice, record_time。

3. 系统核心功能模块实现

3.1 用户认证与授权

1. 注册登录：前端提交表单，后端校验后，将密码经BCrypt加密存入数据库。登录成功则生成JWT Token返回前端。
2. 权限控制：前端根据Token中的角色信息动态渲染菜单；后端在拦截器中验证Token有效性，并通过注解（如@PreAuthorize）进行接口级别的权限控制。

3.2 预约挂号流程

1. 客户登录后，在“在线预约”页面选择科室，系统动态加载该科室下可预约的医生及时间槽。
2. 选择宠物（从已有档案中选择或临时添加）、填写症状描述后提交。
3. 后端创建一条状态为“待确认”的预约记录。医生或管理员在后台查看新预约，可进行确认操作，系统自动向客户发送通知（如站内信或短信模拟）。

3.3 电子病历管理

医生在完成诊疗后，在对应的预约记录下创建病历。病历与预约、宠物、医生信息强关联，形成完整的诊疗历史链，方便后续复诊时查询。

3.4 前后端数据交互示例

以获取预约列表为例：

1. 前端Vue组件中，使用Axios发送GET请求：axios.get('/api/appointment/list', { headers: { 'Authorization': 'Bearer ' + token } })。
2. 后端SpringBoot控制器（AppointmentController）提供/api/appointment/list接口，通过Service层查询数据库，将List<Appointment>转换为List<AppointmentVO>（视图对象）返回。
3. 前端接收数据后，存入Vuex的state中，并在组件内渲染表格。

4. 系统测试与部署

• 测试：对核心API进行Postman接口测试；前端进行功能模块测试；进行简单的压力测试。
• 部署：

1. 后端：打包为Jar文件，通过java -jar命令在服务器运行，或使用Docker容器化部署。

1. 前端：执行npm run build生成静态文件，部署到Nginx指定目录，并配置代理将API请求转发到后端服务。

1. 数据库：在服务器安装MySQL，导入建表SQL脚本及初始数据。

5. 结论与展望

本文成功设计并实现了一个功能相对完整的宠物医院网站。系统采用SpringBoot和Vue.js技术栈，实现了前后端分离，具备良好的可扩展性和可维护性。核心的预约、病历管理功能流畅，提升了宠物医院服务的便捷性与管理效率。

未来展望：可考虑集成在线支付（预约定金、药品费用）、宠物健康数据图表化分析（如体重变化趋势）、AI智能问答（初步症状咨询）、移动端小程序开发等功能，使系统更加智能化和全方位。

参考文献

[1] Spring Boot官方文档
[2] Vue.js官方文档
[3] 杨开振. Java EE互联网轻量级框架整合开发. 电子工业出版社.
[4] 软件开发相关学术论文及网络技术博客资源。

（注：本文为计算机毕业设计/网页设计项目文档概要，实际开发需完成详细编码、数据库设计、界面美化及完整测试。）