Vue2医疗管理系统
该项目是基于Vue2和Node.js技术实现的医疗管理系统。项目背景是在继小程序开发和前端学习后的一次能力检验，检测自身是否能实现独立开发web项目，根据结果决定后续的学习方向。项目需求是独立开发一个医疗管理系统，具备基本的注册登录功能和对相关信息的增删查改功能。通过开发该项目，对自身所学的Vue和Node.js知识进行复习，并进行一次整合应用，巩固编程水平，积累项目经验。
Github仓库链接：Vue2医疗管理系统
| 项目属性 | 内容 |
|---|---|
| 前端 | Vue2 + Element UI |
| 后端 | Node.js |
| 数据库 | MySQL |
| 服务器 | Express |
| 开发工具 | Visual Studio Code + Postman |
| 项目启动 | 2023.11.24 |
| 项目完成 | 2023.12.27 |
🎯 功能和特性
✅ 已实现功能
- 🚪 注册和登录功能
- 📋 对各模块增删查改功能
- 🔍 根据不同关键字搜索功能
- 📄 分页功能
- 🛡️ 路由守卫，未登录时自动跳转至登录页
- 👮 权限管理，只有管理员能进行增删改与权限授予
- 📊 统计分析模块，动态展示图表进行数据分析
- 👥 职工系统和部门系统，模拟数据贴合实际
- 🏷️ 动态标签导航，封装表格组件简化工作量
- 🎨 铃铛摇晃、页面淡入和导航折叠等CSS动画
- 🧩 布局容器、面包屑目录、登录时间记录等优化内容
❌ 存在问题
- 🗃️ 数据库设计逻辑混乱
- 🐛 提交表单数据为空时，表格数据显示"undefined"
- 📱 一些页面没有设计响应式布局，只能在PC浏览器使用
📅 开发流程
| 开发日期 | 开发内容 |
|---|---|
| 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 | 编写工程报告 |
⚠️ 关键问题与挑战
【前端】element ui垂直导航栏折叠动画有文字卡顿效果
关闭导航栏折叠动画属性，自己重写导航栏折叠动画，让折叠时的文本溢出方式为隐藏，即text-overflow=hidden;
【前端】表单数据被修改时，表格数据也会被修改
原因是将表单和表格数据绑定后，两者引用了同一内存地址，对表单进行深拷贝后成功解决，即 JSON.parse(JSON.stringify(row));
【前端】删除表格当前页最后一条数据时，仍展示当前页，而不是上一页
在删除时判断total%pageSize是否为0，是则对currentIndex-1
📝 开发总结
这次没有借鉴他人的开源项目，而是自己研究整个开发过程，看到写完的项目后真的很有成就感。但是也正是因为自己开发，所以相比资金管理系统出现了很多问题。第一点，因为这是前后端分离项目，而前端和后端都要自己设计，所以工作量会比较大，这也是为什么要花两倍于资金管理系统的开发时间。第二点，因为是自己瞎捣鼓，所以项目结构很混乱。前端方面只设置了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，然后学习后端技术，最后研究面试八股文，争取暑期实习。总是还有很多东西要学习，继续加油！！！