bxm0927 / vue-xiaomi-website

:bowtie::gift_heart:基于Vue 全家桶 (2.x) + Node.js + Express + MongoDB + ES6制作的购物商城系统 (高仿小米商城)

购物商城系统

基于 Vue 全家桶 (2.x) + Node.js + Express + MongoDB + ES6 制作的购物商城系统 (高仿小米商城)，通过实现简易的商城系统来学习当下最热最流行的大前端框架和技术，商城采用前后端分离的开发方式，Vue 全家桶 (2.x)全部涉及

技术栈

【前端】

• Vue：用于构建用户界面的 MVVM 框架。它的核心是响应的数据绑定和组系统件
• vue-router：为单页面应用提供的路由系统，项目上线前使用了 Lazy Loading Routes 技术来实现异步加载优化性能
• vuex：Vue 集中状态管理，在多个组件共享某些状态时非常便捷。项目的登录状态和购物车数量等状态在每个页面都需要使用，因此使用 Vuex 来集中管理，大大降低我们组件开发数据传递的复杂度
• axios：服务端通讯。Express 提供 Rest 接口对接前端，前端所有的请求均通过 axios 来实现数据接收和页面渲染
• vue-lazyload：第三方图片懒加载库，优化页面加载速度
• vue-infinite-scroll：Vue 滚动插件
• ES6：ECMAScript 新一代语法，模块化、解构赋值、Promise、Class 等方法非常好用

【后端】

• Node.js：整个商城后台通过 Node.js 进行实现，通过 Express 框架实现后端的 REST 接口，并以 json 的形式进行输出

【数据库】

• mongoDB：NoSQL 数据库，使用 mongoose (Node.js 的 mongodb 驱动软件包) 进行 mongoDB 快速建模

【自动化构建及其他工具】

• vue-cli：Vue 脚手架工具，快速初始化项目代码
• eslint：代码风格检查工具，规范代码书写

收获

1. 掌握了在项目中运用 Vue 全家桶解决各类型问题
2. 熟悉了 vue 组件之间的交互、传值
3. 熟悉了在 vue 项目中使用第三方插件（组件）
4. 熟悉了组件化、模块化的开发思维
5. 体会到了前后端分离开发方式的好处

实现细节

主要页面：首页 (商品模块)、用户模块、地址模块、购物车模块、订单模块

首页 (商品模块)

左侧是按价格过滤功能，当屏幕尺寸缩小时，会有响应式改变

右侧为商品列表页，商品采用卡片式展示，可以按价格排序，默认显示 8 条数据，启动下拉加载并有 loading 效果，图片采用懒加载优化页面加载速度

商品的数据通过 MongoDB 进行存储，并做了分页和 loading 处理

用户模块

头部是一个导航栏，包括登录和购物车入口，登录初始账号：admin ---- 123456

前端通过 axios 请求后端 Express 路由，后端返回数据

用户模型存储在 MongoDB 中，当用户登入时，在 cookie 中记录，注销时清除 cookie

地址模块

地址的 MongoDB 数据库模型是 USER 模型的一部分，可以设置默认收货地址

默认显示 3 条地址

购物车模块

购物车数量状态通过 Vuex 管理，数量的加减会实时反映到购物车角标

订单模块

通过路由传参：:to="{ path: 'orderConfirm', query:{ 'addressId': selectedAddrId } }"

定单号在服务器端生成，采用 “平台码 + 随机数 + 时间戳” 的形式

若前台篡改定单号，后台会做处理

Build Setup

# clone the repo into your disk.
$ git clone https://github.com/bxm0927/lottery.git

# 安装依赖
$ npm install

# 导入 MongoDB 数据
$ mongoimport -d vue_xiaomi -c goods --file E:\resource\dumall-goods
$ mongoimport -d vue_xiaomi -c users --file E:\resource\dumall-users

# 运行 Vue
$ npm run dev

# 运行 Node.js
$ node server/bin/www

License

The code is available under the MIT license.

vue-xiaomi-website's Issues

main.js 文件下面 methods方法 都是多余的，可以写到vuex里

methods:{
checkLogin(){
axios.get("users/checkLogin").then(res=> {
var res = res.data;
if (res.status == "0") {
this.$store.commit("updateUserInfo", res.result);
}else{
if(this.$route.path!="/goods"){
this.$router.push("/goods");
}
}
});
},
getCartCount(){
axios.get("users/getCartCount").then(res=>{
var res = res.data;
if(res.status=="0"){
this.$store.commit("updateCartCount",res.result);
}
});
}
},

vue安装成功，后台server/ cnpm install 报错

怎么通过命令行导入Mongo数据呢

1

请教一段代码

总是看到这一段，请问是什么作用诶

<svg style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <symbol id="icon-add" viewBox="0 0 32 32"> <title>add2</title> <path class="path1" d="M15 17h-13.664c-0.554 0-1.002-0.446-1.002-1 0-0.552 0.452-1 1.002-1h13.664v-13.664c0-0.554 0.446-1.002 1-1.002 0.552 0 1 0.452 1 1.002v13.664h13.664c0.554 0 1.002 0.446 1.002 1 0 0.552-0.452 1-1.002 1h-13.664v13.664c0 0.554-0.446 1.002-1 1.002-0.552 0-1-0.452-1-1.002v-13.664z"></path> </symbol> <symbol id="icon-ok" viewBox="0 0 39 32"> <title>ok</title> <path class="path1" d="M14.084 20.656l-7.845-9.282c-1.288-1.482-3.534-1.639-5.016-0.351s-1.639 3.534-0.351 5.016l10.697 12.306c1.451 1.669 4.057 1.623 5.448-0.096l18.168-22.456c1.235-1.527 0.999-3.765-0.528-5.001s-3.765-0.999-5.001 0.528l-15.573 19.337z"></path> </symbol> <symbol id="icon-edit" viewBox="0 0 32 32"> <title>edit</title> <path class="path1" d="M25.599 11.292l-4.892-4.892 3.825-3.825 4.892 4.892-3.825 3.825zM4.732 23.308l3.959 3.959-5.939 1.98 1.98-5.939zM10.666 26.225l-4.892-4.892 13.425-13.425 4.892 4.892-13.425 13.425zM31.687 6.713l-6.4-6.4c-0.417-0.417-1.091-0.417-1.508 0l-20.267 20.267c-0.114 0.115-0.191 0.25-0.242 0.393-0.003 0.009-0.012 0.015-0.015 0.025l-3.2 9.6c-0.128 0.383-0.029 0.806 0.257 1.091 0.203 0.204 0.476 0.313 0.754 0.313 0.112 0 0.227-0.017 0.337-0.054l9.6-3.2c0.011-0.003 0.017-0.013 0.027-0.016 0.142-0.052 0.276-0.128 0.39-0.242l20.267-20.267c0.417-0.416 0.417-1.091 0-1.508v0z"></path> </symbol> <symbol id="icon-delete" viewBox="0 0 26 32"> <title>delete</title> <path class="path1" d="M17.723 28c0.543 0 0.984-0.448 0.984-1v-12c0-0.552-0.441-1-0.984-1s-0.985 0.448-0.985 1v12c0 0.552 0.441 1 0.985 1v0zM7.877 28c0.543 0 0.984-0.448 0.984-1v-12c0-0.552-0.441-1-0.984-1s-0.985 0.448-0.985 1v12c0 0.552 0.441 1 0.985 1v0zM12.8 28c0.543 0 0.985-0.448 0.985-1v-12c0-0.552-0.441-1-0.985-1s-0.984 0.448-0.984 1v12c0 0.552 0.441 1 0.984 1v0zM23.631 4h-5.908v-2c0-1.104-0.882-2-1.969-2h-5.908c-1.087 0-1.969 0.896-1.969 2v2h-5.908c-1.087 0-1.969 0.896-1.969 2v2c0 1.104 0.882 2 1.969 2v18c0 2.208 1.765 4 3.939 4h13.784c2.174 0 3.938-1.792 3.938-4v-18c1.087 0 1.969-0.896 1.969-2v-2c0-1.104-0.882-2-1.969-2v0zM9.846 3c0-0.552 0.441-1 0.984-1h3.938c0.544 0 0.985 0.448 0.985 1v1h-5.908v-1zM21.662 28c0 1.104-0.882 2-1.969 2h-13.784c-1.087 0-1.97-0.896-1.97-2v-18h17.723v18zM22.646 8h-19.692c-0.543 0-0.985-0.448-0.985-1s0.441-1 0.985-1h19.692c0.543 0 0.984 0.448 0.984 1s-0.441 1-0.984 1v0z"></path> </symbol> <symbol id="icon-clock" viewBox="0 0 32 32"> <title>clock</title> <path class="path1" d="M29.333 16c0-7.364-5.97-13.333-13.333-13.333s-13.333 5.97-13.333 13.333c0 7.364 5.97 13.333 13.333 13.333s13.333-5.97 13.333-13.333v0 0 0 0 0 0zM0 16c0-8.837 7.163-16 16-16s16 7.163 16 16c0 8.837-7.163 16-16 16s-16-7.163-16-16zM14.667 14.667v1.333h2.667v-10.667h-2.667v9.333zM24 18.667h1.333v-2.667h-10.667v2.667h9.333z"></path> </symbol> </defs> </svg>