江家龍

（廣西工商職業(yè)技術(shù)學(xué)院，南寧 530008）

關(guān)鍵字：Vue.js；WebAPP；餐飲；平臺設(shè)計；平臺實現(xiàn)

隨著互聯(lián)網(wǎng)的發(fā)展，眾多餐飲行業(yè)商家主動擁抱互聯(lián)網(wǎng)，同時推進線上線下運營，催生了“互聯(lián)網(wǎng)+餐飲”。與傳統(tǒng)餐飲行業(yè)銷售模式形式單一相比，“互聯(lián)網(wǎng)+餐飲”依靠互聯(lián)網(wǎng)思維，通過門戶網(wǎng)站、手機APP、微信公眾號和微信小程序等進行宣傳營銷炒作，再加上方便快捷的支付形式，使得網(wǎng)上消費體驗得到有效提升，大幅度提高了商家的運營效率。而在這一眾宣傳炒作應(yīng)用中，WebAPP 使用成本無疑是最低的。對潛在消費者而言，無須像原生或混合APP 一樣到應(yīng)用市場下載安裝，客戶端只需瀏覽器或微信掃描二維碼即可進入到WebAPP 應(yīng)用；對商家而言，WebAPP 同時兼容多種終端設(shè)備，無須開發(fā)多終端版本，只需將代碼上傳到服務(wù)器即可實現(xiàn)版本迭代更新，開發(fā)成本相對較低，也易于推廣。本文順應(yīng)當(dāng)下用戶的消費理念和習(xí)慣，基于前端Vue.js 框架構(gòu)建一款“食在南”WebAPP，拓展多元化線上渠道，拉進消費者和商家的距離，助力商家流量變現(xiàn)；另一方面，融合線上線下會員和消費信息進行大數(shù)據(jù)分析，為商家運營決策提供支持。

1 相關(guān)技術(shù)介紹

1.1 Vue.js

Vue.js 是一套構(gòu)建用戶界面的漸進式框架，來源于尤雨溪AngularJS 性能和易用改進項目，于2014 年2 月正式發(fā)布，目前最新版為3.2.20。Vue.js 基于Model-View-View Model（MVVM）體系結(jié)構(gòu)，通過ViewModel 對Model 和View 數(shù)據(jù)進行監(jiān)聽，快速地實現(xiàn)Model 和View 之間的數(shù)據(jù)雙向綁定，使編程人員脫離復(fù)雜的頁面DOM 操作。Vue.js 簡單、靈活、高效，受到了開發(fā)者的青睞，但作為一種輕量級框架，還需借助強大的生態(tài)組件，才能讓開發(fā)者快速構(gòu)建出交互豐富、高性能的Web 應(yīng)用。以下是Vue.js 常用組件。

1.1.1 Vue-router

Vue-router 是Vue 官方推出的路由管理器，主要用于管理URL，實現(xiàn)URL 和組件的對應(yīng)，以及通過URL 進行組件之間的切換，從而使構(gòu)建單頁應(yīng)用變得更加簡單[1]。作為官方路由管理插件，Vue-router 通過hash 與history 2 種方式實現(xiàn)前端路由。

1.1.2 Axios

Axios（ajax input output system）是一個開源的可以用在瀏覽器端和Node.js 端的異步通信框架，其主要作用是實現(xiàn)ajax 異步通信。大部分瀏覽器都支持Axios，在實際開發(fā)過程中，前端通常會通過Axios 調(diào)用后端接口進行數(shù)據(jù)交互。

1.1.3 Vuex

Vuex 是一個專為Vue.js 應(yīng)用程序開發(fā)的狀態(tài)管理模式，采用集中式存儲管理應(yīng)用的所有組件的狀態(tài)[1]，解決多組件數(shù)據(jù)通信。Vuex 可以管理復(fù)雜應(yīng)用的數(shù)據(jù)狀態(tài)，比如兄弟組件的通信、多層嵌套的組件的傳值等。

1.2 token

token 是服務(wù)端生成的一種代表特定權(quán)限或信息的字符串，常用于客戶端請求訪問控制或身份驗證?？蛻舳耸状蔚顷懹脩裘兔艽a驗證成功后，服務(wù)器會簽發(fā)一個token 給到客戶端進行本地保存，在約定的有效期內(nèi)客戶端請求服務(wù)器資源只需帶上token 由服務(wù)器進行驗證，驗證通過即可返回需要的結(jié)果，失敗則返回錯誤信息，然后定位到登陸頁面重新登陸。

1.3 Express

Express 是一個基于Node.js 的Web 應(yīng)用框架，其提供了一系列的中間件來處理HTTP 請求和響應(yīng)，以及路由和模板引擎等功能，使得開發(fā)人員可以更快速地構(gòu)建和部署Web 應(yīng)用程序。Express 還支持許多數(shù)據(jù)庫，例如MongoDB、MySQL、PostgreSQL 等，以及各種模板引擎，例如EJS、Jade、Pug 等。

2 “食在南”WebAPP 平臺設(shè)計

2.1 系統(tǒng)架構(gòu)

本項目使用前后端分離的架構(gòu)模式，前端使用HTML、CSS、JavaScript 等前端技術(shù)或框架構(gòu)建用戶界面和用戶交互，后端使用Node.js 服務(wù)器語言處理業(yè)務(wù)邏輯和數(shù)據(jù)存儲，并為前端提供API 接口。前后端之間通過HTTP 請求進行交互，前端調(diào)用后端API 接口獲取到數(shù)據(jù)后，進行頁面的組裝和渲染，最終返回給瀏覽器[2]。前后端分離進一步實現(xiàn)前后端解耦，前端只需要關(guān)注頁面的樣式與動態(tài)數(shù)據(jù)的解析及渲染[3]，而后端專注于具體業(yè)務(wù)邏輯，前后端開發(fā)人員分工明確，開發(fā)效率得到大幅提高。具體系統(tǒng)架構(gòu)如圖1所示[4]。

圖1 系統(tǒng)構(gòu)架圖

2.2 功能模塊設(shè)計

基于Vue.js 框架的“食在南”WebAPP 平臺包括商品、購物車、訂單、登錄注冊和個人中心等功能模塊。普通用戶只可以進行首頁訪問和商品的查看、搜索、推薦，注冊用戶登錄之后可以進行商品秒殺、收藏、下單和支付等功能。具體功能模塊如圖2 所示。

圖2 功能模塊圖

2.3 數(shù)據(jù)庫設(shè)計

MySQL 作為經(jīng)典關(guān)系型數(shù)據(jù)庫代表，以體積小、速度快、性能卓越和服務(wù)穩(wěn)定等特點備受開發(fā)者青睞。MySQL 最新版8.0 在功能上做了顯著的改進與增強，不僅在速度上得到了改善，還為用戶帶來了更好的性能和體驗。本項目采用MySQL 數(shù)據(jù)庫進行數(shù)據(jù)表設(shè)計與管理，主要涉及的數(shù)據(jù)表包含用戶信息表、用戶收藏表、購物車、商品詳情、商品列表和訂單詳情等。以商品列表為例，具體設(shè)計見表1。

表1 商品列表

3 “食在南”WebAPP 平臺實現(xiàn)

3.1 前端實現(xiàn)

本項目基于前端框架Vue.js，涉及多個功能模塊組件間的跳轉(zhuǎn)切換，用戶相關(guān)信息數(shù)據(jù)的保存、讀取、權(quán)限分配，前端和后端數(shù)據(jù)的請求交互。前端實現(xiàn)過程中用到Vue.js 的核心組件包括:①Vue-router。用于實現(xiàn)前端組件加載或頁面導(dǎo)航，并使用Vue-router 導(dǎo)航守衛(wèi)進行用戶權(quán)限檢查，強制未授權(quán)用戶跳轉(zhuǎn)到登錄頁面進行登錄授權(quán)。②Vuex。用于保存用戶的信息（如用戶昵稱、用戶頭像、購物車數(shù)據(jù)、訂單號和token等），并使用Vuex-persistedstate 插件解決頁面刷新數(shù)據(jù)信息丟失問題。③Axios。用于實現(xiàn)后端API 請求，并對Axios 進行二次封裝，提升方便性和維護性。

前端開發(fā)中，對于一些特殊應(yīng)用，直接用插件、組件可以快速解決兼容性問題，加快開發(fā)的效率。本項目用到的插件、組件包括：①better-scroll。針對頁面移動端滾動場景，本文選用better-scroll 插件，該插件配置靈活，能流暢地支持慣性滾動、邊界回彈、滾動條淡入淡出等效果。②swiper。對于WebAPP 首頁banner 推廣區(qū)域，本文選用swiper 輪播圖插件，該插件為純JavaScript 打造，能實現(xiàn)觸屏焦點圖、觸屏Tab 切換、觸屏多圖切換等常用效果，使用簡單、功能強大、性能穩(wěn)定[5]。③MintUI。對于涉及到用戶交互的頁面，本文選用MintUI 組件，該組件可以輕量化按需加載，效果順滑流暢，能提供良好的用戶交互體驗。④Vant。對于訂單和用戶地址管理等表單內(nèi)容，本文選用Vant 組件，該組件涵蓋常見的布局、表單、導(dǎo)航和按鈕等元素，支持自定義樣式，具有良好的性能和體驗。具體的WebAPP 首頁、商品分類、商品詳情和購物車頁面如圖3、圖4所示。

圖3 WebAPP 首頁和商品分類

圖4 商品詳情和購物車

3.2 后端實現(xiàn)

接口是程序之間協(xié)作所要遵循的一套規(guī)范、標(biāo)準(zhǔn)，要真正地實現(xiàn)前后端分離必須依靠優(yōu)良的API 接口。本項目使用RESTful(Representational State Transfer) 風(fēng)格設(shè)計接口，其優(yōu)點是標(biāo)準(zhǔn)統(tǒng)一、結(jié)構(gòu)清晰、通用性和兼容性好及可讀性強。主要的接口按模塊分類設(shè)計見表2。

表2 接口設(shè)計表

瀏覽器的同源策略要求當(dāng)前請求與目標(biāo)請求的域名、協(xié)議、端口都要一致，而在前后端分離架構(gòu)中前端與后端服務(wù)通常部署在不同的服務(wù)器和端口上[6]，前端向后端發(fā)起API 請示時勢必會產(chǎn)生跨域問題。解決跨域的方法主要有CORS 后端代碼控制、Nginx 反向代理、代理服務(wù)器等，本項目后端采用Express 作為Web 服務(wù)框架，前端Vue 配置porxy 即可實現(xiàn)代理服務(wù)器跨域。具體實現(xiàn)需在前端vue.config.js 配置如下代碼：

module.exports ＝{

//代理

devServer: {

proxy: {

‘/api’: {

target: "http://localhost:3000"，

changeOrigin: true，

pathRewrite: {

‘^/api’: ’/api’

}

}

}，

}，

}

3.3 導(dǎo)航守衛(wèi)

導(dǎo)航守衛(wèi)(Navigation Guards)是Vue-router 提供的一種功能，用于在路由導(dǎo)航過程中對路由進行控制和管理。導(dǎo)航守衛(wèi)允許開發(fā)者在路由導(dǎo)航的不同階段執(zhí)行自定義的邏輯，例如在路由切換前進行身份驗證、權(quán)限檢查、取消路由導(dǎo)航等操作。本項目利用導(dǎo)航守衛(wèi)實現(xiàn)用戶身份監(jiān)測，對于未登錄的用戶在訪問商品秒殺、收藏、下單和支付等功能時會強制跳轉(zhuǎn)到登錄頁面，實現(xiàn)訪問權(quán)限正確分配。具體實現(xiàn)需在前臺router/index.js 配置如下代碼:

router.beforeEach((to，from，next) ＝〉 {

// 需要進行身份驗證的接口加入nextRote 數(shù)組

letnextRoute ＝[‘PayOrder’，‘MyCollect’，‘Order’，…]

// 判斷是否登錄

let userInfo ＝JSON.parse(localStorage.getItem(‘User Info’))

// 設(shè)置頁面的title

if (to.meta.title) {

document.title ＝to.meta.title

}

// 進入某些頁面時，需要驗證是否登錄

if(nextRoute.indexOf(to.name) 〉＝0) {

if(! userInfo) {

document.title ＝‘用戶登錄’

router.push(‘/login’)

}

}

next()

})

4 優(yōu)化測試

4.1 圖片懶加載

懶加載(Lazy Loading)是一種只有當(dāng)用戶滾動到圖片位置時才進行圖片加載的一種技術(shù)。其可以顯著減少初始頁面加載的大小和時間，減少服務(wù)器端壓力，提高網(wǎng)站的響應(yīng)速度，節(jié)省用戶端帶寬和流量，提升用戶的體驗。其技術(shù)原理是初始時在頁面img 標(biāo)簽中自定義datasrc 屬性保存img 路徑，將src 屬性置為空；當(dāng)頁面載入時監(jiān)聽頁面的scroll 事件，如果監(jiān)測到img 在瀏覽器視口內(nèi)，則把當(dāng)前img 標(biāo)簽的datasrc 值賦給src，實現(xiàn)img 正常加載，避免不必要的資源消耗和性能浪費。本項目使用了MintUI 組件，MintUI 自帶lazyload 功能，使用中只需將img 標(biāo)簽屬性src 改為vlazy 即可實現(xiàn)懶加載功能。如：〈img v-lazy＝"item.imgUrl" alt＝""〉。

4.2 keep-alive

keep-alive 是一個抽象組件，其自身不會渲染DOM 元素，也不會出現(xiàn)在父組件鏈中，主要用于保存組件的渲染狀態(tài)。使用keep-alive 包裹動態(tài)組件時，會緩存不活動的組件實例，而不是銷毀它們，避免組件反復(fù)創(chuàng)建和渲染，從而有效提升系統(tǒng)性能。在構(gòu)造路由時需要緩存的組件設(shè)置meta: {keepAlive: true}，且在APP.vue 中進行v-if 綁定，即可實現(xiàn)組件緩存。具體代碼如下：

〈template〉

〈div id＝"app"〉

〈!--要緩存的路由--〉

〈keep-alive〉

〈router-view v-if＝"$route.meta.keepAlive"〉〈/router-view〉

〈/keep-alive〉

〈!--不緩存的路由--〉

〈router-view v-if＝"! $route.meta.keepAlive"〉〈/router -view〉

〈/div〉

〈/template〉

4.3 測試

該WebAPP 在PC 端Chrome 瀏覽器和移動平臺（Android 12 版本、Android 13 版本、iPhoneXR 和i－Phone 14Pro MAX 等）下進行多次測試，頁面顯示、輪播圖、路由切換均正常，兼容性良好；各模塊功能用例與設(shè)計需求一致，用戶交互友好，運行流暢；懶加載和keep-alive 正常工作，平臺性能提升明顯。WebAPP 懶加載測試如圖5 所示。

圖5 WebAPP 懶加載測試

5 結(jié)束語

本文論述了基于Vue.js 框架下的餐飲“食在南”WebAPP 的設(shè)計與實現(xiàn)，主要介紹了項目架構(gòu)設(shè)計、模塊設(shè)計、數(shù)據(jù)庫設(shè)計和前后端開發(fā)實現(xiàn)等內(nèi)容；在前端實現(xiàn)了商品、購物車、訂單、登錄注冊和個人中心等功能模塊的開發(fā)；在后端實現(xiàn)了功能模塊的接口設(shè)計，通過導(dǎo)航守衛(wèi)，實現(xiàn)權(quán)限正確分配；在WebAPP 性能方面，通過懶加載和keep-alive 進行優(yōu)化。經(jīng)測試該WebAPP 運行流暢、交互友好、用戶體驗良好，在功能性、兼容性、易用性上基本實現(xiàn)了項目預(yù)期。但在支付功能方面仍存在較大的改進空間，項目目前僅對接了支付寶沙箱，現(xiàn)實生產(chǎn)環(huán)境還需要接入真實的商戶支付信息。此外微信支付、云閃付等支付方式，也需要重點進行規(guī)劃設(shè)計和對接，進一步增強用戶的支付體驗。