项目介绍

本项目采用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. [转帖]nginx配置文件中对于if条件语句的写法(附nginx跨域文件配置)

    前言 在nginx配置文件中,可以使用if语句,但是对于else语句其实是不支持的,并且and条件和or条件也是不支持的 实现 else条件的写法 新建一个开关变量flag,初始值为0,如果为1说明进 ...

  2. [转帖]Spring为啥不推荐使用@Autowired注解?

    https://my.oschina.net/u/5079097/blog/5289666   引言 使用IDEA开发时,同组小伙伴都喜欢用@Autowired注入,代码一片warning,看着很不舒 ...

  3. 各种数据库shell一键登录的方法

    各种数据库shell一键登录的方法 一个小场景 想通过shell 直接执行一些内容. 然后发现通过shell就可以. 所以这里总结一下 1. Oracle export ORACLE_HOME=/u0 ...

  4. [转帖]Oracle AWR报告提取方法

    https://www.cnblogs.com/jyzhao/p/4030022.html 本文旨在用来指导项目人员自行提取Oracle数据库的AWR报告. 1.当前连接实例的AWR报告提取:@?/r ...

  5. [转帖]InnoDB表聚集索引层高什么时候发生变化

    导读 本文略长,主要解决以下几个疑问 1.聚集索引里都存储了什么宝贝 2.什么时候索引层高会发生变化 3.预留的1/16空闲空间做什么用的 4.记录被删除后的空间能回收重复利用吗 1.背景信息 1.1 ...

  6. [转帖]Windows磁盘性能压测(1)-DiskSpd

    http://www.manongjc.com/detail/59-xrydhtisrajqsxn.html 本文章向大家介绍Windows磁盘性能压测(1)-DiskSpd,主要内容包括其使用实例. ...

  7. vim 复制代码的方法

    之前vim 复制代码 总是格式变错乱了 尤其是yaml文件 有的还带注释 非常痛苦 今天早上查了下 原来处理的方式非常简单  增加一个参数就可以了 方法为 1. vim 打开一个文件 2.输入 :se ...

  8. locust+python性能测试库

    一.简介 locust官网介绍:Locust 是一个用于 HTTP 和其他协议的开源性能/负载测试工具.其对开发人员友好的方法允许您在常规 Python 代码中定义测试.Locust测试可以从命令行运 ...

  9. Stream流处理快速上手最佳实践

    一 引言 JAVA1.8得益于Lambda所带来的函数式编程,引入了一个全新的Stream流概念Stream流式思想类似于工厂车间的"生产流水线",Stream流不是一种数据结构, ...

  10. 【JS 逆向百例】网洛者反爬练习平台第六题:JS 加密,环境模拟检测

    关注微信公众号:K哥爬虫,持续分享爬虫进阶.JS/安卓逆向等技术干货! 声明 本文章中所有内容仅供学习交流,抓包内容.敏感网址.数据接口均已做脱敏处理,严禁用于商业用途和非法用途,否则由此产生的一切后 ...