前言
我們都知道在實際的開發(fā)階段请契，后端接口開發(fā)是和前端開發(fā)同步進(jìn)行，甚至遲于前端的進(jìn)度爽锥，這就直就導(dǎo)致前端需要等待后端接口的時間。
這里小編推薦一個福利臣樱，更多精彩內(nèi)容請點擊鏈接腮考，點擊這里
這種情況就嚴(yán)重導(dǎo)致前端開發(fā)緩慢,那這時候前端的開發(fā)人員只能寫靜態(tài)模擬數(shù)據(jù)。
- 使用靜態(tài)的json來模擬數(shù)據(jù)
這種情況是按照既定的數(shù)據(jù)格式（接口文檔等）踩蔚，自己提供靜態(tài)的JSON數(shù)據(jù)，用相關(guān)工具做接口來獲取這些數(shù)據(jù)寂纪。該方法僅僅使用get請求。局限性還是很大的孝冒。
- 模擬動態(tài)接口（Mock）
這種情況是用一個 web 框架拟杉，按照既定的接口和數(shù)據(jù)結(jié)構(gòu)的要求（接口文檔），自己模擬后端接口的功能搬设，讓前端項目能順利跑起來。這樣就可以很方便的模擬前端開發(fā)的業(yè)務(wù)邏輯拿穴。
本篇比較基礎(chǔ)，如果需要react項目從零打建自己的腳手架請看下邊文章
react+webpack4+react-router5+react-loadable+mobx系列文章
react+webpack4搭建前端項目（一）基礎(chǔ)項目搭建
react+webpack4搭建前端項目（二）react全家桶的使用
react+webpack4搭建前端項目（三）打包優(yōu)化
技能介紹
這兩項技能官網(wǎng)講述的很詳細(xì)球凰，可以去官網(wǎng)學(xué)習(xí)。本篇主要是結(jié)合兩項技能來實現(xiàn)一個Web框架實現(xiàn)動態(tài)模擬后端接口為主呕诉。
react創(chuàng)建項目這里就不在多說了。如果小伙伴有不清楚的贴硫，可以共同學(xué)習(xí)一下react+webpack入門指南來自己手動創(chuàng)建一個react基礎(chǔ)項目
項目
項目主要是使用express+mock整合來實現(xiàn)的動態(tài)模擬接口伊者。
目錄結(jié)構(gòu)
首先需要安裝express
npm install --save express
在mock文件加下新建server.js
代碼如下
var express = require("express")
var app = express();
app.get('/', function(req, res) {
res.send('hello world');
});
app.listen(3001)
這就實現(xiàn)了一個簡單的express服務(wù)，在瀏覽器輸入http://localhost:3001 就可以看到頁面加載出 hello world
那么怎么啟動這個服務(wù)呢贪绘？
在當(dāng)前項目目錄執(zhí)行
node mock/server.js
因為我們使用npm管理包央碟，在package.json的scripts加入
"mock": "node ./mock/server.js"
只需要執(zhí)行 npm run mock 啟動服務(wù)就可以了哦~~
接下來就是引入mockJs ,首先安裝mockjs
npm install --save-dev mockjs
我們在mock的目錄下面新建test.js加入代碼，mock的語法這里不說了亿虽。請看mock文檔的講述，有很多知識點粘秆。
var Mock = require("mockjs")
var express = require("express")
var router = express.Router();
router.use("/profile",function (req,res) {
console.log(req.body);
//調(diào)用mock方法模擬數(shù)據(jù)
var data = Mock.mock({
// 屬性 list 的值是一個數(shù)組收毫，其中含有 1 到 10 個元素
'list|1-10': [{
// 屬性 id 是一個自增數(shù)，起始值為 1此再，每次增 1
'id|+1': 1
}]
}
);
return res.json(data);
})
module.exports = router;
這時候修改server.js文件的內(nèi)容，代碼如下
var express = require("express")
var app = express();
var router = express.Router();
app.get('/', function(req, res) {
res.send('hello world');
});
router.use("/test",require('./test'));
app.use("/api",router)
app.listen(3001)
在瀏覽器的輸入http://localhost:3001/api/test/profile即可看到輸出的JSON數(shù)據(jù)列表
在React中使用
fetch("/api/test/profile",{
method:"GET",
credentials: 'include'
}).then((response)=>{
console.log(response);
return response.json()
}).then((response)=>{
console.log(response)
}).catch((error)=>{
console.log(error)
})
想必今經(jīng)驗豐富的小伙伴摘符，這時候會問到這請求不是跨域了嗎策吠？
恭喜你，非常對哦~
這時候我們需要在webpack.config.js的devServer加入
'/api':{
target:"http://localhost:3001",
secure: false
}
這時候重啟react項目的服務(wù)器猴抹，點擊按鈕發(fā)送請求，就可以成功輸出接口數(shù)據(jù)炉菲。
上面僅僅是實現(xiàn)了GET請求坤溃，下面介紹實現(xiàn)POST請求
修改server.js
var express = require("express")
var app = express();
var bodyParser = require('body-parser');
app.use(bodyParser.json()); //body-parser 解析json格式數(shù)據(jù)
app.use(bodyParser.urlencoded({ //此項必須在 bodyParser.json 下面,為參數(shù)編碼
extended: true
}));
var router = express.Router();
app.get('/', function(req, res) {
res.send('hello world');
});
router.use("/test",require('./test'));
app.use("/api",router)
app.listen(3001)
接收參數(shù)req.body
修改react的請求
const params = {
id: "id",
}
fetch("/api/test/profile", {
method: "POST",
credentials: 'include',
headers: {"Content-Type": "application/json"},
body: JSON.stringify(params)
}).then((response) => {
console.log(response);
return response.json()
}).then((response) => {
console.log(response)
}).catch((error) => {
console.log(error)
})
刷新項目。點擊按鈕發(fā)送請求祠饺，就可以成功輸出接口數(shù)據(jù)汁政。
總結(jié)
實現(xiàn)沒有什難度道偷，主要需要注意跨域的問題哦~
