之前刚入手vue，做了一个简单完整的纯vue2全家桶项目。数据全部由本地json请求模拟；详情请移步这里：vue-proj-为了真正实现真正的访问数据库，demo开始使用node+express+mongoose入门，用这个来写之前vue页面的后台数据接口。本文涉及的源码：vue-node-proj基础数据模型架构以下涉及mongodb运行的前提，即配置mongodb环境；mongodb的安装配置和mongoose的基本使用可以参考http://gjincai.github。io/categories/mongodb/mongodb主要构建3个数据模型：用户信息数据结构：主要包括：用户名（手机）、密码、注册时间商品信息数据结构：主要是商品的信息，brand_id为唯一标识，brand_cate为商品分类（男装、女装……）的购物车信息数据结构：购物车商品的大部分字段与商品信息相同；用户主要通过name字段连接到用户的购物车信息；cart_num和cart_isSelect分别是商品在购物车中的数量，是否勾选选中状态。具体如下：//用户信息数据结构模型constuserSchema=newSchema({name:{type:String},pwd:{type:String},time:{type:Date,default:Date.now}})//商品数据结构模型constgoodsSchema=newSchema({brand_id:Number,brand_cate:String,brand_cateName:String,brand_status:String,brand_name:String,brand_price:Number,brand_desc:String,brand_pic:String})//购物车数据结构模型constcartsSchema=newSchema({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})connection数据库开始连接数据库。当数据库test_nodeVue不存在时，会自动创建一个该名称的mongodb数据库。constdatabase=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('databasetest_nodeVuesuccessfullyconnected')//初始化数据库initData();})初始化数据库连接数据库，当第一次连接时，数据库还是空的；连接数据库成功后，首先检查数据库是否为空；如果为空，则将初始化的商品数据（initGoods.json）插入数据库。constinitData=function(){//初始化商品goodsdb.goodsModel.find({},function(err,doc){if(err){console.log('initDataerror:'+err);}elseif(!doc.length){console.log('dbgoodsModelopenfirsttime');//初始化数据，遍历插入initGoods.map(brand=>{db.goodsModel.create(brand)})//console.log(initGoods)}else{console.log('dbopennotfirsttime');}})}数据更新updatemongoose对数据进行增删改查的基本操作。具体可以参考：源码这里讲update:parameters:testModel.update(conditionsObj,updateObj,upsert,function(){})conditionsObj：查询条件updateObj：要更新的内容upsert：当conditionsObj存在时，它将被更新；如果不存在，则根据conditionsObj创建，upsert需要根据用户名和商品id判断该商品是否已经存在于用户的购物车中；如果存在，更新它；如果不存在，则创建一个新的：//apiaddToCartapp.get('/api/goods/addToCart',function(req,res){letbrand_id=req.query.brand_idletname=req.query.name让newCart=req.querydb.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{//添加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-在client/config/index.js下配置dev选项的{proxyTable}incli:proxyTable:{//代理所有以/api开头的请求tojsonplaceholder'/api':{target:'http://127.0.0.1:8889/api',changeOrigin:true,pathRewrite:{'^/api':''//如果target中没有/api并且它是空的，然后是404；然后，例如，当请求产品详细信息时：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的官网文档：https://vuejs-templates.github.io/webpack/proxy.html
