基于vue和Typescript的在線掛號醫(yī)療服務(wù)平臺摘要隨著社會發(fā)展,傳統(tǒng)的醫(yī)療掛號服務(wù)平臺將難以滿足人們多樣化的需求，目前的醫(yī)療服務(wù)平臺功能較為單一，且各醫(yī)院服務(wù)平臺分散，不符合用戶多樣化的需求。基于VUE和Typescript開發(fā)的的在線掛號醫(yī)療服務(wù)平臺旨在為有需要的市民提供一個便捷、高效的在線掛號醫(yī)療服務(wù)平臺，這個平臺可以為用戶提供預(yù)約掛號，醫(yī)院詳情，預(yù)約通知，停診信息，預(yù)約查詢與取消，為用戶提供多樣化的醫(yī)療服務(wù)。本設(shè)計使用VUE框架和ElementUI使得制作流程得到簡化，提高了開發(fā)效率，確保了平臺的高性能和易維護(hù)性。編程語言使用Typescript，通過Typescript強(qiáng)類型提高開發(fā)效率，提升框架的穩(wěn)定性和健壯性。關(guān)鍵詞：Vue；Typescript；在線掛號醫(yī)療服務(wù)平臺ANONLINEREGISTEREDMEDICALSERVICEPLATFORMBASEDONVUE.JSANDTYPESCRIPTABSTRACTWiththedevelopmentofsociety,traditionalmedicalregistrationserviceplatformswillbedifficulttomeetpeople'sdiverseneeds.Currently,thefunctionsofmedicalserviceplatformsarerelativelysingle,andvarioushospitalserviceplatformsarescattered,whichdoesnotmeetthediverseneedsofcitizens.TheonlineregisteredmedicalserviceplatformdevelopedbasedonVUEandTypescriptaimstoprovideaconvenientandefficientonlineregisteredmedicalserviceplatformforcitizensinneed.Thisplatformcanprovideuserswithappointmentregistration,hospitaldetails,appointmentnotifications,suspensioninformation,appointmentqueriesandcancellations,anddiversemedicalservices.ThisdesignusestheVUEframeworkandElementUItosimplifytheproductionprocess,improvedevelopmentefficiency,andensurethehighperformanceandeaseofmaintenanceoftheplatform.TheprogramminglanguageusesTypescript,whichenhancesdevelopmentefficiencyandenhancesthestabilityandrobustnessoftheframeworkthroughitsstrongtyping.Keywords:VUE;Typescript；Onlineregistrationmedicalserviceplatform第第頁目錄TOC\o"1-3"\h\u174461.緒論 314341.1研究背景 383531.2研究意義 4146811.3國內(nèi)外研究狀況 4230341.4系統(tǒng)目標(biāo) 5325491.5本文的結(jié)構(gòu) 5256412.相關(guān)技術(shù)及理論概述 6149792.1Vue框架 6241832.2pinia倉庫 761452.3SCSS 8276212.4Typescript 9237142.5ElementUI 10152032.6VisualStudioCode 10270473.系統(tǒng)的需求分析 1199763.1用戶需求分析 11244763.2功能需求分析 12187143.3用例分析 12252993.3.1用戶用例分析 1286363.3.2游客用例分析 13216853.4模塊功能分析 14288974.系統(tǒng)設(shè)計 14124264.1系統(tǒng)架構(gòu)設(shè)計 14232204.2系統(tǒng)主要業(yè)務(wù)流程設(shè)計 15285945.系統(tǒng)實現(xiàn) 17188075.1項目界面實現(xiàn) 17144285.1.1平臺首頁 17295025.1.2醫(yī)院詳細(xì)頁 17250695.1.3登陸/注冊 2020235.1.3預(yù)約掛號 2091145.1.5掛號訂單 22155025.1.6會員中心 23119605.2業(yè)務(wù)實現(xiàn) 26239645.2.1平臺首頁業(yè)務(wù)的實現(xiàn) 26193195.2.2登陸/注冊與登出業(yè)務(wù)的實現(xiàn) 26128655.2.3預(yù)約掛號業(yè)務(wù)的實現(xiàn) 27197175.2.4掛號訂單功能業(yè)務(wù)的實現(xiàn) 27119745.2.5實名認(rèn)證業(yè)務(wù)的實現(xiàn) 29217735.2.6就診人管理功能業(yè)務(wù)的實現(xiàn) 3067946.系統(tǒng)測試 3141726.1平臺首頁模塊測試 31201676.2登陸/注冊模塊測試 3173586.3預(yù)約掛號模塊測試 3273126.4實名認(rèn)證模塊測試 3536246.5就診人管理模塊測試 3670777.總結(jié) 3927664參考文獻(xiàn) 4128949致謝 421.緒論1.1研究背景隨著國內(nèi)經(jīng)濟(jì)和信息技術(shù)的不斷發(fā)展,人們對醫(yī)療衛(wèi)生服務(wù)方面的要求也隨之提高[1]。互聯(lián)網(wǎng)醫(yī)療信息協(xié)同行為是指在互聯(lián)網(wǎng)醫(yī)療行業(yè)，參與主體的協(xié)同行為借助信息平臺產(chǎn)生的活動[2]。但目前市面上的醫(yī)療服務(wù)平臺功能較為單一，且各醫(yī)院服務(wù)平臺分散，不符合用戶多樣化的需求。為了更好地整合和利用醫(yī)院資源，提高醫(yī)院間的信息流通和資源利用效率，計劃開發(fā)一款基于Vue和Typescript的醫(yī)療服務(wù)平臺，整合當(dāng)前各家醫(yī)院的功能和信息，滿足用戶需求。1.2研究意義隨著互聯(lián)網(wǎng)的飛速發(fā)展，我國的在線醫(yī)療服務(wù)也在隨著互聯(lián)網(wǎng)的發(fā)展而發(fā)展，在線醫(yī)療服務(wù)平臺也逐漸成為了醫(yī)院對用戶提供服務(wù)的主力窗口。因此，在線醫(yī)療服務(wù)平臺得到各家醫(yī)院的關(guān)注和發(fā)展，但目前的在線醫(yī)療服務(wù)平臺仍處于萌芽階段，各家醫(yī)院的在線醫(yī)療服務(wù)平臺分散，不利于用戶使用，用戶選擇不同醫(yī)院需要打開不同的醫(yī)院網(wǎng)站，步驟繁瑣不方便。針對這些問題，通過統(tǒng)一的在線醫(yī)療服務(wù)平臺可以解決，統(tǒng)一的線醫(yī)療服務(wù)平臺中可以解決用戶尋找醫(yī)院，預(yù)約掛號繁瑣的問題，做到一站式服務(wù)。其次，統(tǒng)一的在線醫(yī)療服務(wù)平臺可以綜合各家醫(yī)院信息，做到實時更新，方便用戶及時查看。同時綜合各家醫(yī)院的信息也可以平攤醫(yī)療壓力，解決就醫(yī)難的問題。特別是衛(wèi)生醫(yī)療行業(yè)中，醫(yī)療資源不足、醫(yī)療資源分配不均、部分地區(qū)或醫(yī)院醫(yī)療資源利用率低、醫(yī)療成本上升等問題一直困擾著醫(yī)療行業(yè)從業(yè)者和社會公眾，當(dāng)前社會環(huán)境下，這些問題不但會影響患者就醫(yī)體驗也會影響醫(yī)患關(guān)系[3]。通過互聯(lián)網(wǎng)的發(fā)展解決用戶就醫(yī)難，醫(yī)院壓力大，也能降低醫(yī)患矛盾等社會問題。綜上所述，利用Vue和Typescript設(shè)計制作一個在線醫(yī)療服務(wù)平臺是具有實質(zhì)意義和價值，有助于提高醫(yī)院效率和用戶看病的問題。1.3國內(nèi)外研究狀況國外對于互聯(lián)網(wǎng)醫(yī)療的應(yīng)用早于國內(nèi)，有關(guān)互聯(lián)網(wǎng)醫(yī)療方面的相關(guān)研宄也比國內(nèi)早，內(nèi)容和方向也較為豐富[4]。國外互聯(lián)網(wǎng)醫(yī)療的開展早于國內(nèi)，經(jīng)歷了一段漫長的探索時期，互聯(lián)網(wǎng)醫(yī)療市場規(guī)模呈遞増趨勢，業(yè)務(wù)日益擴(kuò)展，且許多發(fā)達(dá)國家已擁有相當(dāng)成熟的運營模式，領(lǐng)域也逐漸明晰化[5]。從國外的發(fā)展案例分析研究可以得出，在線醫(yī)療服務(wù)平臺的模式是成功的，外國用戶對在線醫(yī)療服務(wù)平臺的態(tài)度非常開放，他們覺得有助于用戶就診，醫(yī)院也有助于提高問診效率，市場非常接納在線醫(yī)療服務(wù)平臺的運營模式，證明了在線醫(yī)療服務(wù)平臺具有非常強(qiáng)的可操作性，對于降低用戶的就醫(yī)難度和提高醫(yī)院的問診效率都有非常強(qiáng)的幫助。近年來,隨著互聯(lián)網(wǎng)的普及與發(fā)展以及信息技術(shù)的廣泛使用,使得公眾健康服務(wù)的管理制度和技術(shù)手段煥發(fā)了新的生命力,涌現(xiàn)出在線健康社區(qū)、“互聯(lián)網(wǎng)+”、醫(yī)院、圖書館、智慧社區(qū)等新業(yè)態(tài)、新產(chǎn)品與新模式[6]。公眾對醫(yī)療服務(wù)的選擇也從傳統(tǒng)的到實體醫(yī)院轉(zhuǎn)變?yōu)樵噲D選擇互聯(lián)網(wǎng)醫(yī)療平臺進(jìn)行預(yù)防、診斷、治療等醫(yī)療服務(wù)[7]。在線醫(yī)療服務(wù)平臺也走近了國內(nèi)大眾的視野，各家醫(yī)院的在線醫(yī)療服務(wù)平臺百花齊放，在一定程度上滿足了用戶的需求，方便了用戶，也解決了部分醫(yī)療壓力問題，例如：解決了用戶查詢醫(yī)院地址，解決掛號問題，科室尋找，預(yù)約的確認(rèn)與取消等。然而，各家醫(yī)院的在線醫(yī)療服務(wù)平臺仍是分散的，目前,在線醫(yī)療行業(yè)發(fā)展勢頭迅猛,在線醫(yī)療平臺風(fēng)光的背后面臨著盈利的尷尬[8]。普遍面臨用戶需要在多家醫(yī)院中來回尋找切換，無法讓用戶在一個網(wǎng)站上實現(xiàn)多家醫(yī)院的查詢掛號預(yù)約功能，這些問題限制了用戶的選擇，降低了使用者的使用意愿。使用綜合的在線醫(yī)療服務(wù)平臺，使互聯(lián)網(wǎng)醫(yī)療在服務(wù)范圍、服務(wù)深度和服務(wù)效率方面均有了新的探索，讓人民大眾可享受全面、專業(yè)、高效的醫(yī)療衛(wèi)生和健康保健服務(wù)[9]。1.4系統(tǒng)目標(biāo)基于Vue和Typescript的在線醫(yī)療服務(wù)平臺旨在為用戶提供綜合全面的全市醫(yī)療服務(wù)，提供路線查詢，掛號通知，醫(yī)院詳情，預(yù)約查詢與取消操作，讓用戶體驗一站式醫(yī)療服務(wù)。該項目包括：前端頁面設(shè)計，搜索功能，登陸注冊功能，預(yù)約掛號功能，醫(yī)院科室查看功能，醫(yī)院通知，掛號查詢與取消功能。用戶可以在該平臺綁定自身或家人的信息，為自己和他人進(jìn)行醫(yī)療服務(wù)操作，并提供線上付費服務(wù)，在該平臺內(nèi)進(jìn)行付費操作，不需要在線下排隊付費。1.5本文的結(jié)構(gòu)本文第一章介紹研究的背景、目的和研究意義，并通過分析在線醫(yī)療服務(wù)的論點來指出本系統(tǒng)的意義。第二章明確指出本系統(tǒng)所采用的技術(shù)。第三章主要是系統(tǒng)的需求分析，分別為用戶需求分析、系統(tǒng)功能需求以及用戶用例，分心、模塊功能分析，明確了系統(tǒng)的各種需求。第四章根據(jù)系統(tǒng)的需求，畫出進(jìn)行功能系統(tǒng)架構(gòu)、系統(tǒng)功能的設(shè)計。第五章描述本系統(tǒng)主要功能模塊的開發(fā)內(nèi)容和實現(xiàn)的功能，并展示部分模塊實現(xiàn)后的界面。第六章對在線醫(yī)療主要功能的測試，對設(shè)計完成的功能和得到的測數(shù)據(jù)進(jìn)行驗證。第七章對系統(tǒng)進(jìn)行總結(jié)，描述出目前系統(tǒng)的不足之處和可完善的地方。2.相關(guān)技術(shù)及理論概述2.1Vue框架Vue是一款用于構(gòu)建用戶界面的漸進(jìn)式JavaScript框架。它基于標(biāo)準(zhǔn)HTML、CSS和JavaScript構(gòu)建，并提供了一套聲明式的、組件化的編程模型，幫助你高效地開發(fā)用戶界面。無論是簡單還是復(fù)雜的界面，Vue都可以勝任。其中Vue的兩個核心功能：聲明式渲染：Vue基于標(biāo)準(zhǔn)HTML拓展了一套模板語法，使得我們可以聲明式地描述最終輸出的HTML和JavaScript狀態(tài)之間的關(guān)系。響應(yīng)性：Vue會自動跟蹤JavaScript狀態(tài)并在其發(fā)生變化時響應(yīng)式地更新DOM。漸進(jìn)式框架是：Vue是一個框架，也是一個生態(tài)。其功能覆蓋了大部分前端開發(fā)常見的需求。但Web世界是十分多樣化的，不同的開發(fā)者在Web上構(gòu)建的東西可能在形式和規(guī)模上會有很大的不同?？紤]到這一點，Vue的設(shè)計非常注重靈活性和“可以被逐步集成”這個特點。根據(jù)你的需求場景，可以用不同的方式使用Vue：無需構(gòu)建步驟，漸進(jìn)式增強(qiáng)靜態(tài)的HTML在任何頁面中作為WebComponents嵌入單頁應(yīng)用(SPA)全棧/服務(wù)端渲染(SSR)Jamstack/靜態(tài)站點生成(SSG)開發(fā)桌面端、移動端、WebGL，甚至是命令行終端中的界面2.2pinia倉庫Pinia是一個Vue.js的狀態(tài)管理庫，它旨在簡化和增強(qiáng)Vue應(yīng)用程序中的狀態(tài)管理。Pinia提供了與Vuex相似的核心概念，如狀態(tài)（state）、計算屬性（getters）、動作（actions），并且支持組合式API。與Vuex相比，Pinia的主要優(yōu)勢包括：簡單性：Pinia提供了更簡單、易于使用的API，適合小型項目。TypeScript支持：Pinia提供了更好的類型檢查，使得開發(fā)人員更容易地檢測和修復(fù)錯誤。體積?。篜inia的體積大約只有1KB，減少了項目的包大小。無Mutations：Pinia拋棄了Vuex中的Mutations，簡化了狀態(tài)更新的過程。異步支持：Pinia的Actions支持同步和異步操作，簡化了異步邏輯的處理。插件機(jī)制：Pinia提供了一個插件機(jī)制，允許開發(fā)人員擴(kuò)展其功能。服務(wù)端渲染支持：Pinia支持服務(wù)端渲染，適合構(gòu)建全棧應(yīng)用。Pinia的設(shè)計主要是服務(wù)于CompositeAPI（組合式API），它與Vue2和Vue3都兼容，提供了熱模塊更新和VueDevTools的支持。Pinia的作者Eduardo是Vue核心團(tuán)隊的一員，他參與到了Vuex等API的設(shè)計中，旨在重新設(shè)計使用全局Store的體驗，同時保持Vue的平易近人的哲學(xué)。Pinia的API與Vuex非常接近，使得用戶可以輕松地遷移到Vuex，甚至在未來融合這兩個項目。2.3SCSSSCSS（SassyCSS）是一種CSS預(yù)處理器，用于簡化和擴(kuò)展CSS語言。它允許開發(fā)者使用變量、嵌套、混合（mixin）、導(dǎo)入（inlineimports）等功能，從而提高代碼的可維護(hù)性和可讀性。SCSS的語法與CSS3完全兼容，并且能夠識別和處理大部分CSShacks和特定于瀏覽器的語法。SCSS的一些主要特性包括：變量。允許開發(fā)者定義變量，并在樣式中使用它們，例如，`$color:red;`聲明了一個名為`$color`的變量，并將其值設(shè)置為紅色。146嵌套。允許CSS規(guī)則在內(nèi)部相互嵌套，使得復(fù)雜CSS布局更加簡單。例如，`.one{.two{.three{}}.four{}}`中的`.two`選擇器將應(yīng)用于`.one`中的`.three`和`.four`。46混合。允許開發(fā)者定義可重用的代碼塊，即混合（mixin），并將其應(yīng)用于不同的選擇器上，例如，`.one{@includeborder();}`將在`.one`中應(yīng)用名為`border`的混合。6導(dǎo)入。允許開發(fā)者導(dǎo)入其他SCSS文件，同時可以選擇不編譯這些文件。運算。支持基本的數(shù)學(xué)運算，如加法、減法、乘法和除法。4占位符。使用`%`來定義占位符，例如，`%link{}`可以被替換為一個鏈接的CSS樣式。SCSS是Sass的3.0版本，后綴名為`.scss`。它不僅增強(qiáng)了CSS的功能，還提供了更好的編程風(fēng)格支持，使得CSS開發(fā)更加高效和靈活。2.4TypescriptTypeScript是微軟開發(fā)的JavaScript的超集，TypeScript兼容JavaScript，可以載入JavaScript代碼然后運行。TypeScript擴(kuò)展了JavaScript的語法，因此現(xiàn)有的JavaScript代碼可與TypeScript一起工作無需任何修改，TypeScript通過類型注解提供編譯時的靜態(tài)類型檢查。TypeScript可處理已有的JavaScript代碼，并只對其中的TypeScript代碼進(jìn)行編譯。TypeScript與JavaScript相比進(jìn)步的地方包括：加入注釋，讓編譯器理解所支持的對象和函數(shù)，編譯器會移除注釋，不會增加開銷；增加一個完整的類結(jié)構(gòu)，使之更新是傳統(tǒng)的面向?qū)ο笳Z言。TypeScript優(yōu)勢：TypeScript的設(shè)計解決了JavaScript的“痛點”：弱類型和沒有命名空間；這導(dǎo)致程序很難模塊化，不適合開發(fā)大型程序。編寫程序時，編輯器將提供精準(zhǔn)的語法提示，以幫助大家更方便地實踐面向?qū)ο蟮木幊?。TypeScript的一個設(shè)計亮點，是它并沒有拋棄JavaScript的語法另起爐灶，而是做成了JavaScript的超集，任何合法的JavaScript的語句在TypeScript下都是合法的，且沿用了JavaScript的使用習(xí)慣和慣例，可以說學(xué)習(xí)成本很低。TypeScript設(shè)計了一套類型機(jī)制來保證編譯時的強(qiáng)類型判斷。利用TypeScript的關(guān)鍵詞module，可以達(dá)到類似于命名空間的效果，而export可以控制是否被外部訪問。2.5ElementUI ElementUI是一個基于Vue.js的開源前端框架，專為構(gòu)建用戶界面而設(shè)計。它提供了豐富的UI組件和工具，幫助開發(fā)者快速構(gòu)建現(xiàn)代化的Web應(yīng)用程序。ElementUI提供了一系列常用的UI組件，如按鈕、表單、對話框、導(dǎo)航菜單、數(shù)據(jù)表格、圖表等，這些組件具有現(xiàn)代化的外觀和豐富的功能，能夠滿足各種應(yīng)用程序的需求。ElementUI的組件都是響應(yīng)式的，可以適應(yīng)不同屏幕尺寸和設(shè)備類型，有助于構(gòu)建適用于桌面和移動設(shè)備的應(yīng)用程序。ElementUI具有以下特點：一致：與現(xiàn)實生活一致，與現(xiàn)實生活的流程、邏輯保持一致，遵循用戶習(xí)慣的語言和概念；在界面中一致，所有的元素和結(jié)構(gòu)需保持一致，比如：設(shè)計樣式、圖標(biāo)和文本、元素的位置等。反饋：控制反饋：通過界面樣式和交互動效讓用戶可以清晰的感知自己的操作；頁面反饋，操作后，通過頁面元素的變化清晰地展現(xiàn)當(dāng)前狀態(tài)。效率：簡化流程，設(shè)計簡潔直觀的操作流程；清晰明確，語言表達(dá)清晰且表意明確，讓用戶快速理解進(jìn)而作出決策；幫助用戶識別，界面簡單直白，讓用戶快速識別而非回憶，減少用戶記憶負(fù)擔(dān)。可控：用戶決策，根據(jù)場景可給予用戶操作建議或安全提示，但不能代替用戶進(jìn)行決策；結(jié)果可控，用戶可以自由的進(jìn)行操作，包括撤銷、回退和終止當(dāng)前操作等。2.6VisualStudioCodeVisualStudio是由微軟公司開發(fā)的一款功能強(qiáng)大的集成開發(fā)環(huán)境(IDE)，它支持多種編程語言和平臺，包括Windows、WindowsMobile、WindowsCE、.NETFramework、.NETCompactFramework、MicrosoftSilverlight以及WindowsPhone。VisualStudio提供了豐富的工具和功能，包括代碼編輯、調(diào)試、編譯、版本控制、項目管理、數(shù)據(jù)庫集成等，適用于開發(fā)Windows應(yīng)用程序、Web應(yīng)用程序、移動應(yīng)用程序、桌面應(yīng)用程序、游戲等。VisualStudio包括多種語言支持，如VisualBasic、VisualC#和VisualC++，這些語言使用.NETFramework的功能，簡化了Web應(yīng)用程序和XMLWeb服務(wù)的開發(fā)。VisualStudio還支持跨平臺開發(fā)，允許開發(fā)者使用C#和Xamarin框架開發(fā)iOS和Android應(yīng)用程序。此外，VisualStudio還提供了一些高級功能，如代碼重構(gòu)工具、程序集瀏覽器、源代碼集成等，以提高開發(fā)效率和質(zhì)量。3.系統(tǒng)的需求分析3.1用戶需求分析本系統(tǒng)的主要任務(wù)是綜合全市在線醫(yī)療服務(wù)平臺，為用戶提供一個“一站式”綜合在線醫(yī)療服務(wù)平臺，用戶可以只在本平臺登陸注冊就可以實現(xiàn)多家醫(yī)院的地址和路線查詢，醫(yī)院科室查詢，醫(yī)院預(yù)約掛號，掛號查詢與取消，線上付費操作；醫(yī)院可以在本平臺公布就診日期信息，醫(yī)院科室，門診公告。無論是用戶還是醫(yī)院都可以降低時間成本，滿足多樣化需求，用戶可以快速便捷的獲取到自己想要的信息，在單個平臺實現(xiàn)在醫(yī)院花費大量時間才能解決的問題，擺脫了“跑斷腿”的情況，可以縮短用戶就診難度，提高就診效率的同時合理安排在醫(yī)院的人數(shù)，減少患者扎堆的情況，也可以減少醫(yī)患關(guān)系的惡化。3.2功能需求分析主要顯示各家醫(yī)院主要信息，包括醫(yī)院名稱，放號時間表，醫(yī)院等級，以及賬號登錄/注冊。登陸/注冊模塊：登陸/注冊模塊包含電話-驗證碼登陸/注冊。醫(yī)院信息模塊包含：醫(yī)院信息模塊包含預(yù)約掛號，醫(yī)院詳情，預(yù)約通知，停診信息，預(yù)約查詢/取消。預(yù)約掛號模塊：預(yù)約掛號模塊包含醫(yī)院詳細(xì)信息，醫(yī)院可掛號的科室，點擊科室可以顯示預(yù)約詳情時間表，點擊需要信息可以進(jìn)入掛號信息模塊，可以選擇就診人進(jìn)行掛號操作。進(jìn)而進(jìn)入掛號繳費功能。會員中心模塊：會員中心模塊包含實名認(rèn)證，掛號訂單，就診人信息管理，賬號信息，意見反饋。3.3用例分析3.3.1用戶用例分析用戶：用戶登陸/注冊，掛號，選擇科室，付費，取消掛號，實名認(rèn)證，登出。如圖3-1所示圖3-1用戶用例圖3.3.2游客用例分析游客：游客只能瀏覽醫(yī)院和醫(yī)院科室。如圖3-2所示圖3-2游客用例圖3.4模塊功能分析本系統(tǒng)將用戶分為已登陸用戶和游客。游客只能瀏覽醫(yī)院和醫(yī)院科室，普通用戶：具有登錄/注冊，實名驗證，預(yù)約掛號，選擇科室/時間，繳費，取消掛號，賬號登出功能。系統(tǒng)功能框架如圖3-3所示圖3-3系統(tǒng)功能框架4.系統(tǒng)設(shè)計4.1系統(tǒng)架構(gòu)設(shè)計這是基于Vue和Typescript的在線醫(yī)療服務(wù)平臺的系統(tǒng)架構(gòu)圖，它主要由三個方面組成：前端界面，業(yè)務(wù)層，數(shù)據(jù)層。前端界面由ElementUI和Scss組成；業(yè)務(wù)層有登陸/注冊功能，醫(yī)院查詢功能，預(yù)約科室/時間功能，預(yù)約掛號功能，繳費功能，預(yù)約取消功能，身份驗證功能，賬號登出功能組成；數(shù)據(jù)層由前端HTML頁面通過AJAX調(diào)用后端的API接口并使用JSON數(shù)據(jù)進(jìn)行交互。這種結(jié)構(gòu)將前后端分離，業(yè)務(wù)拆分成一個個子項目，使得各個功能之間相對獨立，有助于提高代碼的可維護(hù)性和可擴(kuò)展性。系統(tǒng)架構(gòu)圖如圖4-1所示：圖4-1系統(tǒng)架構(gòu)圖4.2系統(tǒng)主要業(yè)務(wù)流程設(shè)計普通用戶在進(jìn)入在線醫(yī)療服務(wù)平臺后如果不登錄，只能進(jìn)行醫(yī)院查詢和醫(yī)院科室查看。登錄過程使用手機(jī)號加驗證碼操作進(jìn)行登陸/注冊，登陸成功后可以進(jìn)行醫(yī)院科室的詳細(xì)時間查詢并進(jìn)行預(yù)約掛號，繳費，預(yù)約取消，就診人信息認(rèn)證，賬號登出功能。普通用戶操作流程圖如4-2所示：4-2用戶操作流程圖5.系統(tǒng)實現(xiàn)5.1項目界面實現(xiàn)5.1.1平臺首頁訪問在線醫(yī)療服務(wù)平臺后會進(jìn)入平臺首頁，可以點擊等級和地區(qū)篩選所需醫(yī)院。此時用戶沒有登陸，可以實現(xiàn)的操作是瀏覽醫(yī)院和瀏覽醫(yī)院的詳細(xì)信息。如圖5-1所示。圖5-1在線醫(yī)療服務(wù)平臺首頁圖5.1.2醫(yī)院詳細(xì)頁從首頁點擊醫(yī)院即可進(jìn)入醫(yī)院信息頁，醫(yī)院信息頁包括了預(yù)約掛號，醫(yī)院詳情，預(yù)約通知，停診信息以及查詢/取消。如圖5-2，5-3，5-4所示。圖5-2醫(yī)院信息頁中的預(yù)約掛號的醫(yī)院科室頁圖圖5-3醫(yī)院信息頁中的醫(yī)院詳情頁圖圖5-4醫(yī)院信息頁中的預(yù)約通知頁圖圖5-5醫(yī)院信息頁中的停診信息頁圖圖5-6醫(yī)院信息頁中的查詢/取消頁圖5.1.3登陸/注冊當(dāng)未登陸用戶點擊科室名稱或右上角登陸/注冊按鈕后將會進(jìn)入登陸/注冊頁面，用戶可以使用手機(jī)號進(jìn)行驗證登陸，登陸成功后右上角會有賬號ID。如圖5-7所示。圖5-7在線醫(yī)療服務(wù)登陸/注冊頁圖5.1.3預(yù)約掛號當(dāng)用戶登陸成功后將可以使用平臺進(jìn)行預(yù)約掛號服務(wù)，點擊相應(yīng)科室即可進(jìn)入掛號窗口，在確定掛號時間后點擊剩余按鈕將進(jìn)入掛號信息確認(rèn)界面。進(jìn)入掛號信息確認(rèn)界面后可以選擇就診人，沒有就診人信息可以點擊添加就診人按鈕進(jìn)入會員中心添加就診人信息。如圖5-8，5-9，5-10所示。圖5-8預(yù)約掛號頁圖圖6-5添加就診人界面圖5-9信息確認(rèn)頁圖圖5-10在線醫(yī)療服務(wù)掛號選擇就診人頁圖5.1.5掛號訂單確認(rèn)了就診人信息后點擊確認(rèn)掛號進(jìn)入掛號詳情界面，掛號詳情界面會顯示掛號人信息，就診日期，就診醫(yī)院，就診科室，醫(yī)生職稱，掛號費用，掛號訂單，掛號時間和注意事項，點擊支付進(jìn)入二維碼支付頁面。如圖5-11，5-12所示。圖5-11在線醫(yī)療服務(wù)掛號詳情頁圖圖5-12在線醫(yī)療服務(wù)支付頁圖5.1.6會員中心在在線醫(yī)療服務(wù)平臺頁面內(nèi)可以在右上角賬戶ID處點擊實名認(rèn)證進(jìn)入會員中心，會員中心內(nèi)可進(jìn)行就實名信息認(rèn)證操作，掛號訂單查詢，就診人管理，賬號信息和意見反饋。實名認(rèn)證由用戶姓名，證件類型，證件號碼，身份證照片組成。點擊提交可以提交實名認(rèn)證的信息。認(rèn)證完畢后實名信息，掛號訂單，就診人管理和賬戶信息都可以會員中心查看。其中就診人管理可以添加和刪除就診人。如圖5-13，5-14，5-15，5-16所示圖5-13在線醫(yī)療服務(wù)平臺實名認(rèn)證選項圖圖5-14會員中心的實名認(rèn)證頁圖圖5-15會員中心的添加就診人管理頁圖圖5-16會員中心的就診人管理頁圖5.2業(yè)務(wù)實現(xiàn)5.2.1平臺首頁業(yè)務(wù)的實現(xiàn)首先獲取醫(yī)院詳情的接口的ts類型，然后獲取醫(yī)院詳情的接口的API地址；獲取醫(yī)院醫(yī)院的數(shù)據(jù)ts類型，獲取醫(yī)院的數(shù)據(jù)接口地址API地址；獲取醫(yī)院等級和地區(qū)接口數(shù)據(jù)ts類型，獲取醫(yī)院的等級與地區(qū)的接口API地址；獲取醫(yī)院等級和地區(qū)接口返回數(shù)據(jù)類型；根據(jù)關(guān)鍵字醫(yī)院的名字獲取數(shù)據(jù)API地址，根據(jù)關(guān)鍵字獲取醫(yī)院的數(shù)據(jù)進(jìn)行展示。平臺首頁使用ElementUI的搜索框組件，輪播圖組件，篩選組件，搜索框組件，卡片組件，分頁組件和scss實現(xiàn)。首頁由頁眉，輪播圖，搜索框，醫(yī)院分區(qū)，醫(yī)院展示，右側(cè)公告區(qū)組成。頁眉部分左側(cè)是logo和名字，右側(cè)是登陸/注冊窗口，點擊將進(jìn)入登陸/注冊頁面。輪播圖和搜索框使用的是ElementUI組件，搜索框可以收集輸入的關(guān)鍵字搜索醫(yī)院關(guān)鍵字將會顯示對應(yīng)的醫(yī)院；篩選框可以對顯示的醫(yī)院進(jìn)行篩選，每當(dāng)進(jìn)行篩選時，將會通過API發(fā)送請求到后臺并通過API發(fā)送對應(yīng)的醫(yī)院卡片展示在首頁。醫(yī)院展示區(qū)由數(shù)個醫(yī)院卡片組成，卡片中顯示醫(yī)院名字，醫(yī)院等級，醫(yī)院每日放號時間，點擊對應(yīng)醫(yī)院卡片將通過路由進(jìn)入醫(yī)院信息頁面。分頁組件可以查看下一頁的醫(yī)院。5.2.2登陸/注冊與登出業(yè)務(wù)的實現(xiàn)首先獲取登錄業(yè)務(wù)所需的接口的ts類型，然后獲取登錄接口的API地址，獲取用戶登錄接口以及驗證碼接口。登陸/注冊功能由ElementUI的對話框組件和scss實現(xiàn)，并分為左側(cè)和右側(cè)。左側(cè)為登錄功能，當(dāng)鼠標(biāo)點擊手機(jī)號碼框時，輸入正確的手機(jī)號碼后將會通過loginParam函數(shù)收集收集號碼，手機(jī)號碼儲存到pinia倉庫中，輸入框表單會使用手機(jī)號碼正則表達(dá)式進(jìn)行驗證是否為正確的手機(jī)號碼格式，若不是則會有提示輸入正確手機(jī)號碼，此時的獲取驗證碼按鈕和登陸按鈕會禁用無法點擊；當(dāng)輸入正確手機(jī)號碼則可以點擊獲取驗證碼，但依然禁用用戶登錄按鈕。此時通過點擊獲取驗證碼按鈕，驗證碼會向服務(wù)器請求一個驗證碼通過響應(yīng)式數(shù)據(jù)返回驗證碼，返回的驗證碼儲存至pinia倉庫，并顯示在驗證碼輸入框中，其中驗證碼使用了一個響應(yīng)式數(shù)據(jù)控制倒計時組件顯示與隱藏，每次點擊獲取驗證碼后有5秒倒計時，當(dāng)?shù)褂嫊r結(jié)束后才能重新點擊獲取驗證碼。當(dāng)用戶登錄成功后，將會關(guān)閉對話框，用戶信息將會儲存在pinia倉庫中，并在原登錄/注冊按鈕處展示用戶賬號信息，若登錄失敗則彈出對應(yīng)的登錄失敗的錯誤信息。右側(cè)為廣告和等處功能。登出功能是點擊登出后使用清除數(shù)據(jù)組件將pinia倉庫和本地存儲的數(shù)據(jù)清空，并通過路由重新返回首頁。5.2.3預(yù)約掛號業(yè)務(wù)的實現(xiàn)預(yù)約掛號業(yè)務(wù)是在二級路由醫(yī)院信息下的第三級路由，并將會與新的一級路由組件會員中心產(chǎn)生聯(lián)動。獲取某一個醫(yī)院的某一個科室預(yù)約掛號數(shù)據(jù)，獲取醫(yī)院科室的API接口；獲取醫(yī)院某一個科室某一天相應(yīng)醫(yī)生排班的數(shù)據(jù)API接口；獲取掛號醫(yī)生的信息，獲取醫(yī)生排班的數(shù)據(jù)，獲取掛號醫(yī)生的信息API接口，獲取醫(yī)生排班接口返回的數(shù)據(jù)。就診人業(yè)務(wù)由ElementUI組件和scss實現(xiàn)。預(yù)約掛號業(yè)務(wù)在醫(yī)院信息中，在醫(yī)院信息頁面中點擊預(yù)約掛號，將會顯示醫(yī)院科室信息，若未登錄狀態(tài)下點擊科室將會通過路由跳轉(zhuǎn)到登陸/注冊界面，若已登陸則進(jìn)入對應(yīng)科室的預(yù)約掛號業(yè)務(wù)界面，顯示年份月份，每日的掛號信息由卡片組件顯示，顯示日期，掛號剩余數(shù)量，掛號剩余數(shù)量將通過API獲取后臺數(shù)據(jù)進(jìn)行顯示。掛號卡片有停止掛號，有號，無號，即將放號四種狀態(tài)，停止掛號，無號將不顯示號源；即將放號將顯示放號時間；有號將通過API向后臺服務(wù)器發(fā)送請求獲取當(dāng)日剩余號碼數(shù)量，醫(yī)生排班信息和醫(yī)生信息并顯示上午號源下午號源，展示醫(yī)生擅長的技能，掛號金額和掛號按鈕。5.2.4掛號訂單功能業(yè)務(wù)的實現(xiàn)獲取訂單接口數(shù)據(jù)的ts類型，獲取訂單的狀態(tài)的API接口；代表就診人ts類型，獲取用戶訂單號的數(shù)據(jù)的API接口，獲取訂單數(shù)據(jù)接口，獲取全部訂單的接口；獲取訂單的狀態(tài)的API接口，訂單狀態(tài)ts類型；代表一個用戶信息的ts數(shù)據(jù)類型，獲取某一個賬號下就診人的信息API接口，獲取某一個賬號下就診人信息API接口；全部訂單狀態(tài)碼接口返回的數(shù)據(jù)ts類型，代表一個訂單的ts類型，提交訂單API接口；獲取訂單接口數(shù)據(jù)的ts類型，獲取訂單號碼接口API接口，獲取訂單詳情的數(shù)據(jù)API接口，取消訂單的接口API接口，獲取支付訂單二維碼接口API接口，查詢訂單支付的結(jié)果API接口,提交訂單API接口；訂單狀態(tài)ts類型，全部訂單狀態(tài)碼接口返回的數(shù)據(jù)ts類型，獲取全部訂單的接口API接口。掛號訂單功能分為確認(rèn)掛號信息界面，掛號詳細(xì)界面，取消掛號功能按鈕和付費功能按鈕，歷史掛號訂單界面組成。掛號訂單功能業(yè)務(wù)由ElementUI組件和scss實現(xiàn)。確認(rèn)掛號信息界面由ElementUI的表格組件，卡片組件，按鈕組件實現(xiàn)。確認(rèn)掛號信息中需要選擇就診人，否則無法點擊確認(rèn)掛號按鈕進(jìn)入掛號訂單界面。就診人卡片將通過獲取就診人與訂單狀態(tài)接口方法訪問某一個賬號下就診人的信息API接口向后臺服務(wù)器發(fā)送請求獲取就診人信息，并展示證件類型，證件號碼，性別，出生日期，手機(jī)號碼，婚姻狀況，住址地址。確認(rèn)掛號按鈕需要選擇就診人后才能點擊，若不選擇就診人將無法進(jìn)行確認(rèn)支付，若沒有就診人將可以點擊添加就診人進(jìn)行就診人添加。掛號詳細(xì)界面由ElementUI的表格組件，按鈕組件，氣泡確認(rèn)框組件實現(xiàn)，左側(cè)為訂單詳情，右側(cè)為注意事項。確認(rèn)就診人后將收集就診人的ID，通過API將掛號訂單詳情通過表格顯示就診時間，醫(yī)院，科室，醫(yī)生，服務(wù)費，就診人，訂單狀態(tài)，取消預(yù)約按鈕和支付按鈕。取消掛號功能按鈕和付費功能按鈕都是由ElementUI的按鈕組件實現(xiàn)。訂單狀態(tài)有三種orderStatus

-1

取消預(yù)約

0預(yù)約但是沒有支付

1支付成功。當(dāng)點擊取消預(yù)約時，將會彈出氣泡確認(rèn)框詢問是否確認(rèn)，點擊確認(rèn)將會通過取消訂單API接口將已預(yù)約的訂單取消。訂單狀態(tài)碼將從預(yù)約但沒有支付的0變成取消預(yù)約的-1，并顯示取消預(yù)約。點擊支付按鈕將會在當(dāng)前頁面彈出對話框展示支付二維碼，這個功能時通過支付二維碼接口API向服務(wù)器發(fā)送請求獲得，若不想支付可以點擊關(guān)閉按鈕退回掛號詳細(xì)頁面，若掃描了二維碼將會將二維碼窗口立即關(guān)閉，并將訂單狀態(tài)從預(yù)約但沒有支付變成支付成功，訂單狀態(tài)碼將會從0變成1并顯示已支付。歷史掛號訂單界面需把鼠標(biāo)移動到賬號，將會顯示下拉菜單，點擊菜單中的掛號訂單進(jìn)入。掛號訂單有就診人篩選框，訂單狀態(tài)篩選框，可以進(jìn)行訂單篩選。訂單信息將展示就診時間，醫(yī)院，科室，醫(yī)生，服務(wù)費，就診人，訂單狀態(tài)以及操作組成。掛號訂單從獲取全部訂單接口API向后臺發(fā)送請求獲取全部訂單數(shù)據(jù)進(jìn)行展示，點擊詳情將進(jìn)入訂單詳情進(jìn)行取消或支付操作。5.2.5實名認(rèn)證業(yè)務(wù)的實現(xiàn)實名認(rèn)證是一級路由會員中心下面的二級路由。首先獲取代表一個用戶的數(shù)據(jù)ts類型，代表一個用戶信息的數(shù)據(jù)類型，獲取用戶信息的API接口地址，獲取用戶信息的接口；代表證件類型的數(shù)據(jù)ts類型，獲取證件的類型的API接口地址，獲取證件類型的方法；用戶認(rèn)證的攜帶的參數(shù)的ts類型；獲取用戶認(rèn)證的接口。實名驗證由ElementUI組件的卡片組件和描述列表組件和scss實現(xiàn)?？ㄆM件分為頭部和身體部分，頭部為實名信息標(biāo)題。身體部分分為認(rèn)證成功的結(jié)構(gòu)認(rèn)證未成功的結(jié)構(gòu)由描述列表組件組成，身體部分的下方則是提交和重寫按鈕。當(dāng)實名認(rèn)證為成功時，使用對話框組件表現(xiàn)，表現(xiàn)為可輸入用戶姓名，選擇證件類型，可輸入證件號碼和可上傳證件照片以及重寫按鈕。輸入用戶信息將進(jìn)行validatorNo方法驗證，通過自定義校驗規(guī)則驗證姓名和證件號碼是否合規(guī)，若不合規(guī)則顯示“請輸入正確的中文名字”和“請輸入正確的身份證或者戶口本的號碼”，用戶照片通過驗證validatorUrl方法進(jìn)行驗證；當(dāng)照片上傳成功則使用圖片上傳成功的鉤子successhandler方法，圖片上傳成功校驗結(jié)果清除。當(dāng)照片超出數(shù)量則會通過超出數(shù)量的鉤子函數(shù)exceedhandler，返回錯誤類型“error”和錯誤信息“圖片只能上傳一張”。點擊提交按鈕通過API發(fā)送信息到后臺服務(wù)器，成功實名認(rèn)證則返回一個成功的promise對象，并顯示“認(rèn)證成功”，若失敗則返回一個失敗的promise對象，并顯示“認(rèn)證失敗”。當(dāng)點擊重寫按鈕時清空params內(nèi)的數(shù)據(jù)，使用es6的Object.assign方法清空params中的數(shù)據(jù)，照片使用clearFiles方法清空。5.2.6就診人管理功能業(yè)務(wù)的實現(xiàn)就診人管理是一級路由會員中心下面的二級路由。獲取代表就診人ts類型，全部就診人的數(shù)據(jù)ts類型，獲取全部就診人的信息，新增就診人接口，更新已有的就診人API接口，刪除已有的就診人API接口，新增與修改已有的就診人API接口方法，刪除某一個就診人的信息API接口。就診人管理由添加就診人功能，編輯就診人功能，刪除就診人功能組成，實現(xiàn)增刪查改業(yè)務(wù)功能。當(dāng)就診人管理模塊加載的時候會判斷這個路由是否從掛號組件而來，若是則不顯示刪除就診人，若不是則顯示刪除就診人。組件使用了ElementUI組件的卡片組件。點擊添加就診人將進(jìn)入添加就診人功能，添加就診人將由必填項目：用戶姓名，證件類型，證件號碼，用戶性別，出生日期，手機(jī)號碼，婚姻狀況，自費/醫(yī)保，當(dāng)前住址，詳細(xì)地址；以及選填項目：聯(lián)系人信息的姓名，證件類型，證件號碼，手機(jī)號碼。同時對全部就診人的數(shù)據(jù)進(jìn)行監(jiān)聽。點擊提交按鈕將會通過路由判斷是否從預(yù)約掛號而來，同時通過API發(fā)送信息到后臺服務(wù)器，并顯示新增成功。點擊重寫按鈕將會使用es6的Object.assign方法清空數(shù)據(jù)。點擊編輯就診人功能將進(jìn)入編輯就診人功能，將通過API向后臺發(fā)送請求獲取就診人信息，并顯示和監(jiān)聽所有就診人的數(shù)據(jù)。點擊提交按鈕將會通過路由判斷是否從預(yù)約掛號而來，同時通過API發(fā)送信息到后臺服務(wù)器，并顯示新增成功。點擊重寫按鈕將會使用es6的Object.assign方法清空數(shù)據(jù)。點擊刪除就診人按鈕將會刪除就診人卡片并清空就診人信息。這個功能是通過刪除某一個就診人信息API接口，發(fā)送刪除就診人請求，并再次獲取全部就診人信息，對所有就診人進(jìn)行刷新。系統(tǒng)測試6.1平臺首頁模塊測試測試功能：平臺首頁測試目的：平臺首頁功能能否展示測試預(yù)計結(jié)果：平臺首頁功能能成功展示實際測試結(jié)果：平臺首頁功成功展示。結(jié)果如圖6-1所示。圖6-1平臺首頁界面6.2登陸/注冊模塊測試測試功能：登陸/注冊賬號測試目的：用戶能否成功注冊賬號測試預(yù)計結(jié)果：用戶輸入完信息后點擊注冊顯示注冊成功。實際測試結(jié)果：用戶成功注冊賬號。結(jié)果如下圖6-2，6-3所示。圖6-2用戶登陸/注冊界面圖6-3用戶登陸/注冊成功界面6.3預(yù)約掛號模塊測試測試功能：預(yù)約掛號模塊測試目的：用戶能否成功預(yù)約掛號，取消預(yù)約掛號，成功付費，歷史掛號訂單查詢。測試預(yù)計結(jié)果：用戶成功預(yù)約掛號，成功取消預(yù)約掛號，成功付費，成功查詢歷史掛號訂單。實際測試結(jié)果：用戶成功預(yù)約掛號，成功取消預(yù)約掛號，成功付費，成功查詢歷史掛號訂單。如圖6-4，6-5，6-6，6-7，6-8所示。圖6-4掛號功能界面圖6-5掛號成功界面圖6-6成功預(yù)約取消界面圖6-7支付二維碼界面圖6-8支付成功界面6.4實名認(rèn)證模塊測試測試功能：實名認(rèn)證添加測試目的：用戶能否成功實名認(rèn)證測試預(yù)計結(jié)果：用戶輸入完信息后點擊實名認(rèn)證成功。實際測試結(jié)果：用戶成功實名認(rèn)證，如圖6-9，6-10所示。圖6-9實名驗證界面圖6-10實名驗證成功界面6.5就診人管理模塊測試測試功能：確認(rèn)就診人管理模塊測試目的：用戶能否成功增加就診人，修改就診人，刪除就診人測試預(yù)計結(jié)果：用戶成功增加就診人，修改就診