前言
我們都知道在實(shí)際的開(kāi)發(fā)階段，后端接口開(kāi)發(fā)是和前端開(kāi)發(fā)同步進(jìn)行，甚至遲于前端的進(jìn)度，這就直就導(dǎo)致前端需要等待后端接口的時(shí)間。
這里小編推薦一個(gè)福利，更多精彩內(nèi)容請(qǐng)點(diǎn)擊鏈接，點(diǎn)擊這里
這種情況就嚴(yán)重導(dǎo)致前端開(kāi)發(fā)緩慢,那這時(shí)候前端的開(kāi)發(fā)人員只能寫(xiě)靜態(tài)模擬數(shù)據(jù)。
- 使用靜態(tài)的json來(lái)模擬數(shù)據(jù)
這種情況是按照既定的數(shù)據(jù)格式（接口文檔等），自己提供靜態(tài)的JSON數(shù)據(jù)，用相關(guān)工具做接口來(lái)獲取這些數(shù)據(jù)。該方法僅僅使用get請(qǐng)求。局限性還是很大的。
- 模擬動(dòng)態(tài)接口（Mock）
這種情況是用一個(gè) web 框架，按照既定的接口和數(shù)據(jù)結(jié)構(gòu)的要求（接口文檔），自己模擬后端接口的功能，讓前端項(xiàng)目能順利跑起來(lái)。這樣就可以很方便的模擬前端開(kāi)發(fā)的業(yè)務(wù)邏輯。
本篇比較基礎(chǔ)，如果需要react項(xiàng)目從零打建自己的腳手架請(qǐng)看下邊文章
react+webpack4+react-router5+react-loadable+mobx系列文章
react+webpack4搭建前端項(xiàng)目（一）基礎(chǔ)項(xiàng)目搭建
react+webpack4搭建前端項(xiàng)目（二）react全家桶的使用
react+webpack4搭建前端項(xiàng)目（三）打包優(yōu)化
技能介紹
這兩項(xiàng)技能官網(wǎng)講述的很詳細(xì)，可以去官網(wǎng)學(xué)習(xí)。本篇主要是結(jié)合兩項(xiàng)技能來(lái)實(shí)現(xiàn)一個(gè)Web框架實(shí)現(xiàn)動(dòng)態(tài)模擬后端接口為主。
react創(chuàng)建項(xiàng)目這里就不在多說(shuō)了。如果小伙伴有不清楚的，可以共同學(xué)習(xí)一下react+webpack入門(mén)指南來(lái)自己手動(dòng)創(chuàng)建一個(gè)react基礎(chǔ)項(xiàng)目
項(xiàng)目
項(xiàng)目主要是使用express+mock整合來(lái)實(shí)現(xiàn)的動(dòng)態(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)
這就實(shí)現(xiàn)了一個(gè)簡(jiǎn)單的express服務(wù)，在瀏覽器輸入http://localhost:3001 就可以看到頁(yè)面加載出 hello world
那么怎么啟動(dòng)這個(gè)服務(wù)呢？
在當(dāng)前項(xiàng)目目錄執(zhí)行
node mock/server.js
因?yàn)槲覀兪褂胣pm管理包，在package.json的scripts加入
"mock": "node ./mock/server.js"
只需要執(zhí)行 npm run mock 啟動(dòng)服務(wù)就可以了哦~~
接下來(lái)就是引入mockJs ,首先安裝mockjs
npm install --save-dev mockjs
我們?cè)趍ock的目錄下面新建test.js加入代碼，mock的語(yǔ)法這里不說(shuō)了。請(qǐng)看mock文檔的講述，有很多知識(shí)點(diǎn)。
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 的值是一個(gè)數(shù)組，其中含有 1 到 10 個(gè)元素
'list|1-10': [{
// 屬性 id 是一個(gè)自增數(shù)，起始值為 1，每次增 1
'id|+1': 1
}]
}
);
return res.json(data);
})
module.exports = router;
這時(shí)候修改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)驗(yàn)豐富的小伙伴，這時(shí)候會(huì)問(wèn)到這請(qǐng)求不是跨域了嗎？
恭喜你，非常對(duì)哦~
這時(shí)候我們需要在webpack.config.js的devServer加入
'/api':{
target:"http://localhost:3001",
secure: false
}
這時(shí)候重啟react項(xiàng)目的服務(wù)器，點(diǎn)擊按鈕發(fā)送請(qǐng)求，就可以成功輸出接口數(shù)據(jù)。
上面僅僅是實(shí)現(xiàn)了GET請(qǐng)求，下面介紹實(shí)現(xiàn)POST請(qǐng)求
修改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({ //此項(xiàng)必須在 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的請(qǐng)求
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)
})
刷新項(xiàng)目。點(diǎn)擊按鈕發(fā)送請(qǐng)求，就可以成功輸出接口數(shù)據(jù)。
總結(jié)
實(shí)現(xiàn)沒(méi)有什難度，主要需要注意跨域的問(wèn)題哦~
