摘要

随着医疗信息化的不断推进以及“互联网+医疗”模式的广泛普及，传统医院挂号流程中存在的排队时间长、资源分配不均等问题日益凸显，急需通过数字化手段加以解决。本研究设计并实现了一套基于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>

演示视频