基于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 运行流畅、交互友好、用户体验良好，在功能性、兼容性、易用性上基本实现了项目预期。但在支付功能方面仍存在较大的改进空间，项目目前仅对接了支付宝沙箱，现实生产环境还需要接入真实的商户支付信息。此外微信支付、云闪付等支付方式，也需要重点进行规划设计和对接，进一步增强用户的支付体验。