Vue+Node服務器查詢Mongo數據庫及頁面數據傳遞的示例分析

這篇文章主要為大家展示了“Vue+Node服務器查詢Mongo數據庫及頁面數據傳遞的示例分析”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“Vue+Node服務器查詢Mongo數據庫及頁面數據傳遞的示例分析”這篇文章吧。

具體如下：

1、利用Mongoose查詢MongoDB

通過mongoose依賴可以簡捷地操作mondodb數據庫，首先安裝mongoose：

cnpm install mongoose --save

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

例如mongodb中的數據庫mall中的商品條目如圖：

（PHP Storm中有簡單的mongo可視化插件。通過搜索mongo plugin安裝該插件，之后在phpstorm主菜單的view/Tool Windows中找到mongo explore開啟mongo側邊欄工具，并連接到mongo數據庫后就能可視化查看其中數據）

針對其定義Schema，生成并導出商品模板goods：

//在服務端server/modules文件夾下新建goods.js文件
const mongoose=require('mongoose');  
let Schema=mongoose.Schema;      
let productSchema=new Schema({     //通過mongoose的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()});

2、Node服務端查詢數據庫并返回結果

①、通過Express框架進行數據庫連接：

//服務端server/routes/goods.js文件
//引入相關模塊
const express=require('express');
const router=express.Router();
const mongoose=require('mongoose');
const goods=require('../modules/goods')  //引入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斷開連接");
});

②、對來自前端的get請求進行響應：查詢數據庫mall集合并將結果放在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.query多用于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
})

3、跨域請求數據

由于本地Vue運行在localhost:8080，而Node在localhost:3000，若要在vue中利用axios實現數據請求，則需要執行跨域代理操作。在vue中的config/index.js文件的dev中配置一個轉發代理，當請求"/goods"時，轉發到localhost:3000下的/goods：

Node服務器對get請求的解析過程：當請求到達localhost:3000端時，Node服務器的app.js文件對請求路徑進行解析，通過app.use()將/goods定位到routes/goods.js文件，在該文件中查詢數據庫的操作并返回結果：

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

4、vue進行數據請求并渲染到頁面

在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，由于上面做了跨域代理，可以向Node服務端發送請求，在回調函數中，response的data是響應返回的實際內容，我們在服務端定義了返回狀態status，為0代表正常，并且將數據放在了result.list中，在頁面中對list數組進行遍歷即可將數據渲染到頁面：

注意在遍歷每個數據對象時，其鍵名要與在mongoDB中的定義一致，如item.salePrice可以訪問到條目的價格

<li v-for="(item,index) in goodsList">
  <div class="pic">
    <a href="#" rel="external nofollow" ><img v-lazy="`static/${item.productImage}`" ></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">加入購物車</a>
    </div>
  </div>
</li>

啟動mongoDB、Node服務端、運行vue-cli框架后即可在localhost:8080內看到結果如圖：

以上是“Vue+Node服務器查詢Mongo數據庫及頁面數據傳遞的示例分析”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！