Vue2+团购电商项目

说明：

本项目包含 移动端（vue全家桶）+pc端后台管理系统（自建vue脚手架）+服务器端（nodejs+mongodb）
github地址：https://github.com/estherzz/vue2--tuangou

技术栈

vue cli, vue, vuex, vue-router, axios, webpack, ES6, ES Module, mongodb，ElementUI，nodejs, express, mongodb

实现功能

移动端：

• 分类模块
  查看更多
价格排序
好评排序
销量排序
优惠排序
搜索功能
点击商品-跳转商品详情页面
• 详情模块
  购物车-价格实时结算
  立即购买-跳转购物车页面
• 购物结算模块
  总价- 随单个商品数量增加而增加

后台管理系统pc端：

• 登录验证
  用户名密码验证
刷新免重复登录
修改用户名/密码
二次确认密码
• 商品管理
  创建商品
图片上传
编辑商品
删除商品
商品列表
• 用户管理
  创建用户
用户列表

项目运行

git clone https://github.com/estherzz/vue2--tuangou.git

• 安装mongodb https://www.mongodb.com/try/download/community
  MongoDB将数据目录存储在 db 目录下。但是这个数据目录不会主动创建，在安装完成后需要创建，并且数据目录放在根目录下（(如： C:\ 或者 D:\ 等 )
推荐在 C 盘安装 mongodb=>创建一个 data 的目录 => data 目录里创建 db 目录。

• 安装 nodejs https://nodejs.org/en/download/

• 打开数据库
  mongod --dbpath 自定义想要存储数据的数据库位置

• 在项目文件目录打开命令窗口

项目文件目录.png

• 导入数据：
  mongoimport -d bp_data -c product --file ./database/product
• 进入server目录
  cd server
• 打开务器
  node app.js
• 打开网页
  移动端 http://localhost:3003/ （按键F12 => 调成手机模式）
  后台管理系统pc端 http://localhost:3003/admin/ (初始登录账号：yiyi，密码：123abc)

版本：
mongodb： ^3.5.4
nodejs: ^12.16.2.0

移动端截图

首页.png

商品列表页.png

商品列表+查看更多.png

商品列表+搜索结果.png

商品详情.png

购物结算.png

移动端gif效果动图

首页.gif

美食模块 -- 查看更多+价格排序+好评排序+销量排序+优惠排序+搜索功能.gif

跳转商品详情.gif

底部价格结算.gif

购买页面价格结算.gif

后台管理系统PC端截图

登录.png

创建商品.png

商品列表.png

创建用户.png

用户列表.png

后台管理系统PC端gif效果图

admin首页.gif

创建商品.gif

商品列表.gif

删除商品.gif

修改商品.gif

修改密码.gif

用户列表+创建用户.gif