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

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

轉載于:https://www.cnblogs.com/haonanZhang/p/8260290.html

總結

以上是生活随笔為你收集整理的node、Mongo项目如何前后端分离提供接口给前端的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。