Vue node.js 前后端數據傳遞

1、利用Mongoose查詢MongoDB

      通過mongoose插件可以簡捷地從mongodb中獲取數據，首先安裝mongoose：

cnpm install mongoose --save  

 

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

   例如mongodb中的條目如圖：

 

 

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

var mongoose = require('mongoose');
var Schema = mongoose.Schema;

//設計集合結構（表 結構）
var productSchema = new Schema({
   "productId": {type: String},
   "productName": String,
   "salePrice": Number,
   "productImage": String,

});

// 得到了一個帶有 productId、productName、salePrice、productImage屬性的 schema 。
//  接着我們需要把這個 schema 編譯成一個 Model，並導出
//  可以在第三個參數指定Good和goods集合進行關聯
module.exports = mongoose.model('Good', productSchema);

     注意：Schema中字段的名稱要與數據庫中一致，否則會因為字段不匹配而造成無法插入數據庫。例如我在數據庫中是productImage，而schema中是productImg，導致插入時丟失字段。

 

然后通過goods模板執行數據庫查詢操作，如果有錯返回err，否則返回查詢結果doc：

 

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

 

2、nodeJS服務端查詢數據庫並返回結果

   1、通過express框架進行數據庫連接：

 

//服務端server/routes/goods.js文件 

//router是通過express擴展出來的
//所以要引入express
var express = require('express');
// 拿到express框架的路由
var router = express.Router();
var mongoose = require('mongoose');
// 加載模型表
var Goods = require('../models/goods');

// 連接數據庫db_demo
mongoose.connect('mongodb://127.0.0.1:27017/db_demo');
//如果有創建賬號密碼的話,密碼是123456，可以通過這樣的方式
// mongoose.connect('mongodb://root:123456@127.0.0.1:27017/dumall') 

//監聽數據庫有沒有連接成功 
mongoose.connection.on("connected",function () {
    console.log("MongoDB connected success")
});

mongoose.connection.on("error",function () {
    console.log("MongoDB connected fail.")
});

mongoose.connection.on("disconnected",function () {
    console.log("MongoDB connected disconnected.")
});

 

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;  

 

3、跨域請求數據

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

解決方法：

第一步：設置前端請求：vue>>>views>GoodList.vue

 

import axios from 'axios'
var url="http://localhost:3000"                       //express服務器的地址

 //this.url + '/goods' 指的就是請求后端的http://localhost:3000/goods/

axios.get(url+'/goods')                             //放數據的接口
  .then(function (response) {                         //收到的數據
    console.log(response);
    console.log(response.data);                       //展示數據（看看是否拿到，和數據長啥樣） 
    var nodeData=response.data;           
  })
  .catch(function (error) {
    console.log(error);![在這里插入圖片描述](https://img-blog.csdnimg.cn/20191013132943460.jpg)
  });

 

axios沒安裝的記得裝一下。（安裝不細說）

第二步：在express>>>routes>goods.js中設置接口

//router是通過express擴展出來的
//所以要引入express
var express = require('express');
// 拿到express框架的路由
var router = express.Router();
var mongoose = require('mongoose');
// 加載模型表
var Goods = require('../models/goods');

// 連接數據庫db_demo
mongoose.connect('mongodb://127.0.0.1:27017/db_demo');
//如果有創建賬號密碼的話,密碼是123456，可以通過這樣的方式
// mongoose.connect('mongodb://root:123456@127.0.0.1:27017/dumall') 

//監聽數據庫有沒有連接成功 
mongoose.connection.on("connected",function () {
    console.log("MongoDB connected success")
});

mongoose.connection.on("error",function () {
    console.log("MongoDB connected fail.")
});

mongoose.connection.on("disconnected",function () {
    console.log("MongoDB connected disconnected.")
});

//二級路由
router.get("/", function (req, res, next) {
    // res.send('hello,goods list');
    //操作數據庫,查詢數據庫
    Goods.find({}, function(err, doc) {
        if(err) {
            res.json({
                status: '1',
                msg: err.message
            });
        } else {
            res.json({
                status: '0',
                msg: '',
                result: {
                    count: doc.length,
                    list: doc
                }
            })
        }
    })
});

module.exports = router;

app.js(建立接口存放數據)

var goods = require('./routes/goods');
app.use('/goods', goods)//goods路由對象中的路由都會匹配到"/goods"路由后面

接着是解決跨域問題：

//跨域問題解決方面
const cors = require('cors');  
app.use(cors({  
    origin:['http://localhost:8080'],
    methods:['GET','POST'],
}));
//跨域問題解決方面
app.all('*',function (req, res, next) {
  res.header('Access-Control-Allow-Origin', 'http://localhost:8080');
  res.header('Access-Control-Allow-Headers', 'Content-Type');
  res.header('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE, OPTIONS');
　next();　
});

cors需要安裝，是一個依賴。