Vue nodejs商城项目- 前后端数据传递

1、利用Mongoose查询MongoDB

        通过mongoose插件可以简捷地从mondodb中获取数据，首先安装mongoose：

1. cnpm install mongoose --save  

    使用mongoose需要一个模式Schema，它用于定义你从mongodb中查询的每个文档条目的内容，然后通过mongoose.model()生成一个模板model，模板像一个架子，将数据库取到的每个条目中的内容按架子的结构填充，这样就形成了一个便于操作、结构条理的数据对象。通过这个对象就可以访问模板的相关属性，甚至为其定义函数方法。

    例如mongodb中的条目如图：

   

    针对其定义Schema，生成并导出商品模板goods：

1. //服务端server/modules/goods.js文件  
2. const mongoose=require('mongoose');  
3. let Schema=mongoose.Schema;  
4.     
5. let productSchema=new Schema({  
6.   "productId":String,  
7.   "productName":String,  
8.   "salePrice":Number,  
9.   "productImage":String  
10. });  
11. //导出模板goods  
12. module.exports=mongoose.model('goods',productSchema);  

    注意：Schema中字段的名称要与数据库中一致，否则会因为字段不匹配而造成无法插入数据库。例如我在数据库中是productImage，而schema中是productImg，导致插入时丢失字段。

然后通过goods模板执行数据库查询操作，如果有错返回err，否则返回查询结果doc：

1. goods.find({},(err,doc)=>{callback()});  

2、nodeJS服务端查询数据库并返回结果

    1、通过express框架进行数据库连接：

1. //服务端server/routes/goods.js文件  
2. //包含相关模块  
3. const express=require('express');  
4. const router=express.Router();  
5. const mongoose=require('mongoose');  
6. const goods=require('../modules/goods')  
7.     
8. //连接本地mongodb数据库的mall集合  
9. mongoose.connect('mongodb://localhost:27017/mall');  
10. mongoose.connection.on('connected',()=>{  
11.   console.log("mongoDB连接成功");  
12. });  
13. mongoose.connection.on('erroe',()=>{  
14.   console.log("mongoDB连接出错");  
15. });  
16. mongoose.connection.on('disconnected',()=>{  
17.   console.log("mongoDB断开连接");  
18. });  

   2、对来自前端的get请求进行响应：进行数据库查询并将结果放在result.list中，在加上status、msg，以json形式返回res。

1. router.get('/',(req,res,next)=>{  
2.   //利用goods模板调用mongooseAPI进行数据库查询  
3.   goods.find({},(err,doc)=>{  
4.     "use strict";  
5.     if (err){  
6.       res.json({  
7.         status:1,  
8.         msg:err.message  
9.       })  
10.     }else {  
11.       res.json({//利用res将数据返回给get请求  
12.         status:0,  
13.         msg:'',  
14.         result:{  
15.           count:doc.length,  
16.           list:doc  
17.         }  
18.       })  
19.     }  
20.   })  
21. });  

    最后记得暴露路由router

1. module.exports = router;  

   注：接收请求参数req一般有三种方式，req.query多用于get请求发送来的数据，get请求将数据以？加在请求路径的尾部，用req.query.keyname可以获取到其中的数据。

    req.body用于接收post请求,post请求将数据放在request正文中，因此req.body.keyname可以得到其请求数据。

    req.params的参数包含在路径当中，例如请求路径为http://localhost:3000/test/myparam，服务端定义其中的参数为

1. router.get('/testparams/:param', function (req, res) {  
2.     console.log('参数为： ' + req.params.param);  
3. })  

    则控制台输出  参数为：myparam

      

3、跨域请求数据

       由于本地vue运行在localhost:8080，而nodejs在localhost:3000，若要在vue中利用axios实现数据请求，则需要执行跨域代理操作。在vue中的config/index.js文件的dev中配置一个转发代理，当请求"/goods"时，转发到localhost:3000下的/goods：

        当get请求到达localhost:3000端时，nodeJS文件中的app.js对请求路径进行解析，使用app.use()将/goods定位到routes/goods.js文件，在该文件中执行第二步查询数据库并返回结果：

1. var goods=require('./routes/goods');  
2. app.use('/goods',goods);  

4、vue进行数据请求并渲染到页面

       在views/GoodsList.vue文件中利用axios对数据进行请求，定义getGoodsList()方法并在挂载后调用：

1.   mounted:function (){  
2.     this.getGoodsList();  
3.   },  
4.   methods:{  
5.     getGoodsList(){  
6.       axios.get("/goods").then(response =>{  
7.         let res=response.data;  
8.         if(res.status==0){  
9.           this.goodsList=res.result.list;  
10.         }else{  
11.           console.log("从服务器请求数据失败！");  
12.         }  
13.       })  
14.     },  

       通过axios的get请求/goods，由于上面做了跨域代理，可以像nodeJS服务端发送请求，在回调函数中，response的data是响应返回的实际内容，我们在服务端定义了返回状态status，为0代表正常，并且将数据放在了result.list中，在页面中对list数组进行遍历即可将数据渲染到页面：

        注意在遍历每个数据对象时，其键名要与在mongoDB中的定义一致，如item.salePrice可以访问到条目的价格

1.                                 <li v-for="(item,index) in goodsList">  
2.                                     <div class="pic">  
3.                                         <a href="#"><img v-lazy="`static/${item.productImage}`" alt=""></a>  
4.                                     </div>  
5.                                     <div class="main">  
6.                                         <div class="name">{{item.productName}}</div>  
7.                                         <div class="price">{{item.salePrice}}</div>  
8.                                         <div class="btn-area">  
9.                                             <a href="javascript:;" class="btn btn--m">加入购物车</a>  
10.                                         </div>  
11.                                     </div>  
12.                                 </li>      

        启动mongoDB、nodeJS服务端、运行vue-cli框架后即可在localhost:8080内看到结果如图：