基于Vue的web藥品銷售系統(tǒng)開發(fā)設計TOC\o"1-3"\h\u20146基于Vue的web藥品銷售系統(tǒng)開發(fā) 212574摘要 229685Abstract 3224801.緒論 4100011.1研究背景與研究意義 423111.1.1研究背景 4295451.1.2研究意義 5177001.2國內(nèi)外研究現(xiàn)狀與趨勢 762061.2.1國外研究現(xiàn)狀與趨勢 754411.2.2國內(nèi)研究現(xiàn)狀與趨勢 835072.需求分析 978382.1藥品銷售系統(tǒng)總體概述 9253542.2藥品銷售系統(tǒng)角色需求分析 9159822.3藥品銷售系統(tǒng)功能分析 11183652.3.1用戶端功能 11227962.3.2管理端功能 12241562.4藥品銷售系統(tǒng)主要業(yè)務流程 1381642.4.1用戶登錄流程圖 13121182.4.2購物車流程圖 13275372.4.3用戶搜索流程圖 147952.5藥品銷售系統(tǒng)非功能性需求分析 1468443.數(shù)據(jù)庫設計 15241233.1數(shù)據(jù)庫設計原則 1518103.2數(shù)據(jù)庫設計 1593463.2.1數(shù)據(jù)庫結(jié)構(gòu)設計 16282923.2.2實體對象規(guī)則 18110013.3數(shù)據(jù)庫E-R圖設計 19250503.4數(shù)據(jù)庫表設計 1913883.4.1用戶信息表 19233663.4.2藥品信息表 1931863.4.3評論信息表 20172673.4.4藥品類別表 20222243.4.5購物車表 20275933.4.6訂單信息表 2159223.4.7訂單明細表 2140943.4.8支付信息表 22183383.4.9收貨信息表 22167034.系統(tǒng)架構(gòu)及關鍵技術(shù) 2274874.1系統(tǒng)架構(gòu) 22285194.2關鍵技術(shù) 25175144.2.1vue.js 25105254.2.2node.js 26156784.2.3express 27127654.2.4element-ui 2766374.2.5MySQL 28177065.系統(tǒng)編程與實現(xiàn) 28147455.1組件化 28226615.2數(shù)據(jù)庫連接 29110175.3前臺頁面布局實現(xiàn) 30311905.4登錄模塊實現(xiàn) 31322085.5購物車實現(xiàn) 3357435.5訂單實現(xiàn) 35158415.5.1訂單列表渲染 3558385.5.2創(chuàng)建訂單功能實現(xiàn) 37298706.系統(tǒng)測試 38240096.1功能測試 3892746.1.1注冊登錄測試 39281096.1.2購物車測試 3950697.結(jié)論 4019794參考文獻： 41摘要依據(jù)國家政策的支持以及國內(nèi)“互聯(lián)網(wǎng)＋醫(yī)療“”大環(huán)境的影響，我國網(wǎng)上藥店等醫(yī)藥電商正在蓬勃發(fā)展。以互聯(lián)網(wǎng)為媒介，促進了藥品B2C的交易，有利于藥品的流通，為用戶提供了便利，為藥品銷售方拓寬了銷售渠道。本文通過以Ｂ／Ｓ架構(gòu)為系統(tǒng)結(jié)構(gòu)，采用前端vue.js、element-ui，后端node.js等核心技術(shù)，使用visualstudio、MySQL、GoogleChrome等開發(fā)工具，結(jié)合實際需求，設計了一個藥品銷售管理平臺。通過對平臺具體功能需求和非功能性需求分析，設計了系統(tǒng)架構(gòu)、功能結(jié)構(gòu)、頁面布局和數(shù)據(jù)庫，實現(xiàn)了藥品銷售平臺中前臺的的用戶登錄、個人信息管理、藥品搜索、個人購物車管理、訂單查詢、藥品評價等功能，實現(xiàn)了后臺的藥品信息管理、注冊用戶管理、訂單管理等功能。測試結(jié)果表明，該藥品銷售平臺操作方便，界面友好，安全可靠，具有較好的擴展性、移植性和可維護性。實現(xiàn)了藥品銷售、訂單、評價等藥品銷售業(yè)務相關的功能。該平臺達到了平臺設計的要求，能滿足各類用戶通過平臺進行藥品交易的需求。關鍵字：藥品銷售平臺；vue.js；node.js；MySQL1.緒論電子商務的快速發(fā)展使得醫(yī)藥行業(yè)也以網(wǎng)絡為載體在網(wǎng)上進行藥品銷售。自2000年國家開始推行醫(yī)療機構(gòu)藥品集中采購政策以來，電子商務開始在全國醫(yī)藥行業(yè)廣泛應用。醫(yī)藥電子商務通過網(wǎng)絡技術(shù)手段傳播關于醫(yī)藥產(chǎn)品的信息，以促使相關交易的達成。醫(yī)藥電商，即醫(yī)療電子商務是指與醫(yī)療機構(gòu)，制藥公司，制藥制造商，醫(yī)療信息服務提供商，第三方機構(gòu)等的市場經(jīng)濟主體，擁有計算機和網(wǎng)絡技術(shù)（主要是互聯(lián)網(wǎng)）現(xiàn)代信息技術(shù)，進行醫(yī)療產(chǎn)品交換并提供相關服務。從定義可以看出，醫(yī)藥電商的主要創(chuàng)新在醫(yī)藥領域，藥品可以流轉(zhuǎn)到終端消費者和下游分銷商更快，更有效。醫(yī)藥電商集信息化、自動化和標準化為一體，極大地減少了藥品流通層次和交易環(huán)節(jié)，減少藥品流通成本。[1]1.1研究背景與研究意義1.1.1研究背景隨著中國醫(yī)藥電商行業(yè)的不斷發(fā)展，醫(yī)藥電商銷售規(guī)模占持續(xù)增長的比例，中國的醫(yī)藥電商市場份額從2012年的1.5％增加到2020年的11.4％，醫(yī)藥電商發(fā)展的主動驅(qū)動因素有：消費者行為的改變。2015-2019年，我國居民人均醫(yī)療保健消費年均增長12.7%，遠高于8.2%的居民消費人均支出年均增速，醫(yī)療保健消費占居民消費支出的比率也從2015年的7.2%提高到2019年的8.5%。這個態(tài)勢在未來的許多年仍然會延續(xù)，醫(yī)藥消費市場的規(guī)模在持續(xù)不斷增長。同時隨著網(wǎng)絡普及以及人口老齡化進程，越來越多的年輕網(wǎng)民步入疾病多發(fā)年紀、老年人口的上網(wǎng)趨勢也愈發(fā)明顯，兩相結(jié)合網(wǎng)絡購藥行為變得日益普遍，再疊加整體購藥需求市場不斷增加，醫(yī)藥電商發(fā)展的潛在市場規(guī)模正日益擴大。醫(yī)改驅(qū)動下的院外處方流轉(zhuǎn)2009年國務院發(fā)布《中共中央關于深化醫(yī)藥衛(wèi)生體制改革的意見》正式啟動醫(yī)改以來，推動公立醫(yī)院醫(yī)藥分開、藥品零加成等成為醫(yī)改的主要話題，公立醫(yī)療機構(gòu)逐漸失去將處方藥品銷售留在院內(nèi)藥房的動力，零售藥店、醫(yī)藥電商等將成為流轉(zhuǎn)到院外的處方藥的主要承載陣地。2020年1月，一場突如其來的疫情打破本應歡鬧祥和的庚子新春。2月23日，我國國家領導人在統(tǒng)籌推進新型冠狀肺炎疫情防控和經(jīng)濟社會發(fā)展工作部署會議中強調(diào)，疫情對產(chǎn)業(yè)發(fā)展既是挑戰(zhàn)也是機遇。一些傳統(tǒng)行業(yè)受沖擊較大，而智能制造、無人配送、在線消費、醫(yī)療健康等新興產(chǎn)業(yè)展現(xiàn)出強大成長潛力，要以此為契機，改造提升傳統(tǒng)產(chǎn)業(yè)，培育壯大新興產(chǎn)業(yè)。醫(yī)療健康作為新興產(chǎn)業(yè)中的一員，在疫情的推動下，也逐步進入電商企業(yè)的視野。1.1.2研究意義醫(yī)藥電商在國內(nèi)的迅速發(fā)展，選擇設計并實現(xiàn)一個藥品銷售系統(tǒng)對于用戶，對于藥店，對于醫(yī)療形勢都具有重要意義。（1）對于用戶：網(wǎng)上買藥便利性較高、買藥價格優(yōu)惠、品類豐富、能滿足非急性用藥需求。醫(yī)藥用品具有剛需的特性，用戶對價格的敏感性相對較低，因而可以足不出戶購買到醫(yī)藥用品成為用戶選擇平臺的重要因素。如下圖所示，展示驅(qū)動消費者購物因素：圖1消費者網(wǎng)上購物驅(qū)動因素（2）對于藥店：在銷售服務上，藥店根據(jù)銷售數(shù)據(jù)分析并改正自身的問題，提高自身的優(yōu)勢。在銷售途徑上，藥店不再局限于向自身所在小區(qū)等小范圍的用戶，還可以向整個市，整個省，甚至整個國家的用戶提供服務。對于醫(yī)療形勢：改善以下醫(yī)療現(xiàn)狀。隨著醫(yī)療需求不斷擴大，醫(yī)務人員供應不足?！?020中國互聯(lián)網(wǎng)醫(yī)療行業(yè)研究報告》顯示，中國互聯(lián)網(wǎng)醫(yī)院月接診患者超過3億人次、已上線互聯(lián)網(wǎng)醫(yī)院數(shù)量超600家、持牌網(wǎng)上藥店數(shù)為693家、互聯(lián)網(wǎng)醫(yī)療月活用戶規(guī)模超過5400萬、在線醫(yī)療用戶活用戶峰值超6000萬人次。[2]據(jù)專業(yè)數(shù)據(jù)報告預測，從2019年到2024年、2030年，中國大健康市場數(shù)字化比重將從3.3%快速增至10.6%、24.0%，“互聯(lián)網(wǎng)+醫(yī)療健康”市場規(guī)模將從2180億元快速增至11290億元、42230億元。[3]2018年，國家統(tǒng)計局數(shù)據(jù)顯示，過去十年（2009-2018），全國各類醫(yī)療衛(wèi)生機構(gòu)診療人次數(shù)，從54.9億增長至83.1億，人均診療次數(shù)從4.1次增長至6.0次?！吨袊t(yī)生》提到，每天會有2000萬人到中國醫(yī)院就醫(yī)，但只有400萬醫(yī)生。24.6%的中國醫(yī)生一周工作時間超過了80個小時?？梢姡覈\療人數(shù)不斷攀升，但醫(yī)務人員的數(shù)量仍有不足。圖2我國診療人數(shù)及人均診療次數(shù)醫(yī)院交叉感染風險高。眾所周知，covid-19病毒是通過飛沫、接觸傳播的，可以在體外存活一段時間。這使直接或間接接觸病毒的醫(yī)務人員極有可能受到感染。自17年前sars爆發(fā)以來，衛(wèi)生工作者的感染率達到了20%。盡管我國的醫(yī)療保健水平多年來取得了巨大進展，但這種新型冠狀病毒的高傳染性繼續(xù)使醫(yī)院成為交叉感染的高風險地區(qū)。非接觸式醫(yī)療，如以互聯(lián)網(wǎng)平臺為載體、以技術(shù)手段為基礎的網(wǎng)上藥店，可以在一定程度上超越空間限制，也可以顯著提高疫情預防的安全性和效率。1.2國內(nèi)外研究現(xiàn)狀與趨勢1.2.1國外研究現(xiàn)狀與趨勢國外是計算機技術(shù)開始和發(fā)展較早的地區(qū)，計算機信息技術(shù)是在國外生產(chǎn)的，因此在國內(nèi)使用和發(fā)展較早。計算機的計算機化水平也高于國內(nèi)，使用范圍相對廣泛，在國外制藥公司基本上都采用計算機化的形式來控制和管理相關信息。如今，外國制藥公司利用銷售管理系統(tǒng)來控制和管理制藥公司內(nèi)部的藥品信息更為常見。利用信息技術(shù)來控制和管理藥物信息給國外非常大的制藥公司帶來了好處:降低投資人力資源,提高工作效率,降低了錯誤的概率,更重要的是,通過計算機藥物也能有效管理藥品的管理決策。1.2.2國內(nèi)研究現(xiàn)狀與趨勢莫岱青表示，近年來，我國在政策上對醫(yī)療醫(yī)藥電商服務有了很大的支持。特別是為了充分發(fā)揮互聯(lián)網(wǎng)醫(yī)療在抗疫中的作用，政府部門出臺了一系列推動政策。有利的政策環(huán)境下，像合縱藥易購等醫(yī)藥電商迎來了新的發(fā)展機遇，為沖擊IPO鋪平了道路。[4]目前，中國的信息技術(shù)發(fā)展與國外相比有些落后。我國在線藥品銷售系統(tǒng)有兩種主要的平臺模式:自建自購平臺模式和第三方電子商務平臺模式。大規(guī)模藥房有自己的銷售網(wǎng)站：到目前為止，網(wǎng)上藥品銷售平臺已經(jīng)成為藥品銷售的重要渠道，給藥店帶來了很大的便捷。如阿里健康、美團、京東健康、叮當快藥等等。直至今日，網(wǎng)上藥品銷售平臺已經(jīng)成為藥品銷售的重要途徑。然而中國目前的在線藥品銷售體系是分散的，發(fā)展水平不高，經(jīng)營的企業(yè)規(guī)模較小，不夠?qū)I(yè)。至于系統(tǒng)的深度，主要保持在信息服務的水平，很少有完整的電子商務服務。在商業(yè)模式上，網(wǎng)上藥店發(fā)展受到了限制，以網(wǎng)上批發(fā)業(yè)務為主的B2B模式成為電子商務應用的主流，真正意義的第三方藥品銷售電子商務平臺應用不多?，F(xiàn)階段我國醫(yī)藥電商的發(fā)展依舊存在諸多問題，包括醫(yī)藥健康市場專業(yè)性不強、信息不對稱、發(fā)展混亂、藥品質(zhì)量難以保障、尚未與醫(yī)保系統(tǒng)對接、消費者對互聯(lián)網(wǎng)藥品交易認知程度不高、信任度不高等。[5]2017年,醫(yī)藥電商之戰(zhàn)就悄然升級,先是有醫(yī)藥B2B平臺宣布融資,緊接著B2C平臺七樂康也宣布達成融資合作,各醫(yī)藥電商都在全面搶占市場。據(jù)中康CMH的數(shù)據(jù),醫(yī)藥電商已經(jīng)保持六年增長,僅網(wǎng)上藥店規(guī)模已突破百億。其中,2015年網(wǎng)上藥店總體規(guī)模達到110億,較2014年增長52.8%,2016年網(wǎng)上藥店全品類規(guī)模達到160億,同比增長45.5%,其中醫(yī)藥保健品類在醫(yī)藥電商消費中的份額由76.9%上升至82.8%,并在近三年中維持穩(wěn)定增長。[6]未來醫(yī)藥B2C市場即將進入高速增長期,市場空間大幅釋放。[7]經(jīng)過20多年的蓬勃發(fā)展，2019年中國醫(yī)藥電商B2C市場大銷售額要破千億了，根據(jù)南方所的統(tǒng)計2018年醫(yī)藥電商市場的銷售額是661億，而今年根據(jù)阿里健康、京東健康以及初入醫(yī)藥電商的拼多多以及公布的數(shù)據(jù)，再加上康愛多、健客、1藥網(wǎng)等垂直醫(yī)藥電商公布的階段性數(shù)據(jù)來看，2019年全網(wǎng)超過千億銷售額。2.需求分析要設計一個合格的軟件的前提是對軟件的開發(fā)有明確的業(yè)務需求分析，明確其為了解決什么問題。[8]需求分析是軟件生命周期中非常重要的一個過程，需求分析的任務就是準確地回答“系統(tǒng)必須做什么”。需求是一切測試（開發(fā)、設計、運維）活動進行的基準，是軟件產(chǎn)品的定位和研發(fā)目標，是決定軟件質(zhì)量的基礎，也是一個軟件開發(fā)項目成敗的關鍵。2.1藥品銷售系統(tǒng)總體概述本題主要任務是設計并開發(fā)一個藥品銷售商城，完成一個在線藥品交易網(wǎng)站的搭建。平臺為消費者提供了一種方便快捷安全的買藥方式，為管理者提供了一種簡單高效銷售藥品的賣藥方式。2.2藥品銷售系統(tǒng)角色需求分析角色需求分析是對一個完整的軟件系統(tǒng)可以提供給外部用戶的功能以及這些功能所針對的角色的可視化分析。角色需求分析首先是對使用產(chǎn)品的人群進行分類，即目標用戶畫像分析，其次是場景，即用戶在什么情況下使用產(chǎn)品，最后就是路徑，即用戶如何使用產(chǎn)品，完整的過程是怎樣的。如表所示，描述使用系統(tǒng)的各類用戶角色以及其權(quán)限：表1系統(tǒng)用戶角色及權(quán)限表角色權(quán)限游客瀏覽藥品銷售商城瀏覽藥品詳細信息搜索藥品信息查看藥品銷售系統(tǒng)公告注冊用戶瀏覽藥品銷售商城瀏覽藥品詳細信息搜索藥品信息查看藥品銷售系統(tǒng)公告注冊個人信息的查看與修改系統(tǒng)內(nèi)購物車藥品的添加、移除和修改訂單信息的生成、查看、取消藥品的評論管理員藥品銷售系統(tǒng)公告的查看、修改和發(fā)布藥品信息的添加、修改和刪除注冊用戶信息的查看訂單的查看、取消和發(fā)貨管理員的設置、移除以下對各個角色的具體功能需求進行詳細介紹游客：游客是未進行用戶注冊與登錄而查看藥品銷售商城的一類人群。此類用戶因未在藥品銷售系統(tǒng)內(nèi)進行注冊并登錄，所以只能對藥品銷售系統(tǒng)主頁和系統(tǒng)內(nèi)的藥品信息進行查看，點擊藥品可跳轉(zhuǎn)至藥品詳情頁進行查看，輸入藥品關鍵字可搜索出檢索藥品，為吸引游客用戶進行注冊并進行后續(xù)操作，也可查看系統(tǒng)促銷等其他公告，但是無法將商品添加進入購物車并進行下單購買。注冊用戶：注冊用戶是已經(jīng)在藥品銷售系統(tǒng)內(nèi)進行注冊的一類用戶。注冊用戶除了具有游客用戶的全部需求外還能根據(jù)注冊手機號或者用戶名、密碼等方式進行系統(tǒng)的登錄，完成注冊用戶的驗證即登錄成功后可以進行個人賬戶信息的修改，在進行藥品瀏覽時，可以將需要的藥品添加至我的購物車，并進行購物車內(nèi)藥品的查看、藥品數(shù)量的添加與減少、藥品的刪除，在確認好所需購買藥品后可以進行藥品的結(jié)算，提交訂單并進行在線支付，收貨完成后可對藥品進行星級評價和言論評價，其他注冊用戶可以通過用戶評價來了解藥品的具體情況。普通管理員：普通管理員是藥品銷售系統(tǒng)的管理人員，具有較高的系統(tǒng)權(quán)限，管理員具有注冊用戶的全部需求功能外，還可以進行系統(tǒng)內(nèi)所有藥品信息的查看、修改、刪除以及藥品的上新管理，可以對數(shù)據(jù)庫內(nèi)所有注冊用戶進行用戶信息查看，可進行普通注冊用戶與系統(tǒng)管理賬戶之間的設置與移除，可以查看訂單信息、刪除訂單以及對訂單進行發(fā)貨處理，可以編輯、發(fā)布、修改、刪除系統(tǒng)公告。2.3藥品銷售系統(tǒng)功能分析功能需求分析是站在系統(tǒng)的使用群體角度，將對應使用者的用戶需求轉(zhuǎn)換為系統(tǒng)的功能需求。[9]UML用例圖是對系統(tǒng)功能需求分析的完整的直觀變現(xiàn)，通過ＵＭＬ統(tǒng)一建模語言對系統(tǒng)的整個功能進行完整的展現(xiàn)。2.3.1用戶端功能圖3系統(tǒng)用戶端功能分析用戶端主要的功能分為注冊登錄功能、藥品查看功能、購物車功能、訂單功能、支付功能、已購商品評價。注冊登錄游客用戶可以在藥品購物網(wǎng)站中進行賬戶注冊，注冊完成后進行注冊賬戶的登錄，驗證通過即登錄成功后，可以進行個人賬戶信息的修改，其中包括個人賬戶名稱、登錄秘密、電話號碼、昵稱、生日、頭像、收貨地址等，用戶收貨地址支持自動獲取定位地點、手動添加收貨地址、收貨地址修改。藥品查看用戶可以通過瀏覽藥品銷售系統(tǒng)進行藥品的分類瀏覽以及列表瀏覽，同時支持對藥品名稱進行搜索查看。通過點擊藥品可跳轉(zhuǎn)到藥品詳情頁面查看藥品的詳細信息，包括（藥品詳細名稱、藥品種類、藥品數(shù)量、藥品價格等）。購物車管理用戶可以將感興趣的藥品通過點擊“加入購物車”按鈕，將藥品添加進購物車。可通過我的購物車查看購物車詳情，包括購物車內(nèi)藥品以及各種藥品的數(shù)量。系統(tǒng)還支持用戶修改購物車內(nèi)各種藥品的數(shù)量、刪除購物車內(nèi)藥品。訂單管理用戶對購物車內(nèi)所需藥品進行勾選并選擇結(jié)算，可生成訂單。生成訂單前系統(tǒng)提示用戶設置編輯收貨人、收貨人聯(lián)系方式、收貨地址。其中系統(tǒng)能根據(jù)自動定位進行收貨地址的自動設置并支持詳細地址的輸入編輯?？蛻艨稍O置多個收貨地址，可對收貨地址進行添加、修改與刪除。藥品評價用戶在收到藥品后可對所收到的藥品進行星級評價以及言論評價。支付系統(tǒng)支持用戶進行貨到付款和在線支付兩種方式。系統(tǒng)公告查看用戶可對藥品銷售系統(tǒng)的系統(tǒng)公告進行點擊查看。2.3.2管理端功能后臺管理員主要的功能有登錄功能、藥品管理功能、用戶管理功能、訂單管理功能、公告管理。圖4系統(tǒng)管理端功能分析登錄管理員可根據(jù)數(shù)據(jù)庫內(nèi)管理員賬戶和密碼的登錄方式。用戶管理管理員可查看藥品銷售系統(tǒng)內(nèi)所有普通注冊用戶的詳細信息，同時支持將普通用戶設置為系統(tǒng)管理員，管理員賬戶的移除以及所有管理員賬戶列表。藥品管理管理員可以對藥品銷售系統(tǒng)數(shù)據(jù)庫中所有藥品進行藥品列表、詳情查看、藥品信息編輯修改、藥品上新。訂單管理管理員可以查看注冊用戶下單的訂單列表和訂單詳情，包括訂單用戶、下單時間、訂單內(nèi)藥品信息，還可以查看訂單狀態(tài)，對訂單進行一系列操作，支持對訂單的確認、取消以及確認發(fā)貨。公告管理管理員可以藥品銷售系統(tǒng)內(nèi)的公告進行查看，以及已存在公告的編輯與刪除。2.4藥品銷售系統(tǒng)主要業(yè)務流程2.4.1用戶登錄流程圖圖5用戶登錄流程圖2.4.2購物車流程圖圖6購物車流程圖2.4.3用戶搜索流程圖圖7用戶搜索流程圖2.5藥品銷售系統(tǒng)非功能性需求分析除滿足功能性需求，也必須滿足非功能性需求。雖然本系統(tǒng)并沒有達到實際應用的程度，但是基本的一些性能方面的要求必須要滿足：容錯性容錯是系統(tǒng)中十分重要的性能要求。一個好的系統(tǒng)具有容錯能力，用戶可能會在操作過程中遇到操作錯誤。系統(tǒng)還可以通過提示用戶正確的錯誤消息來確定錯誤消息并更正用戶的操作。安全性系統(tǒng)保存著用戶信息、銷售信息。由于這些數(shù)據(jù)都是核心數(shù)據(jù)庫，因此在系統(tǒng)設計過程中需要認真考慮安全要求。界面友好性系統(tǒng)設計要求對于不熟悉計算機的用戶來說也覺得系統(tǒng)操作簡單，以縮短用戶對于系統(tǒng)的熟悉時間，更加便捷地為用戶服務?？蓴U展性系統(tǒng)要求對于后續(xù)功能的增加具有良好的可擴展性，以適應不斷變化的用戶需求，更好的為用戶服務，達到更好的用戶體驗。3.數(shù)據(jù)庫設計數(shù)據(jù)庫的設計在整個軟件開發(fā)過程中起到了舉足輕重的作用，數(shù)據(jù)庫設計決定了數(shù)據(jù)是否好維護，后續(xù)需求是否好好擴展，同時也決定了系統(tǒng)的性能。差的數(shù)據(jù)庫設計一個功能點的改動可能會涉及到多張數(shù)據(jù)庫表的改動，極易引起數(shù)據(jù)的不一致。良好的數(shù)據(jù)庫能夠有效地存儲數(shù)據(jù)，滿足各種角色的應用需求。3.1數(shù)據(jù)庫設計原則本文數(shù)據(jù)庫的設計規(guī)則基本有以下三點：數(shù)據(jù)保持一致性、規(guī)范性：數(shù)據(jù)表及屬性的命名統(tǒng)一按照英文字母和0-9自然數(shù)加上下劃線“_”組成；例如user_name、user_pwd等，命名按照一定的規(guī)范、規(guī)則進行設定。數(shù)據(jù)保持完整性：在整個數(shù)據(jù)庫中表示同一意義的字段保持一致，如果在某表中一個字段被修改，那么整個數(shù)據(jù)庫中這同一字段都應進行修改以保持一致。數(shù)據(jù)庫設計時多采用主鍵、外鍵來維護數(shù)據(jù)庫的完整。數(shù)據(jù)庫表盡量滿足第三范式，即表的字段屬性沒有冗余，過多的數(shù)據(jù)冗余不僅會占用更多的存儲空間。對后期數(shù)據(jù)庫的維護和檢查帶來不必要的麻煩：盡量保持表的屬性在每個記錄中只有一個值。3.2數(shù)據(jù)庫設計數(shù)據(jù)庫的設計在整個系統(tǒng)開發(fā)中是很重要的一環(huán)，好的數(shù)據(jù)庫設計能夠有效提高查詢修改的效率，而一個不合格的數(shù)據(jù)庫設計很可能會引發(fā)數(shù)據(jù)的相互竄改，導致數(shù)據(jù)出現(xiàn)錯誤。3.2.1數(shù)據(jù)庫結(jié)構(gòu)設計數(shù)據(jù)庫結(jié)構(gòu)設計一般采用實體-聯(lián)系方法，即E-R圖。根據(jù)數(shù)據(jù)庫需求規(guī)劃處需要的實體結(jié)構(gòu)，并且確立實體之間的管理。本系統(tǒng)的實體有：用戶信息實體、管理員信息實體、藥品信息實體、購物車實體、用戶評論信息實體、藥品種類實體、訂單實體、訂單明細實體、支付信息實體、收貨信息實體。各個實體的具體實體屬性如下圖所示：圖8用戶信息實例圖圖9藥品信息實例圖圖10藥品種類實例圖圖11訂單信息實例圖圖12訂單明細實例圖圖13收貨明細實例圖圖14支付明細實例圖圖15用戶評價實例圖3.2.2實體對象規(guī)則一個用戶可以擁有多個收貨地址；一個用戶只可以有一個購物車；一個訂單至屬于一個用戶，一個用戶可以擁有很多訂單；一個訂單里面可以有很多訂單項，一個訂單項只屬于一個訂單；一個訂單項只屬于一個藥品，一個藥品可以有很多個訂單項；一個用戶可以有多條評論，一條評論只屬于一個用戶；一個用戶可以有多個支付信息，一個支付信息只屬于一個用戶。3.2.3數(shù)據(jù)庫E-R圖設計根據(jù)各個信息實體之間的關系畫出的E-R圖如下：圖16數(shù)據(jù)庫E-R圖3.2.4數(shù)據(jù)庫表設計在數(shù)據(jù)庫表設計階段，需根據(jù)電子商城系統(tǒng)所抽取的實體，選擇最優(yōu)的物理存儲結(jié)構(gòu)和存取方式。[10]用來存儲用戶賬號信息，用戶表（user_info）的結(jié)構(gòu)如表所示：表2用戶表字段名稱字段表示字段類型(長度)主外鍵約束用戶iduser_idint(11)PKNOTNULL用戶名user_namevarchar(50)NOTNULL用戶密碼user_pwdvarchar(50)NOTNULL用戶地址user_addressvarchar(50)用戶昵稱nick_nicknamevarchar(50)用戶個簽user_signvarchar(50)用戶電話user_phonevarchar(20)用戶性別user_sexint用戶頭像user_avatarVarchar(500)用來存儲藥品信息，藥品信息表（goods）的結(jié)構(gòu)如表所示：表3藥品信息表字段名稱字段表示字段類型(長度)主外鍵約束藥品idgoods_idint(11)PKNOTNULL藥品名稱goods_namevarchar(225)藥品簡稱short_namevarchar(225)藥品圖片thumb_urlvarchar(500)藥品促銷價格pricedecimal(20)藥品平常價格normal_pricedecimal(20)藥品已售數(shù)量sale_tipsint藥品所屬種類categoryint藥品庫存countint藥品評價數(shù)量comments_countsint用來存儲用戶評價信息，評價信息表（comment）的結(jié)構(gòu)如表所示：表4評價信息表字段名稱字段表示字段類型(長度)主外鍵約束評論idcomment_idint(11)PKNOTNULL藥品idgoods_idint(11)FK1NOTNULL用戶iduser_idint(11)FK2NOTNULL評價內(nèi)容comment_detailvarchar(225)評價星級comment_ratingint用來存儲藥品類別信息，藥品類別表（category）的結(jié)構(gòu)如表所示：表5藥品類別表字段名稱字段表示字段類型(長度)主外鍵約束藥品類別idcate_idint(11)PKNOTNULL藥品idgoods_idint(11)FK1NOTNULL用戶iduser_idint(11)FK2NOTNULL評價內(nèi)容comment_detailvarchar(225)評價星級comment_ratingint用來存儲購物車信息，購物車表（cart）的結(jié)構(gòu)如表所示：表6購物車表字段名稱字段表示字段類型(長度)主外鍵約束備注購物車idcart_idVarchar(64)PKNOTNULL用戶iduser_idInt(11)FK1NOTNULL藥品idgoods_idint(11)FK2NOTNULL藥品名稱goods_namevarchar(225)NOTNULL藥品數(shù)量buy_countInt(11)藥品圖片thumb_urlVarchar(500)藥品價格goods_pricedecimal(20)是否勾選checkedInt(11)是否勾選：勾選未勾選用來存儲訂單信息，訂單表（orders）的結(jié)構(gòu)如表所示：表5藥品類別表字段名稱字段表示字段類型(長度)主外鍵約束備注訂單idorder_idVarchar(64)PKNOTNULL用戶iduser_idint(11)FK1收貨信息idshopping_idint(11)FK2實付金額paymentdecimal(20)付款類型paymenttypevarchar(225)0，線上支付1，線下支付運費postagedecimal(20)訂單狀態(tài)statusInt(11)0,已取消1,未付款2已付款發(fā)貨交易成功交易關閉用來存儲訂單明細信息，訂單明細表（orderItem）的結(jié)構(gòu)如表所示：表6訂單明細表字段名稱字段表示字段類型(長度)主外鍵約束子訂單編號idVarchar(64)PKNOTNULL訂單idorder_idVarchar(64)FK1用戶iduser_idint(11)FK2藥品idgoods_idInt(11)FK3藥品名稱goods_namevarchar(225)藥品圖片thumb_urlVarchar(500)藥品單價pricedecimal(20)藥品數(shù)量quantityInt(11)藥品總價totalpricedecimal(20)用來存儲支付信息，支付表（pay_info）的結(jié)構(gòu)如表所示：表7支付信息表字段名稱字段表示字段類型(長度)主外鍵約束支付信息idpay_idVarchar(64)PKNOTNULL訂單idorder_idVarchar(64)FK1用戶iduser_idint(11)FK2支付平臺payplatformInt(11)支付流水號platformnumbervarchar(225)支付狀態(tài)platformstatusVarchar(500)用來存儲用戶收貨信息，收貨信息表（shopping）的結(jié)構(gòu)如表所示：表8收貨表字段名稱字段表示字段類型(長度)主外鍵約束收貨信息編號shopping_idVarchar(64)PKNOTNULL用戶iduser_idint(11)FK1訂單idorder_idVarchar(64)FK2收件人姓名receiver_nameVarchar(64)收件人電話receiver_phonevarchar(20)收件人省份receiver_provincevarchar(20)收件人市receiver_cityvarchar(20)收件人區(qū)/縣receiver_districtvarchar(20)收件人詳細地址receiver_addressVarchar(255)4.系統(tǒng)架構(gòu)及關鍵技術(shù)4.1系統(tǒng)架構(gòu)系統(tǒng)采用B/S架構(gòu)，用戶或者管理員通過瀏覽器登陸成功就可以訪問系統(tǒng)進行操縱，采用MVVM設計模式，系統(tǒng)的整體架構(gòu)如下圖所示。圖17系統(tǒng)架構(gòu)圖系統(tǒng)的整體架構(gòu)分為三層：展現(xiàn)層：提供給普通用戶和管理員用戶的可執(zhí)行操作的web功能。業(yè)務應用層:業(yè)務需求的功能服務在業(yè)務應用層實現(xiàn)，業(yè)務應用層與平臺層和展現(xiàn)層進行交互。分為用戶端與管理端，用戶端有用戶登錄、藥品購買、訂單查看等，管理端有登錄、用戶管理、藥品管理、訂單管理等。遵從“高內(nèi)聚，低耦合”的原則，提高靈便性。平臺層:主要分三層:數(shù)據(jù)訪問層，包括Dao(數(shù)據(jù)訪問對象)；數(shù)據(jù)存儲層，包含MySQL關系型數(shù)據(jù)庫;系統(tǒng)框架層，采取基于vue.js和node.js框架進行開發(fā)的。在需求分析階段，通過對電子商城用戶的特點以及其功能需求進行詳細分析，電子商城系統(tǒng)適合B/S（broswer／server）架構(gòu)。[11]B/S結(jié)構(gòu)，即瀏覽器/服務器結(jié)構(gòu)，是web出現(xiàn)后興起的系統(tǒng)結(jié)構(gòu)瀏覽器主要是操作系統(tǒng)中較常用的應用web瀏覽器，只能執(zhí)行一些簡單的固定的邏輯，核心的、大部分的邏輯以及數(shù)據(jù)處理都是在服務器端完成。由于只需要通過瀏覽器就可以直接連接到服務器進行數(shù)據(jù)交互，所以在服務器端的安全防護工作就更加重要。系統(tǒng)采用MVVM設計模式，MVVM是Model-View-ViewModel的縮寫。MVVM（Model-View-ViewModel）是對MVC（Model-View-Control）和MVP（Model-View-Presenter）的進一步改進。View：視圖層（UI用戶界面）

ViewModel：業(yè)務邏輯層（一切js可視為業(yè)務邏輯）

Model：數(shù)據(jù)層（存儲數(shù)據(jù)及對數(shù)據(jù)的處理如增刪改查）圖18MVVMMVVM是一種設計思想。Model層代表數(shù)據(jù)模型，也可以在Model中定義數(shù)據(jù)修改和操作的業(yè)務邏輯；View代表UI組件，它負責將數(shù)據(jù)模型轉(zhuǎn)化成UI展現(xiàn)出來，ViewModel是一個同步View和Model的對象。MVVM的本質(zhì)是通過數(shù)據(jù)綁定鏈接View和Model，使數(shù)據(jù)的變化自動映射為視圖的更新。[12]在MVVM架構(gòu)下，View和Model之間通過ViewModel進行交互，Model和ViewModel之間的交互是雙向的，因此View數(shù)據(jù)的變化會同步到Model中，而Model數(shù)據(jù)的變化也會立即反應到View上。ViewModel通過雙向數(shù)據(jù)綁定把View層和Model層連接了起來，而View和Model之間的同步工作完全是自動的，無需人為干涉，因此開發(fā)者只需關注業(yè)務邏輯，不需要手動操作DOM，不需要關注數(shù)據(jù)狀態(tài)的同步問題，復雜的數(shù)據(jù)狀態(tài)維護完全由MVVM來統(tǒng)一管理。4.2關鍵技術(shù)在功能需求分析的基礎上，也必須要考慮系統(tǒng)性能方面的需求。雖然本項目可能并沒有到達實際應用的程度，但是基本的一些性能方面的要求必須要滿足：4.2.1vue.jsVue.js[13]是目前最好的基于MVVM模式的輕量級前端框架Web應用程序。[14]vue.js是一套構(gòu)建用戶界面的漸進式框架，Vue采用自底向上增量開發(fā)的設計，還提供了MVVM數(shù)據(jù)綁定和一個可組合的組件系統(tǒng)，具有靈活的API，其目標是通過近看呢過簡單的API實現(xiàn)響應式的數(shù)據(jù)綁定和可組合的視圖組件。是當前主流的三大（vue.js、react、angular.js[15]）前端開發(fā)框架之一。傳統(tǒng)DOM處理需要編寫繁雜的選擇器,逐級操作還原服務器需要的JSON數(shù)據(jù)格式,不但操作繁瑣且易出現(xiàn)致命錯誤。而通過Vue.js的響應式雙向綁定數(shù)據(jù),實時反映數(shù)據(jù)的真實變化并映射到數(shù)據(jù)源上,避免前端頁面開發(fā)中DOM選擇器繁雜的操作,簡化Web前端開發(fā)流程和降低開放難度,提升前端開發(fā)效率,降低開發(fā)成本和周期。[16]vue.js本身只具有20kbmin+gzip的運行大小，其超快的虛擬DOM使得vue.js在處理數(shù)據(jù)時更加快速。[17]Vuejs的虛擬DOM、雙向數(shù)據(jù)綁定、組件開發(fā)方面的性能優(yōu)勢非常顯著，虛擬DOM通過Diff算法減少了對頁面上的DOM的操作，減少了損耗，避免大量無意義的計算，提高了運行速度；Vue的雙向數(shù)據(jù)綁定中，模型里面的數(shù)據(jù)發(fā)生改變時不需要手動觸發(fā)視圖修改頁面，Vue的內(nèi)部指令會實現(xiàn)瀏覽器的渲染，數(shù)據(jù)獨立觸發(fā)提高系統(tǒng)工作效率；組件開發(fā)的思想是將一個簡單的UI界面映射成一棵組件數(shù)，組件樹上的每一個節(jié)點對應界面中的單個可復用的組件模塊，單個組件模塊也可組成不同的組件樹完成不同的UI界面，減少開發(fā)者的工作量的同時提高系統(tǒng)的可維護性。Vue在在同類型前端框架的基礎上進行了功能的優(yōu)化，提供更加便捷的前端開發(fā)技巧，也提升了用戶體驗。所以Vuejs的性能在時間、速度、開發(fā)難度與用戶體驗方面都有明顯的優(yōu)勢。[18]把對新舊兩棵VirtualDOM樹進行比較，找出其中的差異VNode的方法叫做diff[19]算法。diff算法的核心思路是只對同層次的節(jié)點進行比較，不會跨越層級進行。[20]4.2.2node.jsNode.js是一個基于ChromeV8引擎[21]運行環(huán)境的JavaScript程序，Chrome是谷歌瀏覽器中加載執(zhí)行的瀏覽器引擎，所謂瀏覽器引擎是執(zhí)行編譯前端代碼的計算機程序。汽車引擎的作用是汽油轉(zhuǎn)化為動力，瀏覽器引擎是將代碼編譯為瀏覽器顯示執(zhí)行的結(jié)果。前端代碼必須有瀏覽器中的引擎才能將代碼效果展示。Node.js將瀏覽器中定義的引擎程序，單獨的剝離出來，形成一個獨立運行的環(huán)境讓JavaScript代碼不再依賴瀏覽器，可以脫離瀏覽器獨立運行。JavaScript在瀏覽器中運行可以操作ECMAScript(語法)、DOM(文檔元素)、BOM(瀏覽器)；JavaScript在node環(huán)境中運行可以操作ECMAScript(語法)、I/O操作。I/O操作指input/output，可以操作系統(tǒng)中的文檔和后端的數(shù)據(jù)庫等。實際當中的前端程序，不能通過瀏覽器直接操作硬盤中的文件和數(shù)據(jù)庫內(nèi)容，不是JavaScript程序沒有這個功能，而是出于安全考慮不允許執(zhí)行。node.js脫離了瀏覽器環(huán)境，有一個獨立的運行環(huán)境就允許執(zhí)行I/O操作，以及可以直接操作硬盤中的文件以及數(shù)據(jù)庫中的文件?？偟膩碚f，node.js具有以下特點：標準的異步編程：不會阻塞正常同步程序的執(zhí)行；合理分配資源：讓計算機更加合理的執(zhí)行程序，提高編程的效率，縮短程序的執(zhí)行時間；合理的處理高并發(fā)：可以同時處理更多的需求，執(zhí)行更多的程序請求訪問。4.2.3express為了與Node.js相配合,系統(tǒng)采用了Express.JS框架Express。[22]是一個簡潔而靈活的node.jsWeb應用框架，提供了一系列強大的功能，能夠幫助人們創(chuàng)建各種Web應用，[23]可以幫助快速搭建一個完整功能的網(wǎng)站.Express框架特性：提供了方便簡潔的路由定義方式；對獲取HTTP請求參數(shù)進行了簡化處理；對模板引擎支持程度高，方便渲染動態(tài)HTML頁面；提供了中間件機制有效控制HTTP請求；擁有大量第三方中間件對功能進行擴展。4.2.4element-uielement-ui是餓了么前端出出品的基于vue.js的后臺組件庫，方便程序員進行頁面快速布局和構(gòu)建，大大減輕了代碼負擔。具有以下特點：視覺設計優(yōu)秀，細節(jié)處理到位；交互體驗很好，即使是復雜的表單操作，反饋也非誠清晰，操作簡潔直觀；較容易上手，基于vue.js開發(fā)，官網(wǎng)實力代碼充足；支持定制主題；支持Vue、react、angular，滿足各前端技術(shù)型。4.2.5mysqlMySQL由于體積小、速度快、成本低、開放源碼、易用等特點，廣泛應用在中小型web平臺開發(fā)中。[24]MySQL是最流行開放源代碼的關系型數(shù)據(jù)庫管理系統(tǒng)（RDBMS：RelationalDatabaseManagementSystem），使用最常用的數(shù)據(jù)庫管理語言——結(jié)構(gòu)化查詢語言（SQL）進行數(shù)據(jù)庫管理。關聯(lián)數(shù)據(jù)庫將數(shù)據(jù)保存在不同的表中，而不是將所有數(shù)據(jù)放在一個大倉庫內(nèi)。這樣就增加了速度并提高了靈活性。MySQL軟件采用了GPL(GNU通用公共許可證)。由于其體積小、速度快、總體擁有成本低，尤其是開放源碼這一特點，許多中小型網(wǎng)站為了降低網(wǎng)站總體擁有成本而選擇了MySQL作為網(wǎng)站數(shù)據(jù)庫。5.系統(tǒng)編程與實現(xiàn)現(xiàn)代的Web開發(fā)中越來越多的數(shù)據(jù)處理和業(yè)務邏輯開始偏向于前端，[25]項目頁面開發(fā)時需要設計頁面的骨架,拆分組件,編寫組件,設計并開發(fā)每個頁面.菜單、評價和商家詳情頁需要利用vue-router做切換.[26]5.1組件化應用開發(fā)過程中往往會存在大量可重用的代碼或者功能模塊，它們可能僅僅在某些小的方面會有不同的邏輯需求。因此，為了減輕開發(fā)者的工作量，也便于日后代碼的維護和迭代開發(fā)，我們需要采用組件化開發(fā)的方案去進行日常項目的開發(fā)和維護。[27]如果將一個頁面中所有的處理邏輯全部放在一起，那么處理起來會非常復雜混亂，而且不利于后續(xù)的管理以及擴展。vue.js將頁面拆分成一個個小的功能塊，每個功能塊完成屬于自己的獨立功能，整個頁面的管理和維護就變得相對。圖19組件樹圖20組件引用圖一個組件可以分為多個組件，每個組件又可以細分。vue.js的組件思想：它提供了一種抽象，讓我們開發(fā)出一個個獨立可服用的小組件來構(gòu)建我們的應用；任何的應用都會被抽象能一顆組件樹。本文采用的編碼技術(shù)最大的特點就是組件化思想，此組件技術(shù)的基本步驟基本可以分為三個步驟：（1）創(chuàng)建組件構(gòu)造器（2）注冊組件（全局注冊或者局部注冊），根據(jù)業(yè)務邏輯需要編寫局部組件[28]和全局組件。（3）使用組件。對于系統(tǒng)中每個頁面相同的部分，為了減少重復工作和后期代碼維護，將其從頁面代碼中抽離出來，形成單獨的組件，只需在頁面中引入即可，后期維護時，也只需修改單獨組件。正因為每個頁面由組件組成，所以說頁面之間的切換其實就是組件之間的切換。本系統(tǒng)開發(fā)所使用的前端技術(shù)Vue正好符合開發(fā)需求，Vue常用于開發(fā)SPA單頁面應用，單頁面應用就是基于組件和路由，Vue-Router設定好路由與組件之間的映射，從何實現(xiàn)頁面的切換。5.2數(shù)據(jù)庫連接在系統(tǒng)實現(xiàn)的過程中，連接數(shù)據(jù)庫是其主要的操作之一。[29]node.js連接數(shù)據(jù)庫的方式只要分為以下幾點：初始化配置，獲得連接實例；調(diào)用實例的.connect()方法；往外導出實例。具體實現(xiàn)代碼如下圖所示：exportdefault的作用只是用于導出模塊，在別的模塊需要調(diào)用這個模塊的時候，可以通過import命令引入使用。Export用來導出模塊，Vue的單文件組價通常需要導出一個對象，這個的對象是Vue實例的選項對象，以便于在其他地方可以使用import引入。5.3前臺頁面布局實現(xiàn)系統(tǒng)的前臺是與用戶進行交互的平臺，前臺頁面效果相當于系統(tǒng)的外衣，決定著用戶對系統(tǒng)的第一印象，好的前臺體驗效果才能吸引用戶使用，在存在競爭對手時，用戶往往會選擇體驗更好的產(chǎn)品。“一圖勝千言”，在系統(tǒng)正式開發(fā)之前，需要討論需求和技術(shù)實現(xiàn)，設計好頁面原型，避免在后面開發(fā)中的大規(guī)模修改，減少不必要的工作。本系統(tǒng)前臺主要用于商品的展示和用戶選購商品，在編程實現(xiàn)上沒有采用傳統(tǒng)的Table頁面布局方式，而是引入一種功能更強的、靈活性更好的DIV+CSS頁面布局。前臺一共包括首頁、藥品列表頁、購物車頁、生成訂單頁等四個頁面。首頁原型圖如下圖所示：系統(tǒng)編碼實現(xiàn)將頭部、中間藥品展示部分等都封裝成組件，采用div/css布局，后直接引入組件即可，具體代碼如下圖所示：5.4登錄模塊實現(xiàn)登錄模塊node后端代碼：Constuser_name=;獲取到前端輸入的用戶名Constuser_pwd=md5(md5(req.body.pwd)+S_KEY);獲取到前端輸入密碼并將獲取到的密碼進行MD5加密算法進行加密。letsqlStr="SELECT*FROMuser_infoWHEREuser_name='"+user_name+"'LIMIT1";此數(shù)據(jù)庫語句表示在數(shù)據(jù)庫表user_info中查看前端獲取到用戶名值為user_name值的用戶，使用conn.query（）函數(shù)查詢查詢，如果在數(shù)據(jù)庫表中沒有找到此用戶名則在后臺終端輸出“用戶名不正確”，如果找到此用戶名就查詢出此數(shù)據(jù)庫實例密碼是否與前端輸入的密碼一致，如果不一致則表示密碼不正確，反之則表示用戶名與密碼匹配，登錄成功。登錄成功后將用戶輸入的信息保存在瀏覽器session中。登錄前端：以上圖片展示Ajax函數(shù)封裝，后續(xù)接口接口調(diào)用操作只需要調(diào)用此ajax()函數(shù)，減少代碼量，提高開發(fā)效率。采用Ajax函數(shù)使用POST方法請求后端接口/api/login_pwd接口，采用export導出對象pwdLogin，前端登錄采用form表單，使用input輸入，使用v-model動態(tài)綁定數(shù)據(jù)，點擊登錄按鈕調(diào)用login（）函數(shù)，提交表單。<buttonclass="login-submit"@click.prevent="login()">登錄</button>在登錄單頁面組價那種調(diào)用導出的pwdLogin對象，Import{getPhoneCode,phoneCodeLogin,pwdLogin}from'./../../api/index';在login函數(shù)中調(diào)用awaitpwdLogin函數(shù)。判斷登錄是否正確。Constresult=awaitpwdLogin(this.user_name,this.pwd,this.captcha);5.5購物車實現(xiàn)用戶將藥品添加至購物車的具體實現(xiàn)邏輯如下：從日常網(wǎng)上購物體驗流程：打開網(wǎng)站>搜索、瀏覽商品>加入購物車>生成、確定訂單并支付來看，購物車算是本次系統(tǒng)的最為關鍵之處，跟用戶、藥品、訂單、庫存、促銷等其它模塊都掛鉤。購物車功能的用戶體驗好壞直接會影響用戶是否直接消費，在設計購物車功能時我們需要考慮到以下幾點：1.購物車的入口在哪？本系統(tǒng)在右側(cè)提供了直接進入購物車入口，同時在用戶瀏覽商品時，可直接添加商品到購物車；2.購物車有哪些基本的展示和操作？由于移動端、電腦端的屏幕尺寸不同，在移動端展示時會隱藏不常用的信息，但基本的信息都不可缺少，同時需要提供的基本操作包括藥品數(shù)量的增，減、單件藥品移除、多選框的選中取消、動態(tài)計算單件商品的總價和所有勾選商品的總價等；3有哪些細節(jié)應該考慮？在進入購物車之前我們應該判斷用戶是否登錄，登錄后方可進入購物車頁面，并將展示用戶之前加入到購物車的商品，在進行商品數(shù)量改變時，需要設定一個閥值，就是在商品數(shù)量僅剩一時，應該禁用減少按鈕的操作，只能通過刪除來移除商品。系統(tǒng)的具體編碼如下圖所示，先通過v-if判斷是否購物車內(nèi)有用戶添加的藥品，如果有則顯示包含藥品具體信息的列表，同時顯示添加至購物車的藥品總數(shù)和結(jié)算總價等，沒有則v-else顯示“購物車內(nèi)空空如也”。針對購物車內(nèi)可以對添加的藥品數(shù)量進行增加、減少、清空購物車等具體操作編碼實現(xiàn)如下圖所示：5.5訂單實現(xiàn)5.5.1訂單列表渲染新建OrderConfirm.vue訂單確認頁面，添加路由。src/router/index.js添加路由

要獲取訂單列表，不需要再重新寫接口，只需要使用查詢購物車列表的接口，提取出購物車列表。在渲染時頁面時，判斷選中的商品才顯示v-if="item.checked=='1'"。對于一些價格數(shù)字不要忘記格式化，使用過濾器對價格進行格式化。訂單確認列表不需要再寫接口，直接用購物車列表的接口，渲染頁面時選取選中的商品作為訂單確認的商品。5.5.2創(chuàng)建訂單功能實現(xiàn)點擊支付跳轉(zhuǎn)到支付頁面，支付是由第三方做的集成的支付，沒辦法模擬復雜的支付場景，現(xiàn)在只做點擊支付創(chuàng)建訂單和跳轉(zhuǎn)到成功頁面，支付功能省略掉。

生成的訂單里面有訂單生成的時間，首先需要有對時間格式化的函數(shù)方法。時間格式化編碼如下：訂單生成是將訂單信息(包含訂單Id/訂單總金額/地址信息/下單的商品信息/訂單狀態(tài)/訂單創(chuàng)建時間等)存入數(shù)據(jù)庫。傳參要傳訂單的地址id和訂單的總金額訂單的地址id從訂單頁面的路由獲取參數(shù)id，http://localhost:8080/#/orderConfirm?addressId=100001的100001,this.$route.query.addressid成功時跳轉(zhuǎn)到訂單成功頁面this.$router.push({path:'/orderSuccess?orderId='+res.result.orderId})5.6藥品上架實現(xiàn)管理端系統(tǒng)管理員可對藥品進行上新管理，將上架藥品信息寫入el-form表單，動態(tài)綁定至ruleForm對象數(shù)據(jù)中，點擊立即創(chuàng)建按鈕將對象提交至/api/add_shop_recom接口，將新上架藥品信息保存在數(shù)據(jù)庫藥品信息表中。具體編碼如下所示：el-form表單動態(tài)綁定ruleForm對象:model=’ruleForm’。將表單數(shù)據(jù)添加至formData中，轉(zhuǎn)化為FormData數(shù)據(jù)類型，調(diào)用addGoodsToRecom函數(shù)以提交。addGoodsToRecom函數(shù)調(diào)用/api/add_shop_recom接口，系統(tǒng)實現(xiàn)界面如下圖所示，6.系統(tǒng)測試系統(tǒng)測試是系統(tǒng)開發(fā)過程中必不可少的一環(huán)，伴隨整個研發(fā)過程。[30]軟件測試是保證軟件質(zhì)量水平的關鍵，為了保證農(nóng)產(chǎn)品銷售平臺能夠提供穩(wěn)定、優(yōu)質(zhì)的應用服務，并保證平臺中各功能模塊能準確、無誤的運行，就需要進行農(nóng)產(chǎn)品銷售平臺的測試。在測試過程中，發(fā)現(xiàn)農(nóng)產(chǎn)品銷售平臺所存在的問題，并針對這些問題進行平臺的修改。本次針對本藥品銷售系統(tǒng)的功能測試，主要是對系統(tǒng)的主要功能模塊進行測試，其中前臺模塊主要對登陸注冊登錄模塊、購物車模塊進行相關測試。后臺模塊主要對訂單管理模塊、物流發(fā)貨模塊、用戶管理模塊進行相關測試。并對于前后臺模塊功能設相應的測試用例。本文采用的測試用例格式包含測試類型、測試目的、測試角色、應用場景、前置條件、數(shù)據(jù)輸入、預期結(jié)果以及測試結(jié)果其中，測試類型為功能測試和性能測試，測試角色分為系統(tǒng)管理員、用戶以及游客，應用場景描述的是該功能在具體的某個情況下進行測試，前置條件描述的是在進行該功能測試時，需提前準備的數(shù)據(jù)等。數(shù)據(jù)輸入描述的是準備的測試數(shù)據(jù)，預期結(jié)果以及測試結(jié)果所描述的是該功能正常情況下的結(jié)果以及實際測試所產(chǎn)生的結(jié)果。具體針對每個模塊的測試以及測試用例如下所示：6.1注冊登錄測試第一次使用藥品銷售系統(tǒng)的用戶，首先需要進行用戶的注冊，在頁面上填寫注冊用戶所需填寫的手機號碼，并點擊發(fā)送驗證碼按鈕，接收驗證碼信息，設置登錄密碼等個人信息完成注冊。用戶順利完成注冊操作之后，所填寫的信息會在后臺數(shù)據(jù)管理庫中形成對應的信息個詳細的記錄。新用戶注冊成功后，便會獲得登錄系統(tǒng)的權(quán)限，此時用戶進入登錄界面，在界面上相應的文本款輸入自己的用戶名或者電話號碼以及登錄密碼對已經(jīng)注冊的賬號進行登錄，如果用戶名和密碼都正確無誤，則登錄成功，系統(tǒng)會跳轉(zhuǎn)到用戶的首頁，對于登錄成功的用戶顯示出的系統(tǒng)首頁是：未登錄游客用戶點擊購物車或者添加藥品至購物車，系統(tǒng)會提示先登錄6.2購物車測試用戶登錄后可以在網(wǎng)站主頁尋找自己感興趣的藥品類型，點擊選購入口進入商城進行選購，當用戶找到自己心意的商品之后即可將商品添加到購物車，隨后用戶進入購物車界面，界面顯示出所添加至購物車的藥品信息，左上角有全選按鈕，可對購物車內(nèi)藥品進行勾選選擇，點擊所勾選藥品數(shù)量左右＋、－按鈕可對藥品數(shù)量進行修改，系統(tǒng)自動根據(jù)藥品數(shù)量的變化計算金額總價，最下方那個有結(jié)算按鈕，點擊可跳轉(zhuǎn)至結(jié)算頁面。6.3藥品列表測試管理端系統(tǒng)管理員可以查看藥品列表，點擊下拉框還可以查看到藥品的詳細信息，包括名稱、分類、庫存、圖片、id、價格、其他描述。點擊編輯按鈕還可對藥品信息進行修改，點擊刪除按鈕會彈出提示框，詢問是否永久刪除藥品，點擊確認則刪除，藥品信息將永久移出數(shù)據(jù)庫，點擊取消則取消刪除操作。7.結(jié)論本文中的藥品銷售系統(tǒng)采用Ｂ／Ｓ模式設計，整合使用了vue.js技術(shù)、node.js技術(shù)、MySQL數(shù)據(jù)庫技術(shù)，實現(xiàn)了藥品信息的展示，以及與用戶之間的交互，便捷了用戶的購藥操作，拓寬了藥店企業(yè)的售藥操作。平臺運行穩(wěn)定，各模塊協(xié)作良好，滿足了用戶的需求，達到了預期目標。在藥品銷售系統(tǒng)的具體研究過程中，主要完成了以下幾個方面的內(nèi)容：簡述了藥品銷售系統(tǒng)的研究背景、研究意義及國內(nèi)外現(xiàn)狀。描述了系統(tǒng)的需求分析，確定了藥品銷售系統(tǒng)的主要模塊為藥品信息管理，購物車管理、訂單管理、用戶管理等。設計并確定了適合系統(tǒng)的數(shù)據(jù)庫結(jié)構(gòu)。簡述系統(tǒng)構(gòu)建過程中的關鍵技術(shù)。進行了系統(tǒng)用戶登錄注冊、藥品信息在線展示與銷售、購物車管理、訂單管理等業(yè)務編碼的研