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