Vue2医疗管理系统



项目概述


  该项目是基于Vue2和Node.js技术实现的医疗管理系统。项目背景是在继小程序开发和前端学习后的一次能力检验，检测自身是否能实现独立开发web项目，根据结果决定后续的学习方向。项目需求是独立开发一个医疗管理系统，具备基本的注册登录功能和对相关信息的增删查改功能。通过开发该项目，对自身所学的Vue和Node.js知识进行复习，并进行一次整合应用，巩固编程水平，积累项目经验。


  附项目链接：github.com
前端 Vue2 + Element UI
后端 Node.js
数据库 MySQL
服务器 Express
开发工具 Visual Studio Code + Postman
项目启动 2023.11.24
项目完成 2023.12.27
项目类别 自研项目


开发流程


一期工程：2023.11.24 —— 2023.12.24
二期工程：2023.12.26 —— 2023.12.29
开发天数：17天


开发日期 开发日志
2023.11.24 搭建数据库、服务器、首页界面、登录界面、注册界面
2023.11.25 设置路由守卫；增加注册表单校验；设计404界面，侧边导航栏；调整页面样式；基本实现注册登录功能
2023.11.26 调整页面样式；优化代码结构；设计顶部导航栏；解决清空路由守卫后再次登录时浏览器崩溃问题
2023.11.27 调整页面样式；优化代码结构和项目结构
2023.11.28 调整页面样式和路由结构；新增面包屑目录；设计各模块数据库表
2023.12.01 调整页面样式和数据库结构；完成个人中心模块
2023.12.02 调整数据库结构；实现分页功能；搭建管理页
2023.12.08 数据库因为不明原因丢失
2023.12.10 修复关键数据库表的数据
2023.12.20 数据库恢复因为不明原因恢复；解决上次登录时间不准确的问题；实现搜索功能；完成管理页
2023.12.21 添加铃铛摇晃动画、页面淡入动画；封装表格组件和标签组件；优化路由结构
2023.12.22 统一服务器请求接口和数据库字段格式
2023.12.23 引入布局容器优化页面结构；重写侧边导航栏折叠动画；解决表单数据和表格数据同步修改的问题；封装表单组件
2023.12.24 增加搜索关键字；解决删除最后一条记录时页面不切换的问题
2023.12.26 删除了财务管理模块与后勤管理模块；新增身份验证和权限管理；完成统计分析模块；新增区分性别头像
2023.12.27 完善细节
2023.12.29 编写工程报告


功能和特性


  • 注册和登录功能


  • 对各模块增删查改功能


  • 根据不同关键字搜索功能


  • 分页功能

​

  • 设计了路由守卫，未登录时自动跳转至登录页


  • 设计了权限管理，只有管理员能进行增删改与权限授予


  • 设计了统计分析模块，可以动态展示图表进行数据分析

​

  • 设计了职工系统和部门系统，使模拟数据尽可能贴合实际

​

  • 设计了动态标签导航，并将管理模块展示内容封装成表格组件，每次增加管理模块只需配置关键信息即可，这极大地简化了工作量


  • 加入了铃铛摇晃、页面淡入和导航折叠等CSS动画


  • 加入了布局容器、面包屑目录、轮播图、登录时间记录和区分性别的头像等优化页面的内容

​



  • 数据库设计逻辑混乱

​

  • 提交表单数据为空时，表格数据将显示”undefined”而不是空白

​

  • 一些页面没有设计响应式布局，只能在PC浏览器使用

​


技术架构


项目结构


项目结构图


数据库结构

表 4-1 users用户表
名 类型 长度 小数点 不是null 虚拟 键 描述
user_id int √ 主键 用户标识
username varchar 255 用户名称
password varchar 255 用户密码
gender varchar 255 用户性别
email varchar 255 用户邮箱
phone_number varchar 20 手机号码
identity varchar 255 用户身份
job_number varchar 20 用户工号
created_at datetime 注册时间
last_login_at datetime 登录时间

表 4-2 patients患者表
名 类型 长度 小数点 不是null 虚拟 键 描述
id int √ 主键 患者标识
patient_name varchar 255 患者姓名
gender varchar 10 患者性别
age int 患者年龄
phone_number varchar 20 手机号码
created_at datetime 就诊时间
last_modified_at datetime 更新时间

表 4-3 doctors医生表
名 类型 长度 小数点 不是null 虚拟 键 描述
id int √ 主键 医生标识
doctor_id int 医生工号
doctor_name varchar 255 医生姓名
gender varchar 10 医生性别
age int 医生年龄
phone_number varchar 20 手机号码
title varchar 255 医生职称
specialty varchar 255 医生专长
schedule_info varchar 255 出诊日期
created_at datetime 入职时间
last_modified_at datetime 更新时间

表 4-4 rooms科室表
名 类型 长度 小数点 不是null 虚拟 键 描述
id int √ 主键 科室标识
room_id int 科室编号
room_name varchar 255 科室名称
room_head varchar 10 科室负责人
created_at datetime 设立时间
last_modified_at datetime 更新时间

表 4-5 medical_records病历表
名 类型 长度 小数点 不是null 虚拟 键 描述
id int √ 主键 病历标识
patient_name varchar 255 患者姓名
doctor_ name varchar 255 医生姓名
doctor_id varchar 255 医生工号
record_content text 诊断报告
record_results text 诊断结果
created_at datetime 诊断时间
last_modified_at datetime 更新时间

表 4-6 medicines药品表
名 类型 长度 小数点 不是null 虚拟 键 描述
id int √ 主键 药品标识
medicine_name varchar 100 药品名称
medicine_brand varchar 255 药品品牌
medicine_company varchar 100 药品厂商
specification varchar 50 药品用量
unit_price decimal 10 2 药品单价
approval_number varchar 50 批准文号
storage int 药品库存
created_at datetime 购入时间
last_modified_at datetime 更新时间

表 4-7 surgeries手术表
名 类型 长度 小数点 不是null 虚拟 键 描述
id int √ 主键 手术标识
doctor_name varchar 255 医生姓名
doctor_id varchar 255 医生工号
patient_name varchar 255 患者姓名
surgery_name varchar 255 手术类型
created_at datetime 手术日期
last_modified_at datetime 更新时间

表 4-8 nursing护理表
名 类型 长度 小数点 不是null 虚拟 键 描述
id int √ 主键 护理标识
nurse_id int 护士工号
nurse_name varchar 255 护士姓名
gender varchar 255 护士性别
age int 护士年龄
phone_number varchar 255 手机号码
title varchar 255 护士职称
patient_name varchar 255 患者姓名
nursing_content text 护理内容
created_at datetime 护理时间
last_modified_at datetime 更新时间

表 4-9 department部门表
名 类型 长度 小数点 不是null 虚拟 键 描述
department_id int √ 主键 部门编号
department_name varchar 255 部门名称
department_type varchar 255 部门类型
department_desc text 部门描述
created_at datetime 设立时间
last_modified_at datetime 更新时间

表 4-10 positions职工表
名 类型 长度 小数点 不是null 虚拟 键 描述
position_id int √ 主键 职工编号
position_name varchar 255 职工职称
position_type varchar 255 职工类型
department_id int 所属部门
salary varchar 255 职工薪资
position_description text 工作描述
qualification_requirements text 工作要求


关键问题与挑战


【前端】element ui垂直导航栏折叠动画有文字卡顿效果


  • 关闭导航栏折叠动画属性，自己重写导航栏折叠动画，让折叠时的文本溢出方式为隐藏，即text-overflow=hidden;

【前端】表单数据被修改时，表格数据也会被修改


  • 原因是将表单和表格数据绑定后，两者引用了同一内存地址，对表单进行深拷贝后成功解决，即 JSON.parse(JSON.stringify(row));

【前端】删除表格当前页最后一条数据时，仍展示当前页，而不是上一页


  • 在删除时判断total%pageSize是否为0，是则对currentIndex-1


成果与效益


注册界面


图7.1 - 注册界面

注册界面


图7.2 - 登录界面

注册界面


图7.3 - 首页界面

注册界面


图7.4 - 个人中心界面

注册界面


图7.5 - 信息管理界面

注册界面


图7.6 - 统计分析界面

注册界面


图7.7 - 系统设置界面

注册界面


图7.8 - 404界面


开发总结

  这次没有借鉴他人的开源项目，而是自己研究整个开发过程，看到写完的项目后真的很有成就感。但是也正是因为自己开发，所以相比资金管理系统出现了很多问题。第一点，因为这是前后端分离项目，而前端和后端都要自己设计，所以工作量会比较大，这也是为什么要花两倍于资金管理系统的开发时间。第二点，因为是自己瞎捣鼓，所以项目结构很混乱。前端方面只设置了view、assets和component等文件夹，而之前的结构还区分了plugins、store、models、configs等文件夹，且路由结构和服务器接口也都堆在同一个index.js文件，没有进一步细化。而后端方面的数据库设计也是不符合逻辑的，没有外键、索引、触发器、事务处理等，没有将各表联系起来。第三点，因为需求分析与总体设计不够明确，所以项目结构经常改动，导致开发进度很慢。最初只是想尝试能否独立开发项目，并没有仔细想过做什么，因此开发时都是想到什么就做什么，所以总要边做边改，特别是页面样式和数据库经常变动，这部分是开发中最花时间的部分。第四点，在实际开发过程中，对js的一些数据处理方法，如提取对象的map方法，发送请求的fetch方法，这些都需要查阅才能使用，这说明自己的js基础还不够扎实。

  不过，能做到独立开发出项目，已经是最大的收获了。因为自己最初的想法是开发一个和资金管理系统相同体量的项目，没想到自己不仅能做出来，还能在这一基础上加入CSS动画、统计分析模块、面包屑等新内容，虽然这个系统整个开发时间是上个系统的两倍，但资金管理系统的功能其实在7天内就已经实现了，相当于靠自己复现了资金管理系统，还进行了改进，这说明自己的对Vue的理解已经足以支撑自己开发一个项目了，已经符合自己对Vue的学习要求了，可以考虑学习下一项技术了。总的来说，这次开发的收获在于三点。第一点，能够在不借助范例的情况下独立开发web项目，并能实现基本功能，这说明自己已经具备入门级的前端水平。第二点，自己在开发过程中自己领悟到了配置统一接口、统一路由、复用动态组件这些思想，这说明自己在编程思维上有了模块化和工程化的雏形。第三点，自己在开发过程中学会了运用布局容器和设计了CSS动画，这些经验加深了自己对CSS的理解。

  总的来说，这次开发是有进步的。针对不足之处，要学习更规范的开发流程和项目结构，同时加深对js和promise、axios等技术的理解。针对开发收获，则可以尝试学习下一门技术，暂时不用考虑学习开发后台管理系统，可以考虑学习后端技术，如Java的SSM或者Go，或者考虑学习安卓开发，如flutter或uniapp。

  这次寒假的学习目标是学习uniapp、ts和vite，掌握这些知识后，则再学习react、react native，然后学习后端技术，最后研究面试八股文，争取暑期实习。总是还有很多东西要学习，继续加油！！！