react怎么mock数据?

react mock数据

在前端项目中。自己模拟接口 测试前后端分离。

第一种方式:使用node的服务器模块

安装 npm install serve -g,一定要安装在全局 方便使用命令

在存放数据的文件夹下打开命令终端

使用serve这个命令 启动服务器

1.png

 http://localhost:5000 是我们的服务器地址: (指代当前的文件夹,这样我们可以访问mock文件夹下的数据)。

2.png

在react中配置服务器数据的获取

1、在react项目根路径下执行: npm install http-proxy-middleware

2、在src文件夹根目录下,创建 setupProxy.js 文件,文件内容为:

const proxy = require('http-proxy-middleware');
 
module.exports = function(app) {
  app.use(proxy('/api', { target: 'http://localhost:5000/' }));
};

注意这里的路径是自定义的 app.use(proxy('/自定义路径', { target: 'http://localhost:5000/' }));

启动react项目测试:

3.png

这样在react项目中,访问带有api路径的资源会自动转到我们的服务器。

第二种方式:使用create-react-app 生成的项目文件。

在 public 文件下 模拟后台数据 在通过http请求获取数据。

因为create-react-app底层是一个node服务器。当请求一些假数据时,会到工程目录下查找对应的路由,找不到再去public目录下找,如果在public目录下找到,会把文件输出出来。

所以我们可以直接把要模拟的数据写在public目录下。

4.png

5.png

第二种方式简单,不需要额外的启用服务器。在日常练习中 比较实用。

更多web开发知识,请查阅 HTML中文网 !!

以上就是react怎么mock数据?的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » React 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏