ICode9

精准搜索请尝试: 精确搜索
首页 > 编程语言> 文章详细

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

2022-03-06 14:05:06  阅读:302  来源: 互联网

标签: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,外卖,项目,实现,前台,应用,后台,餐饮
来源: https://blog.csdn.net/newlw/article/details/123309487

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有