react mock数据
在前端项目中。自己模拟接口 测试前后端分离。
第一种方式:使用node的服务器模块
安装 npm install serve -g
,一定要安装在全局 方便使用命令
在存放数据的文件夹下打开命令终端
使用serve
这个命令 启动服务器
https://localhost:5000 是我们的服务器地址: (指代当前的文件夹,这样我们可以访问mock文件夹下的数据)。
在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: 'https://localhost:5000/' })); };
注意这里的路径是自定义的 app.use(proxy('/自定义路径', { target: 'https://localhost:5000/' }));
启动react项目测试:
这样在react项目中,访问带有api路径的资源会自动转到我们的服务器。
第二种方式:使用create-react-app 生成的项目文件。
在 public 文件下 模拟后台数据 在通过http请求获取数据。
因为create-react-app底层是一个node服务器。当请求一些假数据时,会到工程目录下查找对应的路由,找不到再去public目录下找,如果在public目录下找到,会把文件输出出来。
所以我们可以直接把要模拟的数据写在public目录下。
第二种方式简单,不需要额外的启用服务器。在日常练习中 比较实用。
更多web开发知识,请查阅 万博manbetx平台中文网 !!
以上就是react怎么mock数据?的详细内容,更多请关注万博manbetx平台中文网其它相关文章!