【入门毕设项目】基于 Vue 的医院门诊预约挂号系统(一)

简介: 【入门毕设项目】基于 Vue 的医院门诊预约挂号系统

基于 Vue 和 Spring Boot 的医院门诊预约挂号系统

又是一年开题的时候了,大四毕业生开始了自己的选题之旅。本文详细介绍了这个门诊预约挂号系统,它基于Vue + SpringBoot + MyBatis Plus + MySQL 实现,是一个很好的入门项目,该系统包括了数据中心模块、科室医生模块、预约挂号模块、医院时政模块,模拟了患者预约挂号的完整流程,给大四毕业生们提供一个参考项目,同时还能获取到源码,二次开发提高项目经验。

软件简介

本软件是《基于 Vue 的医院门诊预约挂号管理系统》,主要包含数据中心、科室医生模块、预约挂号模块、医院时政这四大模块。

预约挂号系统采用了基于角色的访问控制,角色和菜单关联,一个角色可以配置多个菜单权限;然后再将用户和角色关联,一位用户可以赋予多个角色。这样用户就可以根据角色拿到该有的菜单权限,更方便医院管理人员进行权限管控。

本项目源代码托管在:门诊预约挂号系统源代码,有需要的同学可以自行下载。

患者去医院都是排队挂号,但随着科技的发展,预约挂号脱颖而出,医院门诊预约挂号管理系统操作简单明了与互联网紧密相关、适应时代发展的潮流。通过医院门诊预约挂号系统,可以极大的方便挂号者进行预约挂号,同事还能是医院更加合理的安排排号者就医并提供更优质的医疗服务。既能适当解决当前中国面临的医院门诊挂号排队时间长、挂号环境乱的问题,又能方便广大预约者挂号预约自己相对满意的医生和专家。

本系统前端采用了国内流行的 Vue 技术,采用了 View UI 作为组件库;后端采用 Java 语言编写,采用 Spring Boot 整合 MybatisPlus,采用 maven 构建项目,采用 Mysql 数据库,使用了 Redis 用于缓存加密的用户临时数据。

《医院门诊预约挂号管理系统》的登陆界面如下图所示。

《医院门诊预约挂号管理系统》的主页如下图所示。

技术栈

前端

Vue:Vue 是构建前端界面的核心框架,本系统采用 2.6.14 版本。

View UI:基于 Vue.js2.0 的组件库,本系统采用 4.7.0 版本。

后端

Spring Boot:构建系统核心逻辑的后端框架,本系统采用 2.7.0 版本。

MyBatis / MyBatis Plus:后端连接数据库的框架,本系统采用 3.5.2 版本。

数据库

MySQL:本项目的主数据库,本系统采用 8.0.29 版本。

Redis:本系统采用基于 Windows 版本的 Redis,用于图形验证码和用户菜单权限的临时存储,采用了 5.0.14 版本。

开发环境

VsCode:项目前端的开发工具,使用版本为 1.68.0。

IntelliJ IDEA :项目后端的开发工具,使用版本为 2021.3.2。

Jdk:Java 的开发环境,使用版本为 17.0.3.1。

Maven:后端项目的打包工具,使用版本为 3.6.2。

NodeJs:前端项目的开发环境,使用版本为 16.13.0。

项目背景

预约挂号,挂专家号更是“一号难求”,这是当前许多大型医院的普遍现象。预约挂号是各地近年来开展的一项便民就医服务,旨在缩短看病流程,节约患者时间。这种预约挂号大多通过医疗机构提供的电话或者网络进行,基本上是免费或者只收取很少的手续费。由于预约挂号需要事先登记患者的信息,并且可以减少在医院挂号窗口排队等待之苦,因此它一定程度上也有利于改善就医环境,促进“实名制”的推行,受到了不少患者的肯定和欢迎。

自从有了医生这个职业,医生预约就一直存在。从古代君王豪吏,富贾商户到如今医生预约走进社会各基层,走进千家万户,医生预约经历了从特权到普遍,滞后到高速发展的不同时期。这是近几年新兴的挂号方式。通过网络可以完成在医院或者在电话预约中完整的服务,方便快捷,加以医生门诊预约系统强大的系统管理功能,使医院方面在经营管理方面拥有了新的发展方向。

项目意义

网络挂号更加方便快捷,只需注册账号进行登录,便可以在家中或者其他任何地方通过电脑进行预约挂号操作,可以根据需要查询科室、医生的相关信息,用户也可以随时根据需要修改自己的资料,轻松地预先了解医院以及医生的情况,来选定医生,通过简便的操作,完成挂号预约方便快捷;网络挂号有利于缓解医院窗口挂号排队拥挤的现状。患者大量扎堆在清晨排队挂号,其没有计划的挂号导致等候就诊时间较长,致使大量患者滞留在医院,耽误患者治疗时间。而且财务窗口人力紧张,压力大,不利于服务质量的提高。针对这一问题,医院预约挂号系统有利于减少患者在候诊区无效的等待时间,减轻患者和家属的挂号难度,在一定程度上缓解改善了挂号窗口的紧张状。

根据对预约挂号的平台需求进行分析,将系统分为前台和后台。前台主要由用户使用,主要功能包括:注册与登录、科室医生的浏览/检索、预约、新闻展示、留言板留言等等。后台则由管理员使用,主要功能包括:科室医生的信息管理、预约订单管理、患者信息管理、留言板管理等等。

系统预览

登陆界面

进入系统,首先看到登入界面,用户可以输入自己的账号、密码,进行登入操作。

超级管理员的登陆账号为 admin,密码为 123456。

测试患者的登陆账号为 user1,密码为 123456。

登陆分为账户密码登录和手机短信登陆两种模式。

手机短信登陆因为需要付费,所以暂不开放短信登陆的功能,只是做了一个静态界面。

图片验证码为随机的 4 位阿拉伯数字,用户输入图片中的四位验证码,即可完成登陆。

用户登陆功能,系统首先会效验验证码,验证码有效期为 60 秒,如果超过有效期,系统会提示需要重新登陆,如下图所示:

如果遇到看不清楚的验证码,可以点击验证码图片可以完成刷新。

为了保证系统安全,不被频繁请求访问,如果用户输入错误的验证码,系统将提示“图形验证码输入错误”,不给与登陆,用户需要重新输入验证码。

当输入的验证码正确后,系统第二步会验证用户输入的账号密码,若账号密码输入错误,系统给与提示,告知密码不正确。

当用户输入的账号密码、图形验证码都正确后,系统给与登陆,进入到系统首页,如下图所示:

注册界面

系统开放了用户注册的功能,患者可以自助注册患者账户,进入系统后,点击登陆按钮上方的“注册账号”绿色超链接,跳转到注册界面。

注册界面如下图所示,用户需要输入自己的手机号、用户名、密码和图形验证码,完成患者用户注册。然后使用注册时填入的手机号和密码,完成系统登陆。

科室管理模块

管理员登陆系统后,可以进入科室管理模块,查询科室档案的详细数据,如下图所示:

用户可以浏览医院新闻资讯等信息,并能查询科室、医生等相关信息。

科室的信息包括:

  • 科室名称
  • 科室代码
  • 科室人数
  • 主任医师人数
  • 科室介绍
  • 责任医师
  • 备注

管理员可以单击顶部的“添加”按钮,进入科室的添加界面,后输入科室的名称、科室代码、科室介绍、科室成立日期、责任医师、备注,完成科室的添加。

管理员可以点击每一行的“编辑”按钮,进入科室编辑模块,如下图所示:

进入科室编辑模块后,完成现有数据的修改,点击“提交并保存”按钮即可完成编辑操作。

同理,点击每一行科室的“删除”按钮,即可完成对科室的删除功能。

管理员可以点击顶部的“导出”按钮,完成科室的 Excel 导出功能。

导出结果如下图所示:

医院科室的数据库设计如下图所示:


相关文章
|
2月前
|
存储 JavaScript 前端开发
前端开发:Vue.js入门与实战
【10月更文挑战第9天】前端开发:Vue.js入门与实战
|
2月前
|
JavaScript API 开发者
十分钟 带你强势入门 vue3
十分钟 带你强势入门 vue3
66 1
|
2月前
|
JavaScript
vue3完整教程从入门到精通(新人必学2,搭建项目)
本文介绍了如何在Vue 3项目中安装并验证Element Plus UI框架,包括使用npm安装Element Plus、在main.js中引入并使用该框架,以及在App.vue中添加一个按钮组件来测试Element Plus是否成功安装。
89 0
vue3完整教程从入门到精通(新人必学2,搭建项目)
|
2月前
|
JavaScript Java CDN
vue3完整教程从入门到精通(新人必学1,vue3快速上手)
本文提供了Vue 3从入门到精通的完整教程,涵盖了创建Vue应用、通过CDN使用Vue、定义网站以及使用ES模块构建版本的步骤和示例代码。
327 0
vue3完整教程从入门到精通(新人必学1,vue3快速上手)
|
2月前
|
JavaScript 前端开发 C#
从入门到放弃,我们为何从 Blazor 回到 Vue
【10月更文挑战第29天】在前端开发中,许多开发者从尝试新技术 Blazor 最终回到熟悉的 Vue。主要原因包括:1) Blazor 学习曲线陡峭,Vue 上手容易;2) Vue 开发工具成熟,开发效率高;3) Vue 性能优异,优化简单;4) Vue 社区庞大,生态丰富;5) 项目需求和团队协作更适配 Vue。选择技术栈需综合考虑多方面因素。
115 0
|
25天前
|
JavaScript API 开发者
Vue是如何进行组件化的
Vue是如何进行组件化的
|
27天前
|
JavaScript 前端开发 开发者
vue 数据驱动视图
总之,Vue 数据驱动视图是一种先进的理念和技术,它为前端开发带来了巨大的便利和优势。通过理解和应用这一特性,开发者能够构建出更加动态、高效、用户体验良好的前端应用。在不断发展的前端领域中,数据驱动视图将继续发挥重要作用,推动着应用界面的不断创新和进化。
|
1天前
|
JavaScript 关系型数据库 MySQL
基于VUE的校园二手交易平台系统设计与实现毕业设计论文模板
基于Vue的校园二手交易平台是一款专为校园用户设计的在线交易系统,提供简洁高效、安全可靠的二手商品买卖环境。平台利用Vue框架的响应式数据绑定和组件化特性,实现用户友好的界面,方便商品浏览、发布与管理。该系统采用Node.js、MySQL及B/S架构,确保稳定性和多功能模块设计,涵盖管理员和用户功能模块,促进物品循环使用,降低开销,提升环保意识,助力绿色校园文化建设。
|
28天前
|
JavaScript 前端开发 开发者
vue学习第一章
欢迎来到我的博客!我是瑞雨溪,一名热爱前端的大一学生,专注于JavaScript与Vue,正向全栈进发。博客分享Vue学习心得、命令式与声明式编程对比、列表展示及计数器案例等。关注我,持续更新中!🎉🎉🎉
32 1
vue学习第一章
|
28天前
|
JavaScript 前端开发 索引
vue学习第三章
欢迎来到瑞雨溪的博客,一名热爱JavaScript与Vue的大一学生。本文介绍了Vue中的v-bind指令,包括基本使用、动态绑定class及style等,希望能为你的前端学习之路提供帮助。持续关注,更多精彩内容即将呈现!🎉🎉🎉
26 1
vue学习第三章