项目介绍

本项目采用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. [转帖]《Linux性能优化实战》笔记(三)—— CPU 上下文切换(下)

    上篇介绍了三种CPU 上下文切换以及它们可能造成的问题和原因,这一篇来看看在系统中如何发现CPU 上下文切换问题. 一. 查看上下文切换情况 主要使用两个命令:vmstat以及之前用过的pidstat ...

  2. [转帖]SSH交互式脚本StrictHostKeyChecking选项 benchmode=yes

    https://www.cnblogs.com/klb561/p/11013774.html SSH 公钥检查是一个重要的安全机制,可以防范中间人劫持等黑客攻击.但是在特定情况下,严格的 SSH 公钥 ...

  3. [转帖]不同CPU性能大PK

    https://plantegg.github.io/2022/01/13/%E4%B8%8D%E5%90%8CCPU%E6%80%A7%E8%83%BD%E5%A4%A7PK/ 前言 比较Hygon ...

  4. [转帖]【Python】计算程序运行时间的方法总结

    一.第一种方法 利用time包: import time def test(): start_time = time.time() # 记录程序开始运行时间 s = 0 for i in range( ...

  5. memtester 以及 mlc 简单学习

    memtester 以及 mlc 简单学习 下载 memtester https://pyropus.ca./software/memtester/ 下载好后直接进行 make 和make insta ...

  6. [转帖]拜托!面试请不要再问我Spring Cloud底层原理

    https://www.cnblogs.com/jajian/p/9973555.html 概述# 毫无疑问,Spring Cloud是目前微服务架构领域的翘楚,无数的书籍博客都在讲解这个技术.不过大 ...

  7. [转帖]龙芯 vs 飞腾:各种测试数据看国产CPU水平

    https://zhuanlan.zhihu.com/p/99921594 2019年年末,龙芯.飞腾两大国产CPU巨头更是相继组织了规模宏大的年会,发布了新型桌面芯片及其整机产品,顿时硝烟四起.各大 ...

  8. 拼多多的U盘都是垃圾

    春节期间陪孩子玩拼多多的果园, 然后发现推送的U盘很便宜就买了下 结果发现.. U盘都是扩容盘,非常垃圾 如下图: 警告: 只有 255933 MB可测试,总容量 255935 MB. 媒体很可能已损 ...

  9. CentOS7最小安装注意事项

    CentOS7最小安装注意事项 背景与说明 公司很多项目现在都是最小化安装的了. 自己之前为了方便都是使用GUI安装,很多地方可能都有遗漏 这里进行一下简单的安装总结, 避免以后新安装有缺失的项目 安 ...

  10. node使用nodemailer发送邮件

    安装模块 npm install nodemailer 代码 const nodemailer = require('nodemailer'); // 查找到有关QQ邮箱的相关信息在 /node_mo ...