摘要

隨著醫療信息化的不斷推進以及“互聯網+醫療”模式的廣泛普及，傳統醫院掛號流程中存在的排隊時間長、資源分配不均等問題日益凸顯，急需通過數字化手段加以解決。本研究設計并實現了一套基于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>

演示視頻