node接口編寫，vue-cli代理接口方法

　　通常前端使用的MocK 數據的方法，去模擬假的數據，但是如果有node Mongodb 去寫數據的話就不需要在去mock 數據了，具體的方法如下。

首先啟動 mongodb、node、以及前端 項目。這裏用加載商品列表做一個舉例

1、在node項目創建

在node的項目中，創建文件夾： model。在model中創建 goods.js。在router 文件夾下創建 goods 的路由 goods.js。

2、模板goods.js編寫（model下邊的goods.js）

var mongoose = require(‘mongoose‘
 
);
// 引入商品模型
var Schema = mongoose.Schema;


// 定義商品模型
var productSchema = new Schema({
    "productId": String,
    "productName": String,
    "salePrice": Number,
    "productPic": String,
    "checked": String
});

/**
* 輸出 good 模型
* 有一個問題：在這裏輸出的是 good 但是數據庫建立的一定要加s，代碼會默認取數據庫找 s 的那張表
*/
module.exports 
 
= mongoose.model(‘Good‘, productSchema);

3、在項目的app.js中配置 路由。

// 首先導入 goods 的路由文件
var goods = require(‘./routes/goods‘);

// 然後使用路由

// 新增路由商品，這個文件中的都是一級路由,這個路由到router下邊的good,然後router那個good二級路由到 model 下邊的goods
app.use(‘/goods‘, goods);

4、路由goods的編寫。首先我們先確定連接數據庫成功，然後再去數據庫裏面查找數據寫接口

var express = require(‘express
 
‘);
var router = express.Router();

var mongoose = require(‘mongoose‘);
var Goods = require(‘../model/goods‘);

/* 連接數目庫. */
mongoose.connect(‘mongodb://127.0.0.1:27017/mall‘, {
    useMongoClient: true
});

// 連接成功回調監聽
mongoose.connection.on("connected", function(){
    console.log("mongodb connected success");
});

// 連接失敗回調監聽
mongoose.connection.on("error", function(){
    console.log("mongodb connected faile");
});

// 連接斷開回調監聽
mongoose.connection.on("disconnected", function(){
    console.log("mongodb connected disconnected");
});


/**
* app.js 下邊寫的路由是一極路由，在這裏寫的路由是二級路由
* 例如：app.js 裏面寫的 /goods 這是一個路由地址了，下邊寫的 / 就是 /goods/ 默認加載的
* 這段代碼的意思是：訪問 http://1·27.0.0.1:3000/goods/  其實就相當於是 Node 在這個地址裏面 把前端想要的數據返回出來，這樣前端調用這個地址就相當於是接口了
* 這塊的路由就是 直接地址到/goods 然後再到 /
*/
router.get("/", function(req, res, next){
    res.send("數據庫連接成功");
});


module.exports = router;

這個時候重啟一下 node 的服務，可以先關掉前便開啟的服務，然後重啟。

打開應該是

http://localhost:3000/

然後輸入

http://localhost:3000/goods/

如果頁面輸出：數據庫連接成功。則代表數據庫連接成功了。這個時候便可以寫我們的業務邏輯了，還是在router 下邊的 goods.js中，整體代碼應該是

/**
* app.js 下邊寫的路由是一極路由，在這裏寫的路由是二級路由
* 例如：app.js 裏面寫的 /goods 這是一個路由地址了，下邊寫的 / 就是 /goods/ 默認加載的
*/
router.get("/", function(req, res, next){
    
    /**
    * 連接請求處理數據 0 代表成功，1代表失敗
    * doc 就是返回的數據
    */ 

    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
                }
            });
        }
    });
});

這樣重新啟動node 然後輸入地址變會出現，從數據庫查找的 商品的 數據。

vue-cli代理接口方法

　　這個時候我們的商品數據的後端代碼就差不多寫完了；接下來就是把 接口放到前端去。因為我們的訪問的還是 本地的接口，前後端項目又分離，這樣前端訪問這個接口其實還是牽扯到跨域的問題的，這樣就需要在前端的項目中設置代理，來訪問到接口了。

具體方法為：

用vue的項目做例子，把以前的mock數據的代碼都去掉，在新的vue常見的項目中的config 下邊的 index.js中 找到 dev，添加

// 設置代理
    proxyTable: {
       ‘/goods‘:{
         target:"http://localhost:3000",//設置你調用的接口域名和端口號 別忘了加http  相當於是 訪問/goods的時候，默認前邊的端口就是 target 裏面寫的
       }
    }

意思就是當我們在項目中訪問 goods這個接口的時候，自動代理到

http://localhost:3000/goods/

重新啟動項目

npm run dev

看是否看到新的數據，整體就完了。

node項目如何前後端分離提供接口給前端