基于vue全家桶的餐饮外卖小程序前后端设计与实现

本文主要是介绍基于vue全家桶的餐饮外卖小程序前后端设计与实现，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

1.项目背景描述

​ 一直想用 vue 实现一个类似于商城的应用，加之新冠肺炎期间时间算是比较充分就把自己的一些想法用代码来实现一下，到目前算是一个阶段的完成，基本实现了一个家常菜馆的 App（包括前台应用，后台管理系统，和基于 node+ express 框架的服务器），实现了一些基本的功能，还有很多细节和功能我没有实现代码还有很多的 bug，后期我会逐步去完成这些不足的地方。

2.项目描述

• 此项目为外卖 webapp (spa)
• 前台系统包括的模块有：首页，商品分类，购物车，订单管理，用户手机号/密码注册登录，用户地址管理后台管理系统包括：管理员注册登录，商品添加，商品修改， 商品删除等模块
• 前台、后台系统都使用 vue 全家桶、es6 等技术实现，服务器端使用 nodejs+express 和相关的一些中间件来实现，商品信息展示所用到的一些静态图片放在服务器端统一管理
• 采用模块化、组件化、工程化的模式开发

3.项目功能界面展示

前台界面展示：
http://www.biyezuopin.vip

后台管理系统

技术选型

前端应用路由管理：

后台应用路由管理：

API 接口：

vue 插件或者第三方库
http://www.biyezuopin.vip

• vue-router 开发单页应用
• axios 与服务器进行数据交互
• vuex 管理应用组件状态
• better-scorll 实现页面滑动效果
• elementui、vant 组件库构建部分页面
• vue-lazyload 实现图片懒加载

4.应用开发

使用 vue-cli(脚手架) 搭建项目

• vue-cli 是由 vue 官方提供的用于搭建基于 vue+webpack+es6 项目的脚手架工具

• 操作：

  • npm install -g vue-cli
  • vue init webpack 项目名称
  • cd 项目文件夹
  • npm install
  • npm run dev

  访问：http:localhost:8080（默认端口 8080）

• 项目解构分析：

这篇关于基于vue全家桶的餐饮外卖小程序前后端设计与实现的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！