基于Java SpringBoot和Vue的医院信息管理挂号系统

news2024/11/25 18:30:50

摘要

        医院信息管理系统(Hospital Information Management System,简称HIMS)是一种应用于医疗机构的信息化管理系统,旨在提高医疗服务质量、降低运营成本、提高工作效率和满足患者需求。HIMS通过对医院内各种信息的集成、管理和共享,实现了对医疗资源的有效利用和优化配置。HIMS的实施和应用,有助于提高医院的管理水平,提升医疗服务质量,降低医疗成本,实现医疗资源的合理配置。随着信息技术的不断发展,HIMS将不断升级和完善,为医疗机构提供更加便捷、高效的服务。

用到的技术

后端:java语言的SpringBoot框架,MySql数据库,Maven依赖管理;

前端:Vue.js语法,html页面。

实现的功能

管理员、医生、用户三种角色;

管理员对整个系统进行管理,包括医生管理、药品管理、科室管理、公告管理等;

医生实现了患者管理、药品管理、住院人员管理等功能;

用户可以自行注册登录,可以进行自助挂号、查看病历等;

部分代码展示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>用户管理</title>
		<link rel="stylesheet" href="../../component/pear/css/pear.css" />
	</head>
	<body class="pear-container">
		<div class="layui-card">
			<div class="layui-card-body">
				<form class="layui-form" action="">
					<div class="layui-form-item">
						<div class="layui-form-item layui-inline">
							<label class="layui-form-label">用户名</label>
							<div class="layui-input-inline">
								<input type="text" name="realName" placeholder="" class="layui-input">
							</div>
						</div>
						<div class="layui-form-item layui-inline">
							<label class="layui-form-label">性别</label>
							<div class="layui-input-inline">
								<input type="text" name="realName" placeholder="" class="layui-input">
							</div>
						</div>
						<div class="layui-form-item layui-inline">
							<label class="layui-form-label">邮箱</label>
							<div class="layui-input-inline">
								<input type="text" name="realName" placeholder="" class="layui-input">
							</div>
						</div>
						<div class="layui-form-item layui-inline">
							<button class="pear-btn pear-btn-md pear-btn-primary" lay-submit lay-filter="user-query">
								<i class="layui-icon layui-icon-search"></i>
								查询
							</button>
							<button type="reset" class="pear-btn pear-btn-md">
								<i class="layui-icon layui-icon-refresh"></i>
								重置
							</button>
						</div>
					</div>
				</form>
			</div>
		</div>
		<div class="layui-card">
			<div class="layui-card-body">
				<table id="user-table" lay-filter="user-table"></table>
			</div>
		</div>

		<script type="text/html" id="user-toolbar">
			<button class="pear-btn pear-btn-primary pear-btn-md" lay-event="add">
		        <i class="layui-icon layui-icon-add-1"></i>
		        新增
		    </button>
		    <button class="pear-btn pear-btn-danger pear-btn-md" lay-event="batchRemove">
		        <i class="layui-icon layui-icon-delete"></i>
		        删除
		    </button>
		</script>

		<script type="text/html" id="user-bar">
			<button class="pear-btn pear-btn-primary pear-btn-sm" lay-event="edit"><i class="layui-icon layui-icon-edit"></i></button>
		    <button class="pear-btn pear-btn-danger pear-btn-sm" lay-event="remove"><i class="layui-icon layui-icon-delete"></i></button>
		</script>

		<script type="text/html" id="user-enable">
			<input type="checkbox" name="enable" value="{{d.id}}" lay-skin="switch" lay-text="启用|禁用" lay-filter="user-enable" {{ d.enable== true ? 'checked' : '' }} />
		</script>

		<script type="text/html" id="user-sex">
			{{#if (d.sex == 1) { }}
		    <span>男</span>
		    {{# }else if(d.sex == 2){ }}
		    <span>女</span>
		    {{# } }}
		</script>

		<script type="text/html" id="user-login">
			{{#if (d.login == 0) { }}
		    <span>在线</span>
		    {{# }else if(d.sex == 1){ }}
		    <span>离线</span>
		    {{# } }}
		</script>

		<script type="text/html" id="user-createTime">
			{{layui.util.toDateString(d.createTime, 'yyyy-MM-dd')}}
		</script>

		<script src="../../component/layui/layui.js"></script>
		<script src="../../component/pear/pear.js"></script>
		<script>
			layui.use(['table', 'form', 'jquery','common'], function() {
				let table = layui.table;
				let form = layui.form;
				let $ = layui.jquery;
				let common = layui.common;

				let MODULE_PATH = "operate/";

				let cols = [
					[{
							type: 'checkbox'
						},
						{
							title: '账号',
							field: 'username',
							align: 'center',
							width: 100
						},
						{
							title: '姓名',
							field: 'realName',
							align: 'center'
						},
						{
							title: '性别',
							field: 'sex',
							align: 'center',
							width: 80,
							templet: '#user-sex'
						},
						{
							title: '电话',
							field: 'phone',
							align: 'center'
						},
						{
							title: '启用',
							field: 'enable',
							align: 'center',
							templet: '#user-enable'
						},
						{
							title: '登录',
							field: 'login',
							align: 'center',
							templet: '#user-login'
						},
						{
							title: '注册',
							field: 'createTime',
							align: 'center',
							templet: '#user-createTime'
						},
						{
							title: '操作',
							toolbar: '#user-bar',
							align: 'center',
							width: 130
						}
					]
				]

				table.render({
					elem: '#user-table',
					url: '../../admin/data/user.json',
					page: true,
					cols: cols,
					skin: 'line',
					toolbar: '#user-toolbar',
					defaultToolbar: [{
						title: '刷新',
						layEvent: 'refresh',
						icon: 'layui-icon-refresh',
					}, 'filter', 'print', 'exports']
				});

				table.on('tool(user-table)', function(obj) {
					if (obj.event === 'remove') {
						window.remove(obj);
					} else if (obj.event === 'edit') {
						window.edit(obj);
					}
				});

				table.on('toolbar(user-table)', function(obj) {
					if (obj.event === 'add') {
						window.add();
					} else if (obj.event === 'refresh') {
						window.refresh();
					} else if (obj.event === 'batchRemove') {
						window.batchRemove(obj);
					}
				});

				form.on('submit(user-query)', function(data) {
					table.reload('user-table', {
						where: data.field
					})
					return false;
				});

				form.on('switch(user-enable)', function(obj) {
					layer.tips(this.value + ' ' + this.name + ':' + obj.elem.checked, obj.othis);
				});

				window.add = function() {
					layer.open({
						type: 2,
						title: '新增',
						shade: 0.1,
						area: [common.isModile()?'100%':'500px', common.isModile()?'100%':'400px'],
						content: MODULE_PATH + 'add.html'
					});
				}

				window.edit = function(obj) {
					layer.open({
						type: 2,
						title: '修改',
						shade: 0.1,
						area: ['500px', '400px'],
						content: MODULE_PATH + 'edit.html'
					});
				}

				window.remove = function(obj) {
					layer.confirm('确定要删除该用户', {
						icon: 3,
						title: '提示'
					}, function(index) {
						layer.close(index);
						let loading = layer.load();
						$.ajax({
							url: MODULE_PATH + "remove/" + obj.data['userId'],
							dataType: 'json',
							type: 'delete',
							success: function(result) {
								layer.close(loading);
								if (result.success) {
									layer.msg(result.msg, {
										icon: 1,
										time: 1000
									}, function() {
										obj.del();
									});
								} else {
									layer.msg(result.msg, {
										icon: 2,
										time: 1000
									});
								}
							}
						})
					});
				}

				window.batchRemove = function(obj) {
					
					var checkIds = common.checkField(obj,'userId');
					
					if (checkIds === "") {
						layer.msg("未选中数据", {
							icon: 3,
							time: 1000
						});
						return false;
					}
					
					layer.confirm('确定要删除这些用户', {
						icon: 3,
						title: '提示'
					}, function(index) {
						layer.close(index);
						let loading = layer.load();
						$.ajax({
							url: MODULE_PATH + "batchRemove/" + ids,
							dataType: 'json',
							type: 'delete',
							success: function(result) {
								layer.close(loading);
								if (result.success) {
									layer.msg(result.msg, {
										icon: 1,
										time: 1000
									}, function() {
										table.reload('user-table');
									});
								} else {
									layer.msg(result.msg, {
										icon: 2,
										time: 1000
									});
								}
							}
						})
					});
				}

				window.refresh = function(param) {
					table.reload('user-table');
				}
			})
		</script>
	</body>
</html>

演示视频

基于SpringBoot和Vue医疗医院信息管理系统

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1319588.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

mybatis中oracle的sql没走索引导致特别慢(未加jdbcType的)

如果直接跑sql是能走索引很快&#xff0c;在mybatis中不能&#xff0c;可能就是jdbcType的原因。 比如&#xff0c;我有一个属性A&#xff0c;在表里面是VARCHAR2类型&#xff0c;但是在mybatis中的sql是#{a}&#xff0c;缺少jdbcTypeJdbcType.VARCHAR&#xff0c;就会导致myba…

Excel小技能:excel如何将数字20231211转化成指定日期格式2023/12/11

给了一串数字20231211&#xff0c;想要转成指定格式的日期格式&#xff0c;发现设置单元格格式为指定日期格式不生效&#xff0c;反而变成很长很长的一串#这个&#xff0c;如图所示&#xff1a; 其实&#xff0c;正确的做法如下&#xff1a; 1&#xff09;打开数据功能界面&am…

列举python2和python3的区别,python 2和python 3的区别

大家好&#xff0c;本文将围绕python2和python3的区别有哪些?展开说明&#xff0c;列举 python2和python3的区别?是一个很多人都想弄明白的事情&#xff0c;想搞清楚python2和python3的区别大吗需要先了解以下几个事情。 python不同于其他语言,python3并不对python2向下兼容 …

Java刷题篇——单链表练习题上

206. 反转链表 - 力扣&#xff08;LeetCode&#xff09; 1. 题目描述 给你单链表的头节点 head &#xff0c;请你反转链表&#xff0c;并返回反转后的链表。 示例1 输入&#xff1a;head [1,2,3,4,5] 输出&#xff1a;[5,4,3,2,1] 示例2 输入&#xff1a;head [1,2] 输出&…

深入比较Input、Change和Blur事件:Vue与React中的行为差异解析

目录 前言 1. Input事件&#xff1a; 行为差异&#xff1a; 2. Change事件&#xff1a; 行为差异&#xff1a; 3. Blur事件&#xff1a; 行为差异&#xff1a; 4. 在Vue中的表现&#xff1a; Input事件&#xff1a; Change事件&#xff1a; Blur事件&#xff1a; 5.…

基于Vue的汽车服务商城系统设计与实现论文

摘 要 本课题是根据用户的需要以及网络的优势建立的一个基于Vue的汽车服务商城系统&#xff0c;来更好的为用户提供服务。 本基于Vue的汽车服务商城系统应用Java技术&#xff0c;MYSQL数据库存储数据&#xff0c;基于SSMVue框架开发。在网站的整个开发过程中&#xff0c;首先对…

【数据结构】树状数组总结

知识概览 树状数组有两个作用&#xff1a; 快速求前缀和 时间复杂度O(log(n))修改某一个数 时间复杂度O(log(n)) 例题展示 1. 单点修改&#xff0c;区间查询 题目链接 活动 - AcWing本活动组织刷《算法竞赛进阶指南》&#xff0c;系统学习各种编程算法。主要面向…

浅谈深度学习中的不同归一化层

引言 目前&#xff0c;深度学习已经彻底改变了自然语言处理、计算机视觉、机器人等许多子领域。深度学习当然涉及训练精心设计的深度神经网络&#xff0c;并且各种设计决策会影响这些深度网络的训练机制。其中一些设计决策包括 网络中要使用的网络层类型&#xff0c;例如卷积…

【python】深拷贝和浅拷贝

能使用.copy()的对象&#xff1a; 需要是能改变元素的对象比如 list 和 set 就可以改变对象&#xff0c;可以使用copy函数但是类似于 一个整数 a10 或者 元组 就不能使用copy函数&#xff0c;因为他们是不可改变的对象 深拷贝和浅拷贝 浅拷贝就是这能复制第一层元素&#xff0…

12V转24V10A升压同步整流芯片:高效能解决方案

12V转24V10A升压同步整流芯片&#xff1a;高效能解决方案 随着现代电子设备的日益普及&#xff0c;对电源管理的要求也越来越高。其中&#xff0c;升压同步整流芯片在提高电源转换效率方面发挥着重要作用。本文将为您介绍一款12V转24V10A升压同步整流芯片&#xff0c;其优异的…

Kafka 基础快速入门

1、生产者 1、生产者发送消息流程 配置生产者参数属性和创建生产者对象 构建消息:ProducerRecord 发送消息:Send 关闭生产者 2、消费者 1、消费者接受消息流程 配置消费者参数属性和创建消费者对象 订阅主题 拉取消息并进行消费处理 提交消费偏移量,关闭消费者 2、消费者和…

前后端传参中遇见的问题

前后端传参经常容易出错&#xff0c;本文记录开发springBootMybatis-plusvuecli项目中出现的传参问题及解决办法 1.前后端没有跨域配置&#xff0c;报错 解决方法&#xff1a;后端进行跨域配置&#xff0c;拷贝CorsConfig类 package com.example.xxxx.config;import org.spr…

基于springboot实现的销售评价系统

一、系统架构 前端&#xff1a;html | js | css | jquery 后端&#xff1a;springboot | springdata-jpa | thymeleaf 环境&#xff1a;jdk1.7 | mysql | maven 二、代码及数据库 三、功能介绍 01. 登录页 02. 业务模块-评分结果 03. 业务模块-评分管理 04. 基础模块-…

SLAM学习笔记002

严格意义上讲&#xff0c;ROS只是一套通信框架而已ros的几个特性&#xff1a; 元操作系统分布式通信机制松耦合软件框架丰富的开源功能库等 ros实际上是运行在ubuntu上的亚操作系统&#xff0c;或者说软件框架。但提供硬件抽象、函数调用、进程管理这些类似操作系统的功能ros…

火狐浏览器无法打开有道云笔记网页解决

User-Agent Switcher and Manager 安装插件&#xff1a;User-Agent Switcher and Manager 可以直接在火狐插件管理中搜索&#xff0c;或者打开 https://addons.mozilla.org/zh-CN/firefox/addon/user-agent-string-switcher/?utm_sourceaddons.mozilla.org&utm_mediumre…

华为交换机,配置OSPF与BFD联动示例

OSPF简介 定义 开放式最短路径优先OSPF&#xff08;Open Shortest Path First&#xff09;是IETF组织开发的一个基于链路状态的内部网关协议&#xff08;Interior Gateway Protocol&#xff09;。 OSPF把自治系统AS&#xff08;Autonomous System&#xff09;划分成逻辑意义上…

vue3引入高德地图报错Uncaught Error: Invalid Object: LngLat(NaN, NaN

问题&#xff1a; 原因&#xff1a;容器高度未设置 解决&#xff1a; 地图容器添加高度。 <style scoped> #map {width: 100%;height: 800px; } </style>

Agilent安捷伦33220A函数信号发生器

是德科技33220A(安捷伦)函数发生器为函数和波形提供了不折不扣的性能。有11个标准波形加上脉冲和任意波形&#xff0c;它是同类产品中频率最稳定和失真最低的函数发生器之一。 前面板允许用一两个键访问所有主要功能。旋钮或数字键盘可用于调整频率、振幅、偏移和其他参数。内…

代码随想录第三十四天(一刷C语言)|不同路径不同路径II

创作目的&#xff1a;为了方便自己后续复习重点&#xff0c;以及养成写博客的习惯。 一、不同路径 思路&#xff1a;参考carl文档 机器人每次只能向下或者向右移动一步&#xff0c;机器人走过的路径可以抽象为一棵二叉树&#xff0c;叶子节点就是终点。 1、确定dp数组&#…

高可用接入层技术演化及集群概述

集群概述 集群的介绍及优势 集群&#xff1a;将多台服务器通过硬件或软件的方式组合起来&#xff0c;完成特定的任务&#xff0c;而这些服务器对外表现为一个整体。集群的优势 高可靠性&#xff1a;利用集群管理软件&#xff0c;当主服务器故障时&#xff0c;备份服务器能够自…