前言
我们都知道在实际的开发阶段，后端接口开发是和前端开发同步进行，甚至迟于前端的进度，这就直就导致前端需要等待后端接口的时间。
这种情况就严重导致前端开发缓慢,那这时候前端的开发人员只能写静态模拟数据。
- 使用静态的json来模拟数据
这种情况是按照既定的数据格式（接口文档等），自己提供静态的JSON数据，用相关工具做接口来获取这些数据。该方法仅仅使用get请求。局限性还是很大的。
- 模拟动态接口（Mock）
这种情况是用一个 web 框架，按照既定的接口和数据结构的要求（接口文档），自己模拟后端接口的功能，让前端项目能顺利跑起来。这样就可以很方便的模拟前端开发的业务逻辑。
技能介绍
这两项技能官网讲述的很详细，可以去官网学习。本篇主要是结合两项技能来实现一个Web框架实现动态模拟后端接口为主。
react创建项目这里就不在多说了。如果小伙伴有不清楚的，可以共同学习一下react+webpack入门指南来自己手动创建一个react基础项目
项目
项目主要是使用express+mock整合来实现的动态模拟接口。
目录结构
85296DCB-BAD7-41FA-A5D3-19D83B10A618.png
首先需要安装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)
这就实现了一个简单的express服务，在浏览器输入http://localhost:3001 就可以看到页面加载出 hello world
那么怎么启动这个服务呢？
在当前项目目录执行
node mock/server.js
因为我们使用npm管理包，在package.json的scripts加入
"mock": "node ./mock/server.js"
只需要执行 npm run mock 启动服务就可以了哦~~
E61620D5-1CA6-4837-BCCD-DD6A8EF30203.png
接下来就是引入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);
//调用mock方法模拟数据
var data = Mock.mock({
// 属性 list 的值是一个数组，其中含有 1 到 10 个元素
'list|1-10': [{
// 属性 id 是一个自增数，起始值为 1，每次增 1
'id|+1': 1
}]
}
);
return res.json(data);
})
module.exports = router;
这时候修改server.js文件的内容，代码如下
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数据列表
8E70E16D-54C2-493F-BDFB-F289B0DB756A.png
在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)
})
想必今经验丰富的小伙伴，这时候会问到这请求不是跨域了吗？
恭喜你，非常对哦~
这时候我们需要在webpack.config.js的devServer加入
'/api':{
target:"http://localhost:3001",
secure: false
}
这时候重启react项目的服务器，点击按钮发送请求，就可以成功输出接口数据。
3D5023C4-1836-4898-983E-59B405746C43.png
上面仅仅是实现了GET请求，下面介绍实现POST请求
修改server.js
var express = require("express")
var app = express();
var bodyParser = require('body-parser');
app.use(bodyParser.json()); //body-parser 解析json格式数据
app.use(bodyParser.urlencoded({ //此项必须在 bodyParser.json 下面,为参数编码
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)
接收参数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)
})
刷新项目。点击按钮发送请求，就可以成功输出接口数据。
总结
实现没有什难度，主要需要注意跨域的问题哦~
网友评论