摘要

随着医疗信息化的不断推进以及“互联网+医疗”模式的广泛普及，传统医院挂号流程中存在的排队时间长、资源分配不均等问题日益凸显，急需通过数字化手段加以解决。本研究设计并实现了一套基于Java、SpringBoot、Vue与UniAPP技术栈的医院预约挂号微信小程序系统，致力于借助数字化技术优化就医流程，有效提升患者的就医体验和医院的服务效率。该系统的设计背景源于当前医院挂号所面临的线下排队拥挤、号源信息不透明、跨院区预约困难等实际痛点，而微信小程序无需安装、触达率高的特性使其成为连接患者与医院的理想载体。系统旨在构建一个集预约挂号、诊前提醒、就诊导航、报告查询、医患互动等功能于一体的全流程数字化平台，让患者在就医过程中实现“少排队、少跑腿、少等待”，同时为医院提供智能化的号源管理与数据分析工具。在技术实现上，后端采用SpringBoot构建微服务架构，实现用户服务、挂号服务、医院服务等模块的开发，使用MySQL存储患者信息、号源池、就诊记录等业务数据，结合MyBatis-Plus简化数据库操作，并通过Redis缓存热门科室、医生排班等高频访问数据以提升响应速度，基于RESTful API设计接口并支持JWT token认证与权限控制。前端部分，小程序端利用UniAPP开发，通过Vue.js语法实现跨平台兼容，集成组件库优化交互体验。

实现的功能

患者、医生、管理员三中角色，均是小程序。

患者：包括登录注册，预约挂号，查看医生，缴费，编辑个人信息等。

医生：查看患者信息，开药，排班，病例，编辑个人信息等。

管理员：管理患者和医生信息，排班信息管理，编辑个人信息等。

用到的技术

后端 Java语言的SpringBoot框架、MySQL8数据库、Maven依赖管理等；

前端 小程序是Vue.js语法的UniApp框架。

注册界面代码

<template>
	<view class="container">
		<view class="left-bottom-sign"></view>
		<view class="back-btn yticon icon-zuojiantou-up" @click="navBack"></view>
		<view class="right-top-sign"></view>
		<!-- 设置白色背景防止软键盘把下部绝对定位元素顶上来盖住输入框等 -->
		<view class="wrapper">
			<view class="left-top-sign">Rsgist</view>
			<view class="welcome">
				欢迎注册
			</view>
			<view class="input-content">
				<view class="input-item">
					<text class="tit">用户名</text>
					<input 
						type="text" 
						v-model="user.nickName" 
						placeholder="请输入用户名"
						maxlength="11"
					/>
				</view>
				<view class="input-item">
					<text class="tit">真实姓名</text>
					<input 
						type="text" 
						v-model="user.realName" 
						placeholder="请输入真实姓名"
						maxlength="11"
					/>
				</view>
				<view class="input-item">
					<text class="tit">密码</text>
					<input 
						type="password"
						placeholder="输入密码"
						placeholder-class="input-empty"
						maxlength="20"
						password 
						v-model="pass"
					/>
				</view>
				<view class="input-item">
					<text class="tit">重复密码</text>
					<input 
						type="text"
						placeholder="重复输入密码"
						placeholder-class="input-empty"
						maxlength="20"
						password 
						v-model="pass2"
					/>
				</view>
				<!-- <view class="input-item">
					<text class="tit">注册类型</text>
					<view>
						<label class="radio" style="margin-right: 50rpx;"><radio value="r1" :checked="user.type==1"  @click="user.type=1" />消费者</label>
						<label class="radio"><radio value="r2"  :checked="user.type==2" @click="user.type=2" />商家</label>
					</view>
				</view> -->
				
				<view class="input-item">
					<text class="tit">电话</text>
					<input 
						type="number"
						placeholder="请输入电话"
						placeholder-class="input-empty"
						maxlength="11" 
						v-model="user.phone"
					/>
				</view>
				
				<view class="input-item">
					<text class="tit">地址</text>
					<input 
						type="text"
						placeholder="请输入地址"
						placeholder-class="input-empty"
						maxlength="30" 
						v-model="user.address"
					/>
				</view>
				
				<view class="input-item">
					<text class="tit">年龄</text>
					<input 
						type="number"
						placeholder="请输入年龄"
						placeholder-class="input-empty"
						v-model="user.age"
					/>
				</view
				
				<view class="input-item">
					<text class="tit">性别</text>
					<radio-group @change="radioChange">
						<label style="padding-right: 30rpx;" class="radio" v-for="(item, index) in items" :key="item.value"><radio :value="item.value" :checked="index === current" />{{item.name}}</label>
					</radio-group>
				</view>
				
			</view>
			<view style="width: 100vw;display: flex;justify-content: center;">
				<button class="confirm-btn" @click="toLogin" :disabled="logining">注册</button>
			</view>
			
		</view>
	</view>
</template>

演示视频