友家智慧養老云平臺設計

摘 要：本文介紹了一款移動端養老醫療app系統的開發流程和設計與實現的過程。本文采用了前端Vue框架和Muse移動端組件庫實現頁面搭建及其業務邏輯處理，實現前后端分離開發。本系統主要的功能模塊有：登錄與注冊、搜索功能、購物車管理、消息管理、收貨地址管理、訂單管理等。本文實現了此類型購物app基本的功能，也具有很好的衍生性，適用于其他同類型的網上商鋪app的開發。

關鍵詞：HTML；CSS；JavaScript

一、模塊功能設計

（一）用戶系統功能

系統功能設計是指根據系統的需求分析，確定系統的功能模塊，以及模塊之間的關系和接口，從而實現系統的邏輯設計和結構。系統功能設計的目的是為了讓系統更加清晰、合理、易于開發和維護。

本系統功能設計遵循以下的步驟：

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

確定系統的整體架構，即系統在整個上下文中的位置，與其他系統的關聯，以及系統自身的職責。

確定系統的模塊劃分，即將系統分解為若干子模塊，確定每個模塊的職責以及模塊間的關聯。

確定每個模塊的具體功能，即根據業務場景和規則，梳理每個模塊的業務流程和狀態轉換。

確定每個模塊的數據結構，即根據實體模型，設計每個模塊需要存儲和訪問的數據表或文檔等。

確定每個模塊的接口設計，即根據模塊間的交互，設計每個模塊需要提供或調用的API或消息等。

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

（二）系統架構

使用vuecli腳手架搭建項目，利用webpack搭建搭建了vue自動化開發環境，啟動該項目有以下幾個選項可以進行可視化選擇：選擇vue版本、es6轉es5、TypeScript編程語言、漸進式應用、安裝vue路由、css預處理器、eslint格式化代碼標準，通過這些選項的選擇可以搭建一套基本的vue項目結構。因為是基于前端框架vue進行開發的，通過前后端分離管理系統，基于MVVM原理實現數據雙向綁定。應用node.js包管理工具下載依賴包，gulp工具打包項目，git用于控制版本。生產環境下的代碼都放在src目錄下，經過gulp工具編譯后的代碼放在dist目錄下。

（三）系統ER圖

整個系統設計時可以建立的關系是用戶和商品之間的關系，用戶通過用戶名和密碼的輸入，經過校驗后進入系統選購商品。如圖1-1所示一個用戶可以選購多樣商品，又有多個用戶所以是多對多的關系。

二、用戶界面

npm run dev啟動項目后自動打開瀏覽器打開localhost：9090/，當點擊底部tabbar導航“我的”再點擊“設置”時，點擊退出登錄，就能進入登錄頁。用戶輸入賬號和密碼后就進行簡單的表單驗證就可進入首頁了（此設計，因為采用前后端分離設計，無法調用接口去進行用戶名與密碼一致性校驗）。如圖2-2所示系統直接確認兩次密碼輸入一致的情況下會將數據發送到后端數據庫進行保存，再登錄頁輸入注冊的賬號和密碼后再跳轉到首頁（此處因為無后端接口，不能進行用戶名和密碼的校驗以及手機號和密碼的校驗）。

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

作者簡介：王科，宿州學院信息工程學院教師。