之前刚入门vue并做好了一个简而全的纯vue2全家桶的项目，数据都是本地 json 模拟请求的；详情请移步这里：
为了真正做到数据库的真实存取，于是又开始入门了 node+express+mongoose 、并以此来为之前的vue页面写后台数据接口。
本文涉及的源码：
基本数据模型 schema
以下涉及到mongodb操作的前提，是要配置好mongodb环境的；
mongodb 的安装配置、mongoose 的基本使用，请参考
mongodb 主要建了3个数据模型：
用户信息数据结构：主要包含：用户名(手机)、密码、注册时间
商品信息数据结构：主要是该商品的信息，
brand_id是唯一标识、brand_cate是商品分类(男装、女装...)购物车信息数据结构：购物车商品的大部分字段跟商品信息相同；主要通过
详情如下：name字段将用户与该用户购物车信息联系起来；cart_num、cart_isSelect分别为该商品购物车中的数量、是否打钩选中状态。
// 用户信息的数据结构模型const userSchema = new Schema({ name: {type: String}, pwd: {type: String}, time: {type: Date, default: Date.now}})// 商品的数据结构模型const goodsSchema = new Schema({ brand_id: Number, brand_cate: String, brand_cateName: String, brand_status: String, brand_name: String, brand_price: Number, brand_desc: String, brand_pic: String})// 购物车的的数据结构模型const cartsSchema = new Schema({ name: String, brand_id: Number, brand_cate: String, brand_name: String, brand_price: Number, brand_desc: String, brand_pic: String, cart_num: Number, cart_isSelect: Boolean}) 连接数据库
开始连接数据库，当数据库 test_nodeVue 不存在时，会自动创建以此为名字的mongodb数据库。
const database = mongoose.connect('mongodb://127.0.0.1:27017/test_nodeVue')database.connection.on('error', function(error){ console.log('数据库test_nodeVue连接失败：' + error) return})database.connection.once('open', function(){ console.log('数据库test_nodeVue连接成功') // 初始化数据库 initData();}) 初始化数据库
连接数据库，当首次连接的时候、数据库还是空的；
当成功连接上数据库的时候，先查询数据库是否为空；若空则往数据库里插入初始化的商品数据（initGoods.json）。const initData = function () { // 初始化商品goods db.goodsModel.find({}, function(err, doc){ if (err) { console.log('initData出错：' + err); } else if (!doc.length) { console.log('db goodsModel open first time'); // 初始化数据，遍历插入 initGoods.map(brand => { db.goodsModel.create(brand) }) // console.log(initGoods) } else { console.log('db open not first time'); } })} 数据的更新 update
mongoose 数据增删查改的基本操作，详情参考：
这里主要说一下update:参数：testModel.update(conditionsObj, updateObj, upsert, function(){})conditionsObj：查询条件updateObj：需要更新的内容upsert：当conditionsObj存在，则更新；不存在，则以conditionsObj、upsert为基础创建 eg：加入购物车的时候，需要根据用户名及商品id判断该商品是否已经存在于用户的购物车里面；若存在，则更新；不存在，则新建：
// api addToCartapp.get('/api/goods/addToCart', function (req, res) { let brand_id = req.query.brand_id let name = req.query.name let newCart = req.query db.cartsModel.update({brand_id: brand_id, name: name}, {$set:newCart}, {upsert:true}, function(err){ if (err) { console.log('加入购物车失败：' + err); res.json({code: 700, msg:'加入购物车失败：' + err}) return } else { // add res.json({code: 200, msg:'加入购物车成功'}) return } })}) vue-cli 跨域请求配置
前端vue项目的开发环境dev地址: localhost:8080,
127.0.0.1:8889,(本地开启的mongodb服务的地址是: 127.0.0.1:27017) 当前端与后台进行数据交互时，自然就出现跨域问题。
通过在前端修改 vue-cli 的配置可解决：vue-cli中的client/config/index.js 下配置 dev选项的 {proxyTable}: proxyTable: { // proxy all requests starting with /api to jsonplaceholder '/api': { target: 'http://127.0.0.1:8889/api', changeOrigin: true, pathRewrite: { '^/api': '' // 若target中没有/api、这里又为空，则404； } }} 然后，eg 在请求商品详情时:
this.$http({ url: '/api/goods/detail', method: 'GET', params: { brand_id: this.$route.params.id }}) .then((res) => { // doSomething }) 这里的请求url /api/goods/detail、对应的真实请求地址是 http://127.0.0.1:8889/api/goods/detail。
proxy的官网文档: