1、利用Mongoose查詢MongoDB
通過mongoose插件可以簡捷地從mondodb中獲取數據，首先安裝mongoose：
-
cnpm install mongoose --save
使用mongoose需要一個模式Schema，它用於定義你從mongodb中查詢的每個文檔條目的內容，然后通過mongoose.model()生成一個模板model，模板像一個架子，將數據庫取到的每個條目中的內容按架子的結構填充，這樣就形成了一個便於操作、結構條理的數據對象。通過這個對象就可以訪問模板的相關屬性，甚至為其定義函數方法。
例如mongodb中的條目如圖：
針對其定義Schema，生成並導出商品模板goods：
-
//服務端server/modules/goods.js文件
-
const mongoose=require('mongoose');
-
let Schema=mongoose.Schema;
-
-
let productSchema=new Schema({
-
"productId":String,
-
"productName":String,
-
"salePrice":Number,
-
"productImage":String
-
});
-
//導出模板goods
-
module.exports=mongoose.model('goods',productSchema);
注意：Schema中字段的名稱要與數據庫中一致，否則會因為字段不匹配而造成無法插入數據庫。例如我在數據庫中是productImage，而schema中是productImg，導致插入時丟失字段。
然后通過goods模板執行數據庫查詢操作，如果有錯返回err，否則返回查詢結果doc：
-
goods.find({},(err,doc)=>{callback()});
1、通過express框架進行數據庫連接：
-
//服務端server/routes/goods.js文件
-
//包含相關模塊
-
const express=require('express');
-
const router=express.Router();
-
const mongoose=require('mongoose');
-
const goods=require('../modules/goods')
-
-
//連接本地mongodb數據庫的mall集合
-
mongoose.connect('mongodb://localhost:27017/mall');
-
mongoose.connection.on('connected',()=>{
-
console.log("mongoDB連接成功");
-
});
-
mongoose.connection.on('erroe',()=>{
-
console.log("mongoDB連接出錯");
-
});
-
mongoose.connection.on('disconnected',()=>{
-
console.log("mongoDB斷開連接");
-
});
2、對來自前端的get請求進行響應：進行數據庫查詢並將結果放在result.list中，在加上status、msg，以json形式返回res。
-
router.get('/',(req,res,next)=>{
-
//利用goods模板調用mongooseAPI進行數據庫查詢
-
goods.find({},(err,doc)=>{
-
"use strict";
-
if (err){
-
res.json({
-
status:1,
-
msg:err.message
-
})
-
}else {
-
res.json({//利用res將數據返回給get請求
-
status:0,
-
msg:'',
-
result:{
-
count:doc.length,
-
list:doc
-
}
-
})
-
}
-
})
-
});
最后記得暴露路由router
-
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，服務端定義其中的參數為
-
router.get('/testparams/:param', function (req, res) {
-
console.log('參數為： ' + req.params.param);
-
})
則控制台輸出 參數為：myparam
由於本地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文件，在該文件中執行第二步查詢數據庫並返回結果：
-
var goods=require('./routes/goods');
-
app.use('/goods',goods);
在views/GoodsList.vue文件中利用axios對數據進行請求，定義getGoodsList()方法並在掛載后調用：
-
mounted:function (){
-
this.getGoodsList();
-
},
-
methods:{
-
getGoodsList(){
-
axios.get("/goods").then(response =>{
-
let res=response.data;
-
if(res.status==0){
-
this.goodsList=res.result.list;
-
}else{
-
console.log("從服務器請求數據失敗！");
-
}
-
})
-
},
通過axios的get請求/goods，由於上面做了跨域代理，可以像nodeJS服務端發送請求，在回調函數中，response的data是響應返回的實際內容，我們在服務端定義了返回狀態status，為0代表正常，並且將數據放在了result.list中，在頁面中對list數組進行遍歷即可將數據渲染到頁面：
注意在遍歷每個數據對象時，其鍵名要與在mongoDB中的定義一致，如item.salePrice可以訪問到條目的價格
-
<li v-for="(item,index) in goodsList">
-
<div class="pic">
-
<a href="#"><img v-lazy="`static/${item.productImage}`" alt=""></a>
-
</div>
-
<div class="main">
-
<div class="name">{{item.productName}}</div>
-
<div class="price">{{item.salePrice}}</div>
-
<div class="btn-area">
-
<a href="javascript:;" class="btn btn--m">加入購物車</a>
-
</div>
-
</div>
-
</li>
啟動mongoDB、nodeJS服務端、運行vue-cli框架后即可在localhost:8080內看到結果如圖：
