張立安 林汝少 馬敬萱

摘? 要：傳統(tǒng)的藥品信息查詢存在速度較慢且查詢信息不全的問題，為提高藥品信息查詢服務(wù)質(zhì)量，提升患者查詢體驗(yàn)，文章開發(fā)一種基于HTML5的藥品查詢平臺(tái)。平臺(tái)采用前后端分離技術(shù)，前端界面基于HTML5、CSS和JavaScript等組件，后端基于Spring Boot框架，搜索引擎基于Elasticsearch技術(shù)。平臺(tái)可以滿足患者快速查詢藥品的需求，為患者提供藥品詳細(xì)信息，指導(dǎo)患者合理用藥。

關(guān)鍵詞：藥品查詢；設(shè)計(jì)開發(fā)；HTML5

中圖分類號(hào)：TP393? 文獻(xiàn)標(biāo)識(shí)碼：A? 文章編號(hào)：2096-4706（2023）23-0015-04

Design and Implementation of a Drug Query Platform Based on HTML5

ZHANG Lian， LIN Rushao， MA Jingxuan

（Guangzhou College of Technology and Business， Foshan? 528138， China）

Abstract： Traditional drug information query has the problem of slow speed and incomplete query information. In order to improve the quality of drug information query service and enhance the patient query experience， this paper develops an HTML5-based drug query platform. The platform adopts front-end and back-end separation technology， the front-end interface is based on components such as HTML5， CSS， and JavaScript， the back-end is based on the Spring Boot framework， and the search engine is based on Elasticsearch technology. The platform can meet the needs of patients to quickly query drugs， provide detailed drug information for patients， and guide them to use medication reasonably.

Keywords： drug query; design and development; HTML5

0? 引? 言

隨著數(shù)據(jù)技術(shù)的快速發(fā)展和醫(yī)藥科技的不斷突破，新品藥物層出不窮、逐年遞增，在幫助人們預(yù)病治病的同時(shí)，也可能因其毒副作用而威脅人們的生命[1]。尤其是在新冠疫情期間，不同毒株誘發(fā)的癥狀不同使得不同癥狀的病人需要服用不同的藥品，所以需要人們時(shí)刻了解不同藥品的適應(yīng)癥，面對(duì)品種繁多、功能各異的藥品，如何快速、準(zhǔn)確地查詢藥品相關(guān)信息已成為人們關(guān)注的焦點(diǎn)問題。

在數(shù)據(jù)量龐大的時(shí)代，紙質(zhì)版說明書顯然不足以滿足人們的需求，更不符合社會(huì)發(fā)展的要求。智能手機(jī)和智能設(shè)備的普及，使得人們隨時(shí)隨地可從網(wǎng)絡(luò)上獲取所需的信息。由于移動(dòng)APP行業(yè)研發(fā)能力的參差不齊，采用的研發(fā)技術(shù)多以Access和SQL為主，致使通用藥品信息查詢平臺(tái)的運(yùn)行性能較差，查詢效率低下且不易操作與維護(hù)。本文基于HTML5設(shè)計(jì)并實(shí)現(xiàn)了一個(gè)藥品查詢平臺(tái)，借助Elasticsearch技術(shù)提升平臺(tái)查詢效率以及提高患者在查詢藥品時(shí)的可視化體驗(yàn)。幫助患者根據(jù)需求快速、準(zhǔn)確地查詢藥品的詳細(xì)信息，使患者能夠切實(shí)掌握藥品基本知識(shí)，合理用藥。

1? 開發(fā)環(huán)境與相關(guān)技術(shù)

1.1? 開發(fā)環(huán)境

本文開發(fā)平臺(tái)基于Windows 10系統(tǒng)，前端使用HTML5技術(shù)、后端以Spring Boot框架為核心、基于MySQL數(shù)據(jù)庫(kù)和Elasticsearch搜索引擎設(shè)計(jì)與實(shí)現(xiàn)。運(yùn)用近年來較為流行的開發(fā)技術(shù)，主要開發(fā)環(huán)境為IntelliJ IDEA（IDEA）[2]。Spring Boot框架兼容HTML5標(biāo)準(zhǔn)，方便后續(xù)的設(shè)計(jì)實(shí)現(xiàn)。表1列出了開發(fā)過程中所用工具及其開發(fā)環(huán)境。

1.2? 相關(guān)技術(shù)

Elasticsearch是一個(gè)實(shí)時(shí)、開源的分布式搜索分析引擎，可以實(shí)現(xiàn)海量數(shù)據(jù)的快速存儲(chǔ)和實(shí)時(shí)搜索，是目前企業(yè)級(jí)應(yīng)用程序中最為常見的搜索引擎框架之一[3]。Elasticsearch的優(yōu)點(diǎn)是處理方式靈活，可實(shí)現(xiàn)實(shí)時(shí)檢索，可對(duì)百億級(jí)的數(shù)據(jù)查詢做到秒級(jí)響應(yīng)，可以線性擴(kuò)展集群，支持插件機(jī)制。

本文的藥品查詢平臺(tái)基于HTML5技術(shù)開發(fā)，以Elasticsearch搜索引擎為核心搜索框架，比關(guān)系型數(shù)據(jù)庫(kù)的SQL查詢效率更高，Elasticsearch還具備大數(shù)據(jù)的存儲(chǔ)能力，可用于存儲(chǔ)非關(guān)系型數(shù)據(jù)及藥品的詳情信息。

2? 系統(tǒng)分析

2.1? 藥品查詢平臺(tái)概述

藥品查詢平臺(tái)的構(gòu)建主要是源于藥品種類繁多，紙質(zhì)版藥品說明書晦澀難懂，普通患者無法及時(shí)查詢藥品的相關(guān)信息，從而不可避免地造成藥品濫用現(xiàn)象等問題?，F(xiàn)有的藥品查詢平臺(tái)存在查詢效率低下、查詢信息不全、可視化體驗(yàn)欠佳等問題，該文設(shè)計(jì)的藥品查詢平臺(tái)致力于提高藥品的查詢效率，提高患者的用藥常識(shí)，避免藥物的濫用和誤用，給諸多用戶帶來真真切切的查詢便利[4]。

2.2? 藥品查詢平臺(tái)可行性分析

是指分析能否在現(xiàn)有條件與技術(shù)層面上以最小的代價(jià)完成對(duì)藥品查詢平臺(tái)的開發(fā)和投入使用，是否能夠?qū)崿F(xiàn)設(shè)計(jì)的最大價(jià)值。從技術(shù)層面上來看，藥品查詢平臺(tái)采用當(dāng)前主流的開源技術(shù)框架，以現(xiàn)存的開源代碼為主，可以最大程度上降低開發(fā)難度。在開發(fā)過程中，基于Elasticsearch的RESTful風(fēng)格進(jìn)一步降低了開發(fā)難度，提升了開發(fā)人員的工作效率，促進(jìn)了開發(fā)工作的順利開展。從經(jīng)濟(jì)上來說，藥品查詢平臺(tái)主要是基于HTML5技術(shù)開發(fā)，Elasticsearch作為分布式搜索引擎框架，在患者訪問并發(fā)度不高的情況下，選擇價(jià)格合適的服務(wù)器便可完成，在并發(fā)度較高的情況下，可以通過對(duì)Elasticsearch搜索引擎進(jìn)行橫向擴(kuò)展來節(jié)約開發(fā)成本。

3? 藥品查詢平臺(tái)的設(shè)計(jì)與實(shí)現(xiàn)

3.1? Web界面設(shè)計(jì)分析

Web界面是患者對(duì)平臺(tái)的初始體驗(yàn)，是吸引用戶使用最為關(guān)鍵的設(shè)計(jì)重點(diǎn)之一，同時(shí)它也是與Spring Boot框架進(jìn)行數(shù)據(jù)交互的一個(gè)極為關(guān)鍵的組成部分。Web界面設(shè)計(jì)的質(zhì)量將直接關(guān)乎平臺(tái)受歡迎的程度[5]。

3.1.1? 視覺設(shè)計(jì)

視覺設(shè)計(jì)是影響平臺(tái)質(zhì)量和效果的關(guān)鍵因素之一，良好的視覺沖擊力是患者擁有好心情、獲得好體驗(yàn)的保證。視覺設(shè)計(jì)主要包括文字、圖像、版式布局、色彩、數(shù)據(jù)交互的設(shè)計(jì)。文字和圖像等基本元素是信息傳遞不可或缺的重要載體[6]，根據(jù)藥品的不同特性采用不同的字體進(jìn)行設(shè)計(jì)，相應(yīng)的藥品圖片與文字說明緊密結(jié)合，整體上采用合理的字體、圖像、色彩進(jìn)行頁面排版布局，這樣不僅可以讓界面達(dá)到清晰簡(jiǎn)潔的效果，還能夠加深用戶對(duì)藥品的認(rèn)識(shí)。

另外，數(shù)據(jù)交互也是視覺沖擊力的重要體現(xiàn)，充分發(fā)揮數(shù)據(jù)交互功能，使患者與平臺(tái)之間的信息交流達(dá)到最佳效果，不斷完善和優(yōu)化平臺(tái)的設(shè)計(jì)方案，可以提升用戶的使用體驗(yàn)，提高平臺(tái)的應(yīng)用能力。

3.1.2? 查詢功能模塊設(shè)計(jì)

藥品查詢功能模塊是本平臺(tái)的設(shè)計(jì)核心，首頁界面主要是基于HTML5技術(shù)進(jìn)行開發(fā)，患者在搜索框中輸入需要查詢的藥品信息，基于JavaScript與后端進(jìn)行數(shù)據(jù)交互，后端基于Spring Boot框架通過Elasticsearch搜索引擎進(jìn)行藥品查詢。查詢方式分為兩種：精確查詢和模糊查詢。精確查詢是通過具體的藥品名稱進(jìn)行查詢；模糊查詢是通過藥品的一部分文字、藥品的部分適應(yīng)癥文字進(jìn)行藥品信息的查詢[7]。從查詢效率來看，Elasticsearch技術(shù)是實(shí)時(shí)開源的搜索引擎，其查詢效率明顯優(yōu)于關(guān)系型數(shù)據(jù)庫(kù)中的SQL查詢。利用Elasticsearch的分詞插件機(jī)制可以進(jìn)一步證明其卓越的性能。

3.2? 功能模塊設(shè)計(jì)

本文研發(fā)平臺(tái)主要功能模塊包括首頁模塊、藥品分類模塊、中西藥對(duì)比模塊、用戶反饋模塊等。功能模塊設(shè)計(jì)詳細(xì)圖如圖1所示。

3.3? 數(shù)據(jù)庫(kù)設(shè)計(jì)

本文藥品查詢平臺(tái)包含兩個(gè)數(shù)據(jù)庫(kù)，一個(gè)為Elasticsearch，另一個(gè)為MySQL數(shù)據(jù)庫(kù)。Elasticsearch具備大數(shù)據(jù)的存儲(chǔ)能力，是基于查詢搜索的分析型數(shù)據(jù)庫(kù)。MySQL是主流的關(guān)系型數(shù)據(jù)庫(kù)。Elasticsearch主要以存儲(chǔ)藥品的詳細(xì)信息為主，主要提供查詢服務(wù)。查詢數(shù)據(jù)需要根據(jù)實(shí)際情況進(jìn)行數(shù)據(jù)的更新，由于大部分?jǐn)?shù)據(jù)更新頻繁，所以需要存儲(chǔ)到Elasticsearch中。MySQL數(shù)據(jù)庫(kù)主要是存儲(chǔ)頁面展示的基本信息。

設(shè)計(jì)藥品的詳細(xì)信息數(shù)據(jù)表和中西藥基本信息表。藥品的詳細(xì)信息數(shù)據(jù)表記錄了藥品的名稱、批準(zhǔn)文號(hào)、適應(yīng)癥狀、用法用量等基本信息；中西藥基本信息表記錄了中西藥的概述和兩者對(duì)比分析信息[8]。藥品詳細(xì)信息邏輯結(jié)構(gòu)如表2所示，中西藥基本信息邏輯結(jié)構(gòu)如表3所示。

4? 平臺(tái)功能模塊實(shí)現(xiàn)

本文基于HTML5開發(fā)一個(gè)藥品查詢平臺(tái)，主要功能模塊提供查詢、藥品分類、用戶反饋等功能。首先需要明確開發(fā)目標(biāo)和開發(fā)需求，根據(jù)實(shí)際情況設(shè)計(jì)與實(shí)現(xiàn)。其次從多角度出發(fā)分析平臺(tái)功能的實(shí)用性、設(shè)備兼容性以及用戶體驗(yàn)感，以幫助患者方便快捷地獲取藥品信息為目標(biāo)實(shí)現(xiàn)平臺(tái)的設(shè)計(jì)，減少藥品的不合理使用。

4.1? 首頁模塊

首頁模塊是本平臺(tái)中的核心功能模塊，包括查詢模塊、家庭必備藥品、常用藥品模塊?；颊咄ㄟ^在搜索框中輸入相應(yīng)的信息對(duì)所需的藥品進(jìn)行詳情查詢，具體實(shí)現(xiàn)如圖2所示。

4.2? 藥品詳情模塊

藥品詳情模塊主要用于藥品詳細(xì)信息的展示，包含藥品名稱、藥品圖片、批準(zhǔn)文號(hào)、適應(yīng)癥狀、用法用量等信息，具體實(shí)現(xiàn)如圖3所示。

4.3? 中西藥分類模塊

本文將藥品分為兩大類，分別是中藥模塊和西藥模塊。其中中藥模塊的具體實(shí)現(xiàn)如圖4所示。

4.4? 關(guān)于模塊

關(guān)于模塊主要是便于患者了解中西藥的區(qū)別，此模塊中分別記錄了中西藥的好處與壞處、中西藥的詳細(xì)信息、兩者的區(qū)別、是否可以中西藥一起使用，以及如何使用才能發(fā)揮藥品最大功效等，具體實(shí)現(xiàn)如圖5所示。

4.5? 患者反饋模塊

患者在使用平臺(tái)過程中產(chǎn)生的問題或有其他建議都可以反饋至平臺(tái)，平臺(tái)根據(jù)問題給出相應(yīng)的答復(fù)，用于平臺(tái)與患者之間的間接交流。

平臺(tái)的詳細(xì)開發(fā)框架和實(shí)現(xiàn)流程如圖6所示。

5? 結(jié)? 論

本文基于HTML5的藥品查詢平臺(tái)使患者能夠快速查詢到所需的藥品信息，了解藥品的詳情，滿足患者的基本需求并指導(dǎo)患者合理用藥。初級(jí)設(shè)計(jì)與實(shí)現(xiàn)過程中仍存在不足之處，功能不完善，只能提供初級(jí)的使用。隨著藥品的更新?lián)Q代，數(shù)據(jù)也會(huì)隨之更新，為進(jìn)一步完善平臺(tái)功能與提供完整數(shù)據(jù)，在后續(xù)的設(shè)計(jì)開發(fā)中，將不斷完善Web界面設(shè)計(jì)，擴(kuò)展平臺(tái)功能，以期為患者提供更專業(yè)、更便捷、更優(yōu)質(zhì)的查詢服務(wù)。

參考文獻(xiàn)：

[1] 靳彩彩，李芳.運(yùn)用Access 2003軟件建立“藥品信息查詢系統(tǒng)”數(shù)據(jù)庫(kù) [J].中國(guó)藥房，2010，21（13）：1247-1248.

[2] 何星宇，孫瑜.基于HTML5的高校易交流平臺(tái)的設(shè)計(jì)與實(shí)現(xiàn) [J].信息記錄材料，2022，23（10）：197-200.

[3] 何運(yùn)田，張青清.基于Kong和Elasticsearch的私有云API網(wǎng)關(guān)及監(jiān)控系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn) [J].計(jì)算機(jī)應(yīng)用與軟件，2022，39（11）：136-140.

[4] 翟運(yùn)開，李思琪，孫東旭，等.面向“互聯(lián)網(wǎng)+醫(yī)療健康”的醫(yī)藥電商平臺(tái)構(gòu)建 [J].中國(guó)衛(wèi)生事業(yè)管理，2021，38（3）：161-163+202.

[5] 曹方玲.HTML5在Web前端開發(fā)中的應(yīng)用 [J].長(zhǎng)江信息通信，2022，35（10）：106-108+111.

[6] 秦源.基于HTML5技術(shù)的移動(dòng)Web前端設(shè)計(jì)與開發(fā) [J].電子元器件與信息技術(shù)，2022，6（2）：193-195.

[7] 黃悅.藥典系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn) [D].廣州：華南理工大學(xué)，2016.

[8] 莫朵朵，詹秀菊，易俊飛.iOS平臺(tái)下藥品信息查詢軟件的設(shè)計(jì)與實(shí)現(xiàn) [J].湖南師范大學(xué)自然科學(xué)學(xué)報(bào)，2017，40（3）：83-88.

作者簡(jiǎn)介：張立安（1995—），男，漢族，廣東惠州人，中級(jí)工程師，助教，碩士研究生，研究方向：人工智能、大數(shù)據(jù)技術(shù)；林汝少（2000—），男，漢族，廣東湛江人，本科在讀，研究方向：大數(shù)據(jù)技術(shù)；馬敬萱（2002—），女，漢族，河南信陽人，本科在讀，研究方向：大數(shù)據(jù)技術(shù)。