react, webpack4,json-server, 模拟前端数据(一、GET)

环境：react脚手架创建的目录，暴露的webpack

1 全局且项目目录下载json-server,

npm i json-server -g
yarn add json-server
复制代码

2 在webpackDevServer.config.js中修改

    public: allowedHost,
-    proxy,
+    proxy: { //代理服务器
+      '/api/*': {
+          target: {
+              protocol: 'http',
+              host: 'localhost',
+              port: 9999
+          },
+          changeOrigin: true,
+          secure: true
+      }
+},
    before(app, server) {
复制代码

3 在src目录外创建一个mock文件夹 mock/db.js

var _ = require('lodash')
const config = {
  'getSide': getSide,
  'aaaa':aaaa,
}

module.exports = function () {
  let data = {};

  for (let c in config) {
      if (config.hasOwnProperty(c)) {
          data[c] = config[c]();
      }
  }
  return data;
};

// 返回的数据 （具体结构可以自己调整）
function getSide() {
  return {
      status: 0,
      errno: 0,
      data: {
          banner: _.times(3, function (n) {
              return {
                  auto_id: "10" + n,
                  class: "banner",
                  stime: "2016-12-01",
                  etime: "2018-01-31"
      };
          })
      }
  };
}


// 返回的数据 （具体结构可以自己调整）
function aaaa() {
  return {
      status: 0,
      errno: 0,
      data: [
        {
          key: 1,
          mockAction: "试听",
          mockContent: "摩天大楼太稀有",
          mockTitle: "Butter-fly",
        },
        {
          key: 2,
          mockAction: "试听",
          mockContent: "摩天大楼太稀有",
          mockTitle: "Butter-fly",
        }
      ]
  };
}
复制代码

mock/routes.js

{
    "/api/*": "/$1", 
  }
复制代码

4 修改package.json

  "scripts": {
    "start": "node scripts/start.js",
    "build": "node scripts/build.js",
    "test": "node scripts/test.js",
+    "mock": "json-server mock/db.js --routes mock/routes.json --port 9999"
  },
复制代码

开启服务： npm run mock

5 调用模拟数据 这个跟正常代码写法一样，模拟时打开模拟数据服务器， 不打开时不会被模拟

 componentDidMount(){
   const that = this;  
   axios.get('/api/aaaa')
   .then((res) => {
     console.log(res)
       if(res.status == 200){
           that.setState({
               dataSource: res.data.data
           })
       }
   })
}
 
复制代码

可以看到返回200

6 总结 ： 本地开发环境模拟： npm run start , npm run mock 两个同时开启。 注意， 要全局安装json-server,不然提示命令找不到。 这样子模拟数据不会对生产环境造成任何影响。