react项目整合express+mock实现模拟接口数据

前言

我们都知道在实际的开发阶段,后端接口开发是和前端开发同步进行,甚至迟于前端的进度,这就直就导致前端需要等待后端接口的时间。

这种情况就严重导致前端开发缓慢,那这时候前端的开发人员只能写静态模拟数据。

  • 使用静态的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)
})

刷新项目。点击按钮发送请求,就可以成功输出接口数据。

总结

实现没有什难度,主要需要注意跨域的问题哦~

推荐文章
react-native解决键盘自适应
react-native实现的一款iOS,Android的菜谱客户端
移动端调试神器vConsole



作者:小猿_Luck_Boy
链接:https://www.jianshu.com/p/ac23664982b2
来源:简书
简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值