基于Vue.js 框架的餐飲WebAPP 設計與實現

江家龍

（廣西工商職業技術學院，南寧 530008）

關鍵字：Vue.js；WebAPP；餐飲；平臺設計；平臺實現

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

1 相關技術介紹

1.1 Vue.js

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

1.1.1 Vue-router

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

1.1.2 Axios

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

1.1.3 Vuex

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

1.2 token

token 是服務端生成的一種代表特定權限或信息的字符串，常用于客戶端請求訪問控制或身份驗證。客戶端首次登陸用戶名和密碼驗證成功后，服務器會簽發一個token 給到客戶端進行本地保存，在約定的有效期內客戶端請求服務器資源只需帶上token 由服務器進行驗證，驗證通過即可返回需要的結果，失敗則返回錯誤信息，然后定位到登陸頁面重新登陸。

1.3 Express

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

2 “食在南”WebAPP 平臺設計

2.1 系統架構

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

圖1 系統構架圖

2.2 功能模塊設計

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

圖2 功能模塊圖

2.3 數據庫設計

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

表1 商品列表

3 “食在南”WebAPP 平臺實現

3.1 前端實現

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

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

圖3 WebAPP 首頁和商品分類

圖4 商品詳情和購物車

3.2 后端實現

接口是程序之間協作所要遵循的一套規范、標準，要真正地實現前后端分離必須依靠優良的API 接口。本項目使用RESTful(Representational State Transfer) 風格設計接口，其優點是標準統一、結構清晰、通用性和兼容性好及可讀性強。主要的接口按模塊分類設計見表2。

表2 接口設計表

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

module.exports ＝{

//代理

devServer: {

proxy: {

‘/api’: {

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

changeOrigin: true，

pathRewrite: {

‘^/api’: ’/api’

}

}

}，

}，

}

3.3 導航守衛

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

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

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

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

// 判斷是否登錄

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

// 設置頁面的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 優化測試

4.1 圖片懶加載

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

4.2 keep-alive

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

〈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 等）下進行多次測試，頁面顯示、輪播圖、路由切換均正常，兼容性良好；各模塊功能用例與設計需求一致，用戶交互友好，運行流暢；懶加載和keep-alive 正常工作，平臺性能提升明顯。WebAPP 懶加載測試如圖5 所示。

圖5 WebAPP 懶加載測試

5 結束語

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