vue+mongodb+node简易商城总结

git命令:  git init   git add .   git commit -m''      git  push -u origin master

遮罩的代码

.md-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 200;
}

 

vue部分:

1.在子组件中使用<slot name='xxx'></slot> ，在父组件中使用<p slot='xxx'>yyy</p> 可以在子组件中插入父组件的内容；

 2.可以使用mock模拟json数据调试，在dev-server.js中添加路由

1   var goodsData = require('../mock/goods.json')
2   var router = express.Router()
3   router.get("/goods", function (req,res) {
4   res.json(goodsData)
5 })
6 app.use(router)

3.可以使用vue-lazyload实现图片懒加载

 

 

 

node.js+mongo部分：

1.启动mmapv1 存储引擎（适用于老版本管理工具）

mongod --storageEngine mmapv1 --dbpath D:\data (数据目录)

 

2.cnpm i express-generator 安装express脚手架

express server 默认生成

 

3.利用mongoose生成模型：

 

var mongoose = require('mongoose')
var Schema = mongoose.Schema;

var produtSchema = new Schema({
  "productId":{type:String},
  "productName":String,
  "salePrice":Number,
  "checked":String,
  "productNum":Number,
  "productImage":String
});

module.exports = mongoose.model('Good',produtSchema);

 4.在config的index.js中指定代理（调试时方便跨域）

 proxyTable: {
      '/goods':{
          target:'http://localhost:3000'
      },
      '/goods/*':{
        target:'http://localhost:3000'
      },
      '/users/*':{
        target:'http://localhost:3000'
      }
    }

5.分页公式：

 let skip = (page-1)*pageSize;

 let goodsModel = Goods.find(params).skip(skip).limit(pageSize);

6.在express中 get取参：req.param('productId')     post取参  req.body.productId

7.在app.js中通过app.use()拦截 （若用户未登陆，则无法使用添加购物车等功能）

8,带参数的跳转路由

 <router-link class="btn btn--m btn--red" :to="{path:'orderConfirm',query:{'addressId':selectedAddrId}}">下一步</router-link>

9.this.$route .query .orderId获得url hash

转载于:https://www.cnblogs.com/jiuyejiu/p/8459630.html