项目介绍

本项目采用uniapp和nodejs(数据接口)、mongodb等技术实现了一个类似美团外卖的简易APP。项目主要目的是为了快速上手,如何快速使用uniapp开发一个app项目,同时掌握一些常用的知识点。有兴趣的朋友可以拿去做二次开发或毕业设计也是不错的。

通过本项目,你将学习到:
1、uniapp基础
2、vue和vuex的使用
3、nodejs+express+mongodb的组合如何快速开发一套api接口
4、uniapp本地存储的使用
5、uniapp基本组件和扩展组件的使用
6、如何实现购物车逻辑?
7、如何实现地址管理?
8、如何实现订单管理?
9、如何设计页面布局?
10、如何编写css/scss样式?

项目预览

演示视频

uniapp仿美团外卖app项目

技术路线

  • uniapp
  • H5、CSS3
  • vue和vuex
  • nodejs
  • mongodb
  • express框架
  • mongoose插件

功能介绍

系统登录

系统首页

从上到下依次为:

  • 商品搜索
  • 商品分类轮播图
  • 商品推荐
  • 商家列表

商家模块

本模块主要展示商家三块信息:商品列表、评价信息、商户信息。

购物车模块

本模块主要实现将商家商品添加购物车,同时提供购物车结算功能,用户可以随意修改购物车商品,当点击结算按钮后跳转到订单结算界面。

订单模块

本模块主要展示用户已完成的订单列表,同时点击某一订单可以看到该订单详情。

我的模块

本模块展示登录用户的相关信息,如:头像、姓名、账户信息、地址管理、软件信息等。

地址管理

顾名思义就是对用户收货地址的增删改查操作:

Uniapp+Nodejs实现外卖App项目1-项目介绍的更多相关文章

  1. 项目vue2.0仿外卖APP(一)

    最近用vue.js做一个仿饿了么外卖APP的项目,现在也把流程啊什么的暂时先整理一下在这个博客上面. 当然,这个过程会有点长,不过确实能学到很多东西. 话不多说,马上开始吧. 1.项目介绍 选用当前最 ...

  2. Vue学习笔记-nodejs+vue-cli4+webpack按装配置+项目创建

    一  使用环境: windows 7 64位操作系统 二  Vue学习-nodejs按装配置,Node.js 就是运行在服务端的 JavaScript. 1. 去nodejs的官网下载  https: ...

  3. win10下使用nodejs安装及webstorm创建express项目的指导

    title: win10下使用nodejs安装 win10下使用nodejs安装及webstorm创建express项目的指导 windows下nvm的安装 熟悉linux下nodejs开发的朋友应该 ...

  4. 医药箱APP静态小项目

    花费了10天时间,纯手写一个医药箱APP静态小项目,里面有上拉加载.左右滑动.弹出层淡入淡出等效果,主要是练习. 以下是一部分页面效果图: 我用的是谷歌的开发者工具的手机端模拟器. 里面需要优化的地方 ...

  5. 【音乐App】—— Vue-music 项目学习笔记:项目准备

    前言: 学习慕课网Vue高级实战课程后,在实践中总结一些这个项目带给自己的收获,希望可以再次巩固关于Vue开发的知识.这一篇主要梳理:项目概况.项目准备.页面骨架搭建.项目github地址:https ...

  6. Cordova app 检查更新 ----创建项目、添加插件、修改插件(一)

    原文:Cordova app 检查更新 ----创建项目.添加插件.修改插件(一) 使用Cordova 进行跨平台应用程序的开发 1.创建Cordova项目 $ cordova create hell ...

  7. nodejs 批处理运行 app.js

    1.直接执行run.bat文件         以下的内容为批处理文件run.bat中的内容,批处理命令中NODE_PATH为Node.js的安装路径. 使用express 生成的项目.app.js为 ...

  8. 美团外卖app可行性分析

    美团外卖app可行性分析 1 引言 1.1编写目的 年轻人追求时尚,快捷,因此外卖行业拥有广阔的消费群体:团购的兴起,也促进了人们的消费欲望,人们继续一个外卖平台,来满足他们的欲望.O2o模式的日渐完 ...

  9. vuecli创建项目-vue项目目录介绍-es6导入导出语法-小练习登录功能-scoped

    目录 vuecli创建项目-vue项目目录介绍-es6导入导出语法-小练习登录功能-scoped 今日内容概要 今日内容详细 1 vue-ci创建项目 2 vue项目目录介绍 3 es6导入导出语法 ...

  10. 前端开发工程师 - 06.Mini项目实战 - 项目简介

    第6章--Mini项目实战 项目简介 Mini项目简介-Ego社区开发 回顾: 页面制作 页面架构 JavaScript程序设计 DOM编程艺术 产品前端架构 实践课Mini项目--Ego: 主题:漫 ...

随机推荐

  1. 给Hexo博客文章加密

    有的时候博客内容会有变动,首发博客是最新的,其他博客地址可能会未同步,认准https://blog.zysicyj.top 首发博客地址 原文地址 这是个啥 首先, 这是 Hexo 生态圈中 最好的 ...

  2. MySQL为什么不推荐使用in

    有的时候博客内容会有变动,首发博客是最新的,其他博客地址可能会未同步,认准https://blog.zysicyj.top 首发博客地址 系列文章地址 当使用IN语句时,MySQL可能会遇到以下问题: ...

  3. [转帖]TIDB-TIDB节点磁盘已满报警

    一.背景 今日突然收到tidb节点的磁盘报警,磁盘容量已经超过了80%,但是tidb是不放数据的,磁盘怎么会满,这里就需要排查了 二.问题排查 解决步骤 1.df -h查看哪里占用磁盘比较多,然后通过 ...

  4. [转帖]在龙芯3A5000上测试SPEC CPU 2006

    https://baijiahao.baidu.com/s?id=1707601012673143593&wfr=spider&for=pc 注:百家号中,一些文本.代码等的排版格式无 ...

  5. [转帖]spec2017 安装和使用

    https://zhuanlan.zhihu.com/p/534205632 SPEC成立于1988年,SPEC基准广泛用于评估计算机系统的性能.SPEC CPU套件通过测量几个程序(例如编译器GCC ...

  6. HTTPD 搭建正向代理 使无网络访问权限的服务器能够访问互联网服务的快捷办法

    背景 公司有保密要求比较高,数据安全要求比较高的企业客户,要求核心业务服务器部允许直接访问互联网,但是因为我们有一些OCR识别以及发票查验等的场景需要连接云端的服务才可以正常使用, 所以这里面就存在安 ...

  7. IDM全版本激活工具

    前往IDM官网下载IDM IDM官网 下载破解工具 IDM激活工具.zip 解压打开激活工具选择1 然后回车耐心等待激活完成即可

  8. 7.1 C/C++ 实现动态数组

    动态数组相比于静态数组具有更大的灵活性,因为其大小可以在运行时根据程序的需要动态地进行分配和调整,而不需要在编译时就确定数组的大小.这使得动态数组非常适合于需要动态添加或删除元素的情况,因为它们可以在 ...

  9. 一图看懂iPhone 15系列:15/Plus/Pro/Pro Max有啥区别?详细配置对比

    距离iPhone 15系列发布只剩下2天(北京时间9月13日凌晨1点),即将推出预计分别是iPhone 15.iPhone 15 Plus,以及Pro系列的iPhone 15 Pro以及iPhone ...

  10. Go语言实现八大排序|排序算法|超详细保姆级别注释

    前言 那么这里博主先安利一些干货满满的专栏了! 首先是博主的高质量博客的汇总,这个专栏里面的博客,都是博主最最用心写的一部分,干货满满,希望对大家有帮助. 高质量博客汇总https://blog.cs ...