react mock数据

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

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

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

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

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

 http://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: 'http://localhost:5000/' }));
};

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

启动react项目测试：

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

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

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

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

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

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

更多web开发知识，请查阅 HTML中文网 ！！