/vue2-jd

基于vue2 + mintUI + vuex构建的高仿京东App大型商城网站

Primary LanguageVue

Vue2-jd

因服务器出问题导致数据库丢失,导致本项目接口无法运行。故不再维护本项目。已废弃。

一个使用了基于vue2 + mintUI + vuex + asxio + sass 构建的高仿京东IOS风格的App大型商城网站,目前基础功能基本完成,后续将会持续更新添加新功能...

该项目是一个前后端分离项目,前后端全栈开发。后端api又和管理系统分开使用。api使用了基于node.js的express来做接口的开发。管理系统则使用了element-damin搭建。对应传送门请看下面

本项目纯属个人瞎弄,仅供学习和参考,禁止用于非法用途。正常购买商品请选择京东官方App

对应的后台项目

如果对您有帮助,您可以点右上角 "Star" 支持一下 谢谢(求你了)

演示

查看demo请戳这里(请用chrome手机模式预览)

后台管理系统请戳这里(请用chrome手机模式预览)

移动端扫描下方二维码

效果展示

  • 响应式布局首页

  • 底部商品推荐

  • 顶部搜索栏

  • 商品详情页

  • 文章资讯

  • 视频资讯

  • 文章详情

  • 用户登录

  • 注册

  • 购物车

  • 下单

  • 下单-支付密码

  • 订单列表

  • 评价

  • 个人中心

  • 设置中心

安装

注意:由于涉及大量的 ES6/7 等新属性,node 需要 6.0 以上版本

关于node mongodb的安装方法可以查看安装教程

git clone https://github.com/Caitingwei/vue2-jd.git

cd vue2-jd

//这里使用淘宝镜像安装能快一点
npm --registry https://registry.npm.taobao.org install

运行

本地调试模式

npm start

生产模式(部署)

npm run build

项目布局

.
├── build                                       // webpack配置文件
├── config                                      // 项目打包路径
├── dist                                        //上线项目文件npm run build后生成放在服务器即可正常访问
├── screenshots                                 // 项目截图
├── src                                         // 源码目录
│   ├── components                              // 组件
│   │   ├── common                              // 公共组件
│   │   │   ├── marquee                         //广播轮播组件
│   │   │   ├── backHead.vue                    // 返回顶部组件
│   │   │   ├── loadMore.vue                    // 加载更多上拉刷新组件
│   │   ├── footer
│   │   │   └── footerView.vue                  // 底部公共组件
│   ├── config                                  // 基本配置
│   │   ├── div.env.js                          // 本地开发环境配置
│   │   ├── prod.env.js                         // 生产模式环境配置
│   │   └── index.js                            // 根文件
│   ├── assets                                  // 公共资源文件
│   ├── page
│   │   ├── chat                                // 消息聊天 (还未开发)
│   │   ├── cms                                 // 资讯类模块
│   │   │   ├── index.vue                       // 首页
│   │   │   ├── article.vue                     // 咨询列表
│   │   │   └── articleDetail.vue               // 咨询详情
│   │   ├── member
│   │   │   ├── addressList.vue                 // 地址列表
│   │   │   ├── address.vue                     // 编辑、新增地址
│   │   │   ├── forget.vue                      //  忘记密码
│   │   │   ├── login.vue                       // 登录
│   │   │   ├── myhome.vue                      // 个人中心
│   │   │   ├── register.vue                    // 注册
│   │   │   └── sttings.vue                     // 设置
│   │   └── shop
│   │       ├── cart.vue                        // 购物车
│   │       ├── category.vue                    // 商品分类
│   │       ├── createOrder.vue                 // 创建订单
│   │       ├── order.vue                       // 订单详情
│   │       ├── orderList.vue                   // 订单列表
│   │       ├── product.vue                     // 商品详情
│   │       ├── review.vue                      // 评价
│   │       ├── searchBar.vue                   // 顶部搜索栏+搜索
│   │       ├── searchRusult.vue                // 搜索结果列表页
│   │       └── shop.vue                        // 店铺详情
│   ├── plugins                                 // 引用的插件
│   │   └── flexible.js                         // rem相关配置
│   ├── router
│   │   └── index.js                            // 路由配置
│   ├── service                                 // 数据交互统一调配
│   │   └── getData.js                          // 获取数据的统一调配文件
│   ├── store                                   // vuex的状态管理
│   │   ├── modules                             // 配置actions,相关接口请求都在actions中进行
│   │   │   ├── app.js                          // app模块相关的数据
│   │   │   ├── cms.js                          // cms模块相关的数据
│   │   │   ├── shop.js                         // shop模块相关的数据
│   │   │   └── user.js                         // user模块相关的数据
│   │   ├── getter.js                           // 全局计算属性数据
│   │   └── index.js                            // 初始化全局Vuex
│   └── utils
│       ├── axios.js                            // 封装的http请求方法
│       ├── directives.js                       // vue全局公用指令
│       ├── filters.js                          // vue全局公用过滤器
│       └── mixin.js                            // 公用混合工具类
│   ├── App.vue                                 // 页面入口文件
│   ├── main.js                                 // 程序入口文件,加载各种公共组件
│   └── static                                  // 静态资源文件夹
├── favicon.ico                                 // 图标
├── index.html                                  // 入口html文件
└── package.json                                // .

当前实现的功能

资讯类

  • 获取文章列表
  • 获取文章详情
  • 获取咨询分类列表
  • 获取咨询分类
  • 获取推荐信息
  • 获取首页全部咨询

用户类

  • 获取用户信息
  • 发送短信验证码
  • 注册账号
  • 修改用户信息
  • 修改/设置密码
  • 登录
  • 保存地址
  • 获取单个地址信息
  • 获取地址列表
  • 删除地址
  • 使用钱包支付订单
  • 收藏店铺
  • 获取我的收藏店铺
  • 添加、删除、修改收货地址

商城类

  • 获取商品目录信息
  • 获取商品列表
  • 获取商品详情
  • 搜索商品
  • 加入购物车
  • 删除选购产品
  • 获取选购的产品信息
  • 确认选购产品,将作为下单的产品信息
  • 获取确认选购的产品信息
  • 创建订单 !
  • 确认收货
  • 取消订单
  • 获取订单列表
  • 获取订单详情
  • 获取店铺信息
  • 商品评论列表
  • 发布评论

相关使用技术链接