基于 Vue 和 SpringBoot 的医院门诊预约挂号系统源代码+数据库

2023-11-04

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

完整代码下载地址:基于 Vue 和 SpringBoot 的医院门诊预约挂号系统源代码+数据库

软件简介

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

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

在这里插入图片描述

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

本系统前端采用了国内流行的 Vue 技术,采用了 View UI 作为组件库;后端采用 Java 语言编写,采用 SpringBoot 整合 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。

在这里插入图片描述

开发模板

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

模板还封装了文件管理功能,在其他模块如若要实现图片/文件上传预览时,前端只需导入现成的 Vue 组件即可实现(使用 viewerjs 依赖实现),后端只需定义 String 类型的实体类变量即可,无需再去研究文件上传预览的相关功能,简化了开发者的工作量。

模板还自带基于 beetl 代码生成器功能,开发者只需要输入类名(如 Student)和类备注(如学生),运行 main 函数即可自动生成后端的所有 MVC 结构代码,无需开发增删改查的 API 接口。对于前端,开发者只需输入后端实体类的完整路径,利用 Java 的反射原理,拿到后端实体类的字段,即可自动生成前端所有代码,生成的模块代码包含基础的增删改查功能,简化开发者的工作量。

项目背景

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

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

项目意义

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

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

系统预览

登陆界面

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

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

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

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

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

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

在这里插入图片描述

在这里插入图片描述

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

在这里插入图片描述

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

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

在这里插入图片描述

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

在这里插入图片描述

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

在这里插入图片描述

注册界面

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

在这里插入图片描述

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

在这里插入图片描述

科室管理模块

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

在这里插入图片描述

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

科室的信息包括:

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

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

在这里插入图片描述

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

在这里插入图片描述

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

在这里插入图片描述

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

在这里插入图片描述

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

导出结果如下图所示:

在这里插入图片描述

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

在这里插入图片描述

医生管理模块

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

在这里插入图片描述

医生的信息包括

  • 医生姓名

  • 医生年龄

  • 学历学位

  • 开始工作时间

  • 毕业院校

  • 职称

  • 专业

  • 所属科室

  • 医生介绍

医生档案的增加、编辑、删除、导出操作步骤同科室模块。

可以根据科室查询医生,如在科室搜索框内输入“口腔”,点击搜索按钮,即可查询口腔科的医生列表,如下图所示:

在这里插入图片描述

医生的数据库设计如下图所示:

在这里插入图片描述

医生放号模块

为了模拟真实的预约挂号流程,本系统设计了医生放号模块。

管理员进入医生放号模块,界面如下图所示:

在这里插入图片描述

点击每一行医生的“放号”按钮,系统弹出放号交互弹框,如下图所示:

在这里插入图片描述

管理员需要填入放号日期、放号时段、放号个数,完成放号功能。

如填入放号日期为“2022-09-12”,放号时段为上午,放号个数为 10 个,点击“确认放号”按钮,即可完成对罗文文医生的放号操作。

管理员可点击每一行医生的“查询”按钮,完成对放号结果的查询,如下图所示:

在这里插入图片描述

医生号源的数据库设计如下图所示:

在这里插入图片描述

预约挂号模块

患者账号登陆系统后,可以进入到预约挂号模块,如下图所示:

在这里插入图片描述

在预约挂号模块中,可以查询需要挂号的医生。

可以根据科室查询,可以筛选是否今日的号,可以搜索医生的姓名、职称,该搜索功能在左上角顶部的搜索框实现。

如筛选了口腔科的科室,点击搜索按钮,即可完成口腔科医生的搜索,如下图所示:

在这里插入图片描述

患者点击每一行医生的红色的“挂号”按钮,系统弹出挂号弹框,患者可以查询该为医生的号源,如下图所示:

在这里插入图片描述

点击每一行的橙色“挂号”按钮,系统弹出再次确认弹框。

在这里插入图片描述

点击“确定”按钮,即可完成预约挂号操作。

挂号的数据库设计如下图所示:

在这里插入图片描述

我的挂号模块

患者登陆系统后,可以进入我的挂号模块。

该模块用于展示个人的挂号详情,界面如下图所示:

在这里插入图片描述

患者可以点击每一行红色的“取消点我”按钮,取消该次预约挂号,取消后号源恢复为未挂号状态。

患者可以点击红色的“付款”按钮,完成预约订单的付款功能。付款仅为模拟,支付宝/微信/银联支付必须要企业认证,个人没权限测试开发支付功能。

患者预约到医生的号后,可在我的订单模块模拟付款。付款后预约订单状态为已付款。

患者点击“付款”后,系统将弹出二次确认弹框,如下图所示:

在这里插入图片描述

用户留言模块

医院的预约挂号标准化流程,一定会存在有需要改进的点,或者现有功能不能被患者理解学会,所以需要设计留言板功能,实现患者和医院的信息交互功能。

患者进入到用户留言模块,界面如下图所示:

在这里插入图片描述

患者可点击顶部蓝色的“添加”按钮,打开添加留言弹框,如下图所示。

在这里插入图片描述

患者点击弹框底部的“确认留言”按钮后,完成留言操作。

留言完成后界面如下图所示:

在这里插入图片描述

管理员可以对留言进行回复操作,如下图所示。

在这里插入图片描述

回复成功后,管理员可以双击每一条评论行,查看该条评论的回复列表,如下图所示:

在这里插入图片描述

医院新闻模块

管理员可以进入医院新闻模块,界面如下图所示:

在这里插入图片描述

新闻的信息包括:

  • 新闻名称

  • 新闻描述

  • 图片

  • 新闻时效

  • 是否公开

  • 是否置顶

支持对医院的新闻进行添加、编辑、删除、公开、置顶,操作过程同科室管理模块。

系统采用了 ViewerJs 依赖,对指定 URL 的图片进行预览。

系统采用了 View UI 组件库,在表格内嵌了 Switch 开关组件。

普通患者只能进入的医院新闻留言模块,只保留了新闻的查看功能,界面如下图所示:

在这里插入图片描述

医院新闻的数据库设计如下图所示:

在这里插入图片描述

完整代码下载地址:基于 Vue 和 SpringBoot 的医院门诊预约挂号系统源代码+数据库

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

基于 Vue 和 SpringBoot 的医院门诊预约挂号系统源代码+数据库 的相关文章

  • 如何在 Nuxt 中点击链接下载文件?

    我遇到了一个边缘情况问题 如果用户浏览几条 Nuxt 路线 单击网站 徽标 这是一个锚标记返回主页 然后单击浏览器本机后退按钮 最后单击一个应该的链接要打开 pdf 它会重定向到我的 404 页面 如果用户在页面加载时单击 pdf 链接 它
  • 如何为 VueJS 项目设置根/基 URL

    我已经部署了一个VueJS项目到像这样的域www example com 但是 我想将其移动到子文件夹 以便我可以像这样访问它www example com v1 如何设置基础 URL 或根 URLVueJS项目 注意 这与基本 URL 无
  • Vue.js 动态图像路径未加载

    我试图在单个文件组件中动态加载图像 但收到错误消息 指出无法找到该模块 我想我正在尝试做同样的事情这个帖子 https stackoverflow com questions 40491506 vue js dynamic images n
  • 在vue中提交表单。如何引用表单元素?

    我想从我的 Vue 页面通过一种方法进行经典的表单提交 我不想使用
  • 使用 vue.js 显示 json 结果

    您好 我尝试使用 vue js 显示 json 文件结果 目标是结果将显示在值上 这是我的代码 data return fetchData function var self this self http get api casetotal
  • Web 扩展中共享 vuex 状态(死对象问题)

    我正在尝试在网络扩展中使用共享的 vue js 状态 状态存储在后台脚本的 DOM 中并呈现在弹出页面中 第一次尝试 我的第一次尝试是使用一个没有 vuex 的简单商店 背景 js var store count 0 popup js br
  • 如何在Vue中获取输入字段值

    我是 Vue 新手 我需要一些帮助来从输入字段获取值 在我的表格中 我有
  • 可以用vue-chartjs打印图表吗?

    我正在使用 vue chartjs 在网络应用程序上渲染图表 我知道如果您使用原始版本 您可以打印图表library https canvasjs com docs charts methods chart print 但是我不知道如何使用
  • 如何在 Atom 中启用 .vue 文件的语法突出显示?

    我开始使用 Vue js 我遇到的第一个问题是我的 IDE Atom 无法美化我的 vue 文件 这一切都只是白色的文字 如何让 Atom 正确突出显示 vue 文件 语言 vue https atom io packages langua
  • Vue js - 在同一级别的两个组件内传递数据

    我有需要从一个传递的数据component1到另一个component2 我不使用vuex or router 组件树 Parent Component1 Component2 从一开始component1我发出 ajax 请求 检索信息并
  • 未向导出的模块提供此上下文

    我对问题的提出感到不满意 受到鼓励提出改进建议 另外 请记住 由于无知 无知导致烦恼 我对问题的诊断可能有缺陷 对于那个很抱歉 In 这个答案 https stackoverflow com a 40893583 1525840建议使用th
  • 如何以编程方式启动 Vuetify 对话框并等待响应

    我对 Vue js 和 Vuetify 相当陌生 使用 AngularJS 好几年了 但我们公司正在转向 Vue js 我想要完成的是 当用户单击 登录 按钮时 它会执行一些检查 即用户名不能为空 并启动 Vuetify 对话框来提醒用户
  • Vue 监听 Vuex 提交吗?

    有没有一种方法可以监听 Vuex 提交 而不观察任何随提交而更改的属性 只是简单地找出是否发生了提交 我有一个 Filter 组件 想将其放入 NPM 包中 但我已经有一个用例 在该用例中 我希望设置一个 cookie 在选择过滤器时存储过
  • Vue中有类似React.Fragment的东西吗?

    在 React 中我可以做这样的事情 parent component export default return div div 1 div div
  • Vue 3 Composition API 提供/注入在单文件组件中不起作用

    我正在使用 Composition API 在 VueJS 3 中创建一个库 我实现了提供 注入 如中所述docs https v3 vuejs org guide composition api provide inject html i
  • Vue.js 中计算属性和普通数据的区别

    我观察到 当一个正常的财产来自data 和从它派生的计算属性通过事件传递 前者保持其反应性 而后者失去它 我为其设置了以下测试用例 也作为 JSFiddle https jsfiddle net christophfriedrich b27
  • Laravel Vue 组件只能传递数字?

    在我的 UserMenu vue 中我写道 export default props nameVal data return 并在blade php中
  • 如何在 Vue 2 中使用 Vue 路由器

    我正在学习 Vue 并开始于网页包模板 https github com vuejs templates webpack tree master template src 我想做的第一件事是添加对 Vue Router 的支持 但我现在已经
  • Javascript:更改输入值时设置光标位置

    当您输入公式时 我试图在我的应用程序中重现类似于 Microsoft Excel Google Sheets 的用户体验 并且您可以使用不同的公式和变量来自动完成下拉菜单 为此 在验证自动完成功能后 我希望能够控制光标的位置 例如 如果我输
  • 模块构建失败(来自 ./node_modules/babel-loader/lib/index.js)Vue Js

    我从 GitHub 下载了一个我和我的朋友正在开发的项目 但是当我尝试运行时 npm run serve 我收到这个错误 src main js 中的错误 Module build failed from node modules babe

随机推荐

  • Hive中LIKE和RLIKE的区别

    1 LIKE和RLIKE的使用示例 SELECT name LIKE Alice FROM table1 表示选择name列内以ALICE作为结尾的数据 相同的功能使用RLIKE实现如下 SELECT name RLIKE Alice FR
  • docker commit 命令

    简介 在软件开发中经常需要保存软件状态 比如git 中每次提交的代码都会有版本号 可以根据提交的版本号进行恢复 docker中通过docker commit 命令提供了一个保存镜像状态的方式 使用 比如有一镜像 adaptor 1 通过do
  • cmd怎么另起一行_西语毕业论文怎么写?西语资料去哪儿找?

    西语毕业论文怎么写 西语资料去哪儿找 1 论文结构 西语 学位论文包括前置 主体 附录等三个部分 以下细节无固定先后之分 视具体学校要求而定 1前置 1 封面 由论文 中 西 文题目 姓名 学号 专业 班级 指 导老师姓名和职称 时间组成
  • 数据结构系列——栈 stack

    本期主题 数据结构之 栈 往期链接 数据结构系列 先进先出队列queue 目录 1 栈定义 2 使用动态数组实现栈 3 有趣的例子 1 栈定义 栈是什么 定义 一个后进先出的数据结构 LIFO last in first out 插入操作称
  • 美国地质调查局SRTM--30米DEM数据

    美国地质调查局 USGS SRTM DEM数据 0 简介 1 数据下载 1 1网址 https lpdaac usgs gov https lpdaac usgs gov 1 2搜索 SRTM 以列表展示 选择SRTMGL1 003 1 3
  • 转--Approximate Inference(近似推断,变分推断,KL散度,平均场, Mean Field )

    题目 PRML读书会第十章 Approximate Inference 近似推断 变分推断 KL散度 平均场 Mean Field 转自 http blog csdn net nietzsche2015 article details 43
  • 使用波束搜索的端到端神经网络系统中的上下文语音识别(论文翻译)

    摘要 最近的研究表明 端到端 E2E 语音识别体系结构 如Listen attent和Spell LAS 可以在LVCSR任务中获得最先进的质量结果 这种体系结构的一个优点是它不需要单独训练的发音模型 语言模型和声学模型 但是 这个属性也引
  • Redis 高可用之持久化

    目录 Redis 高可用 Redis 持久化 RDB 持久化 触发条件 执行流程 启动时加载 修改配置文件 AOF 持久化 配置 执行流程 命令追加 append 文件写入 write 和文件同步 sync 文件重写 rewrite 文件重
  • Unity实现一个可扩展的UGUI无限滑动列表控件

    12月20日新增 增加一个可收缩的滑动列表 适用于游戏中的任务系统 成就等 使用说明 创建时需要两个模板slot 一个是button 另一个则是btn下显示的cell 配置如下图添加ExpandableView脚本 新增的IsDefault
  • Python环境配置

    1 python下载 下载地址 https www python org downloads 找到3 10以上的包下载 2 Pycharm下载 Pycharm下载 选择社区版本的下载就够用 3 Pycharm配置Python环境 Proje
  • 华为鸿蒙4本周发布:官方海报大有玄机!告别“人工智障”!

    一年一度的华为开发者大会2023 HDC Together 将于8月4日至8月6日在东莞松山湖举办 相比去年 今年的华为开发者大会足足提前了三个月 而本次大会主角之一无疑是全新国产操作系统鸿蒙4 HarmonyOS 4 官方之前用了三个词来
  • git查看、修改远程仓库地址

    查看 远程仓库 git remote v 修改 git remote set url origin gitUrl 再查看 git remote v 输出已修改过得git仓库地址 即为完成
  • 分布式数据库资料

    Hadoop是很多组件的集合 主要包括但不限于MapReduce HDFS HBase ZooKeeper MapReduce模仿了Google MapReduce HDFS模仿了Google File System HBase模仿了Goo
  • python项目2to3方案预研

    目录 官方工具2to3 工具安装 参数解释 基本使用 工具缺陷 future 工具安装 参数解释 基本使用 工具缺陷 python modernize 工具安装 参数解释 基本使用 工具缺陷 pyupgrade 工具安装 参数解释 基本使用
  • Unity 3D期末大作业--背包系统

    Unity游戏背包系统的实现 一 项目概述 1 功能描述 该部分主要实现了游戏中玩家在个人背包和游戏角色之间切换装备 能够从背包中将装备装到游戏角色上也能够将游戏角色的装备卸下放入背包 卸下装备放入背包 将背包中装备赋给游戏角色 2 实现思
  • 图像阈值分割方法论文与代码【matlab】

    一 算法流程 图像是事物的视觉表现 也是人类接收信息 传递信息的一种重要途径 是人类生活与生产过程中最高效的信息获取与交流的方式之一 图像分割是一种帮助人类获取有效知识的重要方法 其主要是将目标图像处理成多个具有不同性质的区域并提取出对用户
  • base64编码相关-btoa和atob及中文乱码报错问题

    base64编码相关 btoa和atob及中文乱码报错问题 最近在做二进制编码相关的东西 关于Base64的编码解码问题 遇到了一些问题 btoa btoa函数全称就是Binary to ASCII 在js中用于Base64编码 let e
  • 图片处理二--使用OpenCV库实现图片膨胀腐蚀

    1 什么是形态学操作 形态学操作就是基于形状的一系列图像处理操作 通过将结构元素作用于输入图像来产生输出图像 最基本的形态学操作有二 腐蚀与膨胀 Erosion 与 Dilation 他们的运用广泛 消除噪声 分割独立的图像元素 以及连接
  • Maven的介绍及安装

    Maven 什么是Maven 在美国是一个口语化的词 代表专家 内行的意思 一个对Maven比较正式的定义是这么说的 Maven是一个项目管理工具 它包含了一个项目对象模型 POM Project Object Model 一组标准集合 一
  • 基于 Vue 和 SpringBoot 的医院门诊预约挂号系统源代码+数据库

    基于 Vue 和 SpringBoot 的医院门诊预约挂号系统 完整代码下载地址 基于 Vue 和 SpringBoot 的医院门诊预约挂号系统源代码 数据库 软件简介 本软件是 基于 Vue 的医院门诊预约挂号管理系统 主要包含数据中心