本文實(shí)例講述了Vue+Node服務(wù)器查詢Mongo數(shù)據(jù)庫(kù)及頁(yè)面數(shù)據(jù)傳遞操作。分享給大家供大家參考，具體如下：

1、利用Mongoose查詢MongoDB

通過(guò)mongoose依賴可以簡(jiǎn)捷地操作mondodb數(shù)據(jù)庫(kù)，首先安裝mongoose：

cnpm install mongoose --save

使用mongoose需要一個(gè)模式Schema，它用于定義你從mongodb中查詢的每個(gè)文檔條目的內(nèi)容，然后通過(guò)mongoose.model()生成一個(gè)模板model，模板像一個(gè)架子，將數(shù)據(jù)庫(kù)取到的每個(gè)條目中的內(nèi)容按架子的結(jié)構(gòu)填充，這樣就形成了一個(gè)便于操作、結(jié)構(gòu)條理的數(shù)據(jù)對(duì)象。通過(guò)這個(gè)對(duì)象就可以訪問(wèn)模板的相關(guān)屬性，甚至為其定義函數(shù)方法。

例如mongodb中的數(shù)據(jù)庫(kù)mall中的商品條目如圖：

（PHP Storm中有簡(jiǎn)單的mongo可視化插件。通過(guò)搜索mongo plugin安裝該插件，之后在phpstorm主菜單的view/Tool Windows中找到mongo explore開(kāi)啟mongo側(cè)邊欄工具，并連接到mongo數(shù)據(jù)庫(kù)后就能可視化查看其中數(shù)據(jù)）

針對(duì)其定義Schema，生成并導(dǎo)出商品模板goods：

//在服務(wù)端server/modules文件夾下新建goods.js文件
const mongoose=require('mongoose');  
let Schema=mongoose.Schema;      
let productSchema=new Schema({     //通過(guò)mongoose的Schema定義模板
 "productId":String,
 "productName":String,
 "salePrice":Number,
 "productImage":String
});
//導(dǎo)出模板goods
module.exports=mongoose.model('goods',productSchema);

注意：Schema中字段的名稱要與數(shù)據(jù)庫(kù)中一致，否則會(huì)因?yàn)樽侄尾黄ヅ涠斐蔁o(wú)法操作數(shù)據(jù)庫(kù)。例如我在數(shù)據(jù)庫(kù)中是productImage，而schema中是productImg，導(dǎo)致插入時(shí)丟失字段。

然后通過(guò)goods模板執(zhí)行數(shù)據(jù)庫(kù)查詢操作，如果有錯(cuò)返回err，否則返回查詢結(jié)果doc：

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

2、Node服務(wù)端查詢數(shù)據(jù)庫(kù)并返回結(jié)果

①、通過(guò)Express框架進(jìn)行數(shù)據(jù)庫(kù)連接：

//服務(wù)端server/routes/goods.js文件
//引入相關(guān)模塊
const express=require('express');
const router=express.Router();
const mongoose=require('mongoose');
const goods=require('../modules/goods')  //引入goods模板
//連接本地mongodb數(shù)據(jù)庫(kù)的mall集合
mongoose.connect('mongodb://localhost:27017/mall');
mongoose.connection.on('connected',()=>{
 console.log("mongoDB連接成功");
});
mongoose.connection.on('erroe',()=>{
 console.log("mongoDB連接出錯(cuò)");
});
mongoose.connection.on('disconnected',()=>{
 console.log("mongoDB斷開(kāi)連接");
});

②、對(duì)來(lái)自前端的get請(qǐng)求進(jìn)行響應(yīng)：查詢數(shù)據(jù)庫(kù)mall集合并將結(jié)果放在result.list中，再加上status、msg，以json形式返回res。

router.get('/',(req,res,next)=>{
 //利用goods模板調(diào)用mongooseAPI進(jìn)行數(shù)據(jù)庫(kù)查詢
 goods.find({},(err,doc)=>{    //查詢的回調(diào)函數(shù)
  "use strict";
  if (err){
   res.json({
    status:1,
    msg:err.message
   })
  }else {
   res.json({//利用res將數(shù)據(jù)返回給get請(qǐng)求
    status:0,
    msg:'',
    result:{
     count:doc.length,
     list:doc
    }
   })
  }
 })
});

最后記得暴露路由router

module.exports = router;

注：接收請(qǐng)求中的參數(shù)一般有三種方式，

• req.query多用于get請(qǐng)求發(fā)送來(lái)的數(shù)據(jù)，參數(shù)以？加在請(qǐng)求路徑的尾部，用req.query.keyname可以獲取到其中的數(shù)據(jù)。
• req.body用于接收post請(qǐng)求,post請(qǐng)求將數(shù)據(jù)放在request正文中，因此req.body.keyname可以得到其請(qǐng)求數(shù)據(jù)。
• req.params的參數(shù)包含在路徑當(dāng)中，例如請(qǐng)求路徑為http://localhost:3000/test/myparam，在服務(wù)端讀取其中的參數(shù)；

router.get('/testparams/:param', function (req, res) {
  console.log('參數(shù)為： ' + req.params.param);  //控制臺(tái)輸出路徑中的參數(shù)：myparam
})

3、跨域請(qǐng)求數(shù)據(jù)

由于本地Vue運(yùn)行在localhost:8080，而Node在localhost:3000，若要在vue中利用axios實(shí)現(xiàn)數(shù)據(jù)請(qǐng)求，則需要執(zhí)行跨域代理操作。在vue中的config/index.js文件的dev中配置一個(gè)轉(zhuǎn)發(fā)代理，當(dāng)請(qǐng)求"/goods"時(shí)，轉(zhuǎn)發(fā)到localhost:3000下的/goods：

Node服務(wù)器對(duì)get請(qǐng)求的解析過(guò)程：當(dāng)請(qǐng)求到達(dá)localhost:3000端時(shí)，Node服務(wù)器的app.js文件對(duì)請(qǐng)求路徑進(jìn)行解析，通過(guò)app.use()將/goods定位到routes/goods.js文件，在該文件中查詢數(shù)據(jù)庫(kù)的操作并返回結(jié)果：

var goods=require('./routes/goods');  //包含文件routes/goods.js
app.use('/goods',goods);        //將訪問(wèn)路徑定位到文件

4、vue進(jìn)行數(shù)據(jù)請(qǐng)求并渲染到頁(yè)面

在views/GoodsList.vue文件中利用axios對(duì)數(shù)據(jù)進(jìn)行請(qǐng)求，定義getGoodsList()方法并在掛載后調(diào)用：

 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("從服務(wù)器請(qǐng)求數(shù)據(jù)失?。?);
    }
   })
  },

通過(guò)axios的get請(qǐng)求/goods，由于上面做了跨域代理，可以向Node服務(wù)端發(fā)送請(qǐng)求，在回調(diào)函數(shù)中，response的data是響應(yīng)返回的實(shí)際內(nèi)容，我們?cè)诜?wù)端定義了返回狀態(tài)status，為0代表正常，并且將數(shù)據(jù)放在了result.list中，在頁(yè)面中對(duì)list數(shù)組進(jìn)行遍歷即可將數(shù)據(jù)渲染到頁(yè)面：

注意在遍歷每個(gè)數(shù)據(jù)對(duì)象時(shí)，其鍵名要與在mongoDB中的定義一致，如item.salePrice可以訪問(wèn)到條目的價(jià)格

<li v-for="(item,index) in goodsList">
  <div class="pic">
    <a href="#" rel="external nofollow" ><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:;" rel="external nofollow" class="btn btn--m">加入購(gòu)物車</a>
    </div>
  </div>
</li>

啟動(dòng)mongoDB、Node服務(wù)端、運(yùn)行vue-cli框架后即可在localhost:8080內(nèi)看到結(jié)果如圖：

希望本文所述對(duì)大家node.js程序設(shè)計(jì)有所幫助。