摘 要：本文介紹了一款移動(dòng)端養(yǎng)老醫(yī)療app系統(tǒng)的開(kāi)發(fā)流程和設(shè)計(jì)與實(shí)現(xiàn)的過(guò)程。本文采用了前端Vue框架和Muse移動(dòng)端組件庫(kù)實(shí)現(xiàn)頁(yè)面搭建及其業(yè)務(wù)邏輯處理，實(shí)現(xiàn)前后端分離開(kāi)發(fā)。本系統(tǒng)主要的功能模塊有：登錄與注冊(cè)、搜索功能、購(gòu)物車管理、消息管理、收貨地址管理、訂單管理等。本文實(shí)現(xiàn)了此類型購(gòu)物app基本的功能，也具有很好的衍生性，適用于其他同類型的網(wǎng)上商鋪app的開(kāi)發(fā)。

關(guān)鍵詞：HTML；CSS；JavaScript

一、模塊功能設(shè)計(jì)

（一）用戶系統(tǒng)功能

系統(tǒng)功能設(shè)計(jì)是指根據(jù)系統(tǒng)的需求分析，確定系統(tǒng)的功能模塊，以及模塊之間的關(guān)系和接口，從而實(shí)現(xiàn)系統(tǒng)的邏輯設(shè)計(jì)和結(jié)構(gòu)。系統(tǒng)功能設(shè)計(jì)的目的是為了讓系統(tǒng)更加清晰、合理、易于開(kāi)發(fā)和維護(hù)。

本系統(tǒng)功能設(shè)計(jì)遵循以下的步驟：

確定系統(tǒng)的功能需求和非功能需求，例如性能、安全性、可用性等。

確定系統(tǒng)的整體架構(gòu)，即系統(tǒng)在整個(gè)上下文中的位置，與其他系統(tǒng)的關(guān)聯(lián)，以及系統(tǒng)自身的職責(zé)。

確定系統(tǒng)的模塊劃分，即將系統(tǒng)分解為若干子模塊，確定每個(gè)模塊的職責(zé)以及模塊間的關(guān)聯(lián)。

確定每個(gè)模塊的具體功能，即根據(jù)業(yè)務(wù)場(chǎng)景和規(guī)則，梳理每個(gè)模塊的業(yè)務(wù)流程和狀態(tài)轉(zhuǎn)換。

確定每個(gè)模塊的數(shù)據(jù)結(jié)構(gòu)，即根據(jù)實(shí)體模型，設(shè)計(jì)每個(gè)模塊需要存儲(chǔ)和訪問(wèn)的數(shù)據(jù)表或文檔等。

確定每個(gè)模塊的接口設(shè)計(jì)，即根據(jù)模塊間的交互，設(shè)計(jì)每個(gè)模塊需要提供或調(diào)用的API或消息等。

確定每個(gè)模塊的技術(shù)選型，即根據(jù)非功能需求和技術(shù)趨勢(shì)，選擇合適的技術(shù)框架或組件等。

（二）系統(tǒng)架構(gòu)

使用vuecli腳手架搭建項(xiàng)目，利用webpack搭建搭建了vue自動(dòng)化開(kāi)發(fā)環(huán)境，啟動(dòng)該項(xiàng)目有以下幾個(gè)選項(xiàng)可以進(jìn)行可視化選擇：選擇vue版本、es6轉(zhuǎn)es5、TypeScript編程語(yǔ)言、漸進(jìn)式應(yīng)用、安裝vue路由、css預(yù)處理器、eslint格式化代碼標(biāo)準(zhǔn)，通過(guò)這些選項(xiàng)的選擇可以搭建一套基本的vue項(xiàng)目結(jié)構(gòu)。因?yàn)槭腔谇岸丝蚣躹ue進(jìn)行開(kāi)發(fā)的，通過(guò)前后端分離管理系統(tǒng)，基于MVVM原理實(shí)現(xiàn)數(shù)據(jù)雙向綁定。應(yīng)用node.js包管理工具下載依賴包，gulp工具打包項(xiàng)目，git用于控制版本。生產(chǎn)環(huán)境下的代碼都放在src目錄下，經(jīng)過(guò)gulp工具編譯后的代碼放在dist目錄下。

（三）系統(tǒng)ER圖

整個(gè)系統(tǒng)設(shè)計(jì)時(shí)可以建立的關(guān)系是用戶和商品之間的關(guān)系，用戶通過(guò)用戶名和密碼的輸入，經(jīng)過(guò)校驗(yàn)后進(jìn)入系統(tǒng)選購(gòu)商品。如圖1-1所示一個(gè)用戶可以選購(gòu)多樣商品，又有多個(gè)用戶所以是多對(duì)多的關(guān)系。

二、用戶界面

npm run dev啟動(dòng)項(xiàng)目后自動(dòng)打開(kāi)瀏覽器打開(kāi)localhost：9090/，當(dāng)點(diǎn)擊底部tabbar導(dǎo)航“我的”再點(diǎn)擊“設(shè)置”時(shí)，點(diǎn)擊退出登錄，就能進(jìn)入登錄頁(yè)。用戶輸入賬號(hào)和密碼后就進(jìn)行簡(jiǎn)單的表單驗(yàn)證就可進(jìn)入首頁(yè)了（此設(shè)計(jì)，因?yàn)椴捎们昂蠖朔蛛x設(shè)計(jì)，無(wú)法調(diào)用接口去進(jìn)行用戶名與密碼一致性校驗(yàn)）。如圖2-2所示系統(tǒng)直接確認(rèn)兩次密碼輸入一致的情況下會(huì)將數(shù)據(jù)發(fā)送到后端數(shù)據(jù)庫(kù)進(jìn)行保存，再登錄頁(yè)輸入注冊(cè)的賬號(hào)和密碼后再跳轉(zhuǎn)到首頁(yè)（此處因?yàn)闊o(wú)后端接口，不能進(jìn)行用戶名和密碼的校驗(yàn)以及手機(jī)號(hào)和密碼的校驗(yàn)）。

用戶注冊(cè)登錄后直接會(huì)進(jìn)入云健康頁(yè)，如圖2-3所示，首頁(yè)頂欄有商品搜索框便于用戶搜索所需商品，搜索框下面是康復(fù)理療和預(yù)約體驗(yàn)區(qū)域，用于展示主要推出的活動(dòng)信息，再下面是根據(jù)商品類別設(shè)置的宮格導(dǎo)航方便用戶直接對(duì)某類別商品進(jìn)行挑選。如圖2-3所示宮格導(dǎo)航下面是商店主推商品信息的展示，最下面固定在底部的四大導(dǎo)航，利于用戶直接進(jìn)入消息、商城、我的頁(yè)面。

作者簡(jiǎn)介：王科，宿州學(xué)院信息工程學(xué)院教師。