基于HTML5的藥品查詢平臺設計與實現

張立安 林汝少 馬敬萱

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

關鍵詞：藥品查詢；設計開發；HTML5

中圖分類號：TP393? 文獻標識碼：A? 文章編號：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? 引? 言

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

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

1? 開發環境與相關技術

1.1? 開發環境

本文開發平臺基于Windows 10系統，前端使用HTML5技術、后端以Spring Boot框架為核心、基于MySQL數據庫和Elasticsearch搜索引擎設計與實現。運用近年來較為流行的開發技術，主要開發環境為IntelliJ IDEA（IDEA）[2]。Spring Boot框架兼容HTML5標準，方便后續的設計實現。表1列出了開發過程中所用工具及其開發環境。

1.2? 相關技術

Elasticsearch是一個實時、開源的分布式搜索分析引擎，可以實現海量數據的快速存儲和實時搜索，是目前企業級應用程序中最為常見的搜索引擎框架之一[3]。Elasticsearch的優點是處理方式靈活，可實現實時檢索，可對百億級的數據查詢做到秒級響應，可以線性擴展集群，支持插件機制。

本文的藥品查詢平臺基于HTML5技術開發，以Elasticsearch搜索引擎為核心搜索框架，比關系型數據庫的SQL查詢效率更高，Elasticsearch還具備大數據的存儲能力，可用于存儲非關系型數據及藥品的詳情信息。

2? 系統分析

2.1? 藥品查詢平臺概述

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

2.2? 藥品查詢平臺可行性分析

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

3? 藥品查詢平臺的設計與實現

3.1? Web界面設計分析

Web界面是患者對平臺的初始體驗，是吸引用戶使用最為關鍵的設計重點之一，同時它也是與Spring Boot框架進行數據交互的一個極為關鍵的組成部分。Web界面設計的質量將直接關乎平臺受歡迎的程度[5]。

3.1.1? 視覺設計

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

另外，數據交互也是視覺沖擊力的重要體現，充分發揮數據交互功能，使患者與平臺之間的信息交流達到最佳效果，不斷完善和優化平臺的設計方案，可以提升用戶的使用體驗，提高平臺的應用能力。

3.1.2? 查詢功能模塊設計

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

3.2? 功能模塊設計

本文研發平臺主要功能模塊包括首頁模塊、藥品分類模塊、中西藥對比模塊、用戶反饋模塊等。功能模塊設計詳細圖如圖1所示。

3.3? 數據庫設計

本文藥品查詢平臺包含兩個數據庫，一個為Elasticsearch，另一個為MySQL數據庫。Elasticsearch具備大數據的存儲能力，是基于查詢搜索的分析型數據庫。MySQL是主流的關系型數據庫。Elasticsearch主要以存儲藥品的詳細信息為主，主要提供查詢服務。查詢數據需要根據實際情況進行數據的更新，由于大部分數據更新頻繁，所以需要存儲到Elasticsearch中。MySQL數據庫主要是存儲頁面展示的基本信息。

設計藥品的詳細信息數據表和中西藥基本信息表。藥品的詳細信息數據表記錄了藥品的名稱、批準文號、適應癥狀、用法用量等基本信息；中西藥基本信息表記錄了中西藥的概述和兩者對比分析信息[8]。藥品詳細信息邏輯結構如表2所示，中西藥基本信息邏輯結構如表3所示。

4? 平臺功能模塊實現

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

4.1? 首頁模塊

首頁模塊是本平臺中的核心功能模塊，包括查詢模塊、家庭必備藥品、常用藥品模塊。患者通過在搜索框中輸入相應的信息對所需的藥品進行詳情查詢，具體實現如圖2所示。

4.2? 藥品詳情模塊

藥品詳情模塊主要用于藥品詳細信息的展示，包含藥品名稱、藥品圖片、批準文號、適應癥狀、用法用量等信息，具體實現如圖3所示。

4.3? 中西藥分類模塊

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

4.4? 關于模塊

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

4.5? 患者反饋模塊

患者在使用平臺過程中產生的問題或有其他建議都可以反饋至平臺，平臺根據問題給出相應的答復，用于平臺與患者之間的間接交流。

平臺的詳細開發框架和實現流程如圖6所示。

5? 結? 論

本文基于HTML5的藥品查詢平臺使患者能夠快速查詢到所需的藥品信息，了解藥品的詳情，滿足患者的基本需求并指導患者合理用藥。初級設計與實現過程中仍存在不足之處，功能不完善，只能提供初級的使用。隨著藥品的更新換代，數據也會隨之更新，為進一步完善平臺功能與提供完整數據，在后續的設計開發中，將不斷完善Web界面設計，擴展平臺功能，以期為患者提供更專業、更便捷、更優質的查詢服務。

參考文獻：

[1] 靳彩彩，李芳.運用Access 2003軟件建立“藥品信息查詢系統”數據庫 [J].中國藥房，2010，21（13）：1247-1248.

[2] 何星宇，孫瑜.基于HTML5的高校易交流平臺的設計與實現 [J].信息記錄材料，2022，23（10）：197-200.

[3] 何運田，張青清.基于Kong和Elasticsearch的私有云API網關及監控系統的設計與實現 [J].計算機應用與軟件，2022，39（11）：136-140.

[4] 翟運開，李思琪，孫東旭，等.面向“互聯網+醫療健康”的醫藥電商平臺構建 [J].中國衛生事業管理，2021，38（3）：161-163+202.

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

[6] 秦源.基于HTML5技術的移動Web前端設計與開發 [J].電子元器件與信息技術，2022，6（2）：193-195.

[7] 黃悅.藥典系統的設計與實現 [D].廣州：華南理工大學，2016.

[8] 莫朵朵，詹秀菊，易俊飛.iOS平臺下藥品信息查詢軟件的設計與實現 [J].湖南師范大學自然科學學報，2017，40（3）：83-88.

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