react, webpack4,json-server, 模拟前端数据（POST+自定义数据）

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

1 全局下载json-server,

npm i json-server -g
复制代码

2 在webpackDevServer.config.js中修改

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

复制代码

3 在src目录外建立一个mock文件夹

(1)建立一个json-server的服务：mock/server.js

let  handleCgid= require('./data.js')
const jsonServer = require('json-server')
const server = jsonServer.create()
const middlewares = jsonServer.defaults()

// Set default middlewares (logger, static, cors and no-cache)
server.use(middlewares)

// To handle POST, PUT and PATCH you need to use a body-parser
// You can use the one used by JSON Server
server.use(jsonServer.bodyParser)
// Add custom routes before JSON Server router
server.post('/cgi-bin/vista_cgi.cgi', (req, res) => {
    //req.params, req.query ,req.body
    res.send(handleCgid(req.body))
})

server.listen(9999, () => {
  console.log('JSON Server is running')
})
复制代码

(2)建立要返回自定义的data数据

mock/data.js

module.exports = function (data) {
    switch(data.cgid){
        /**登录页面 login */
        case 0:
            if((data.username==='admin')&&(data.password==='admin'))
                return {
                    restcode:2000,
                    errmsg:'success',
                    first_boot:0
                }
            else return{
                restcode:4001,
                errmsg:'unauthorized',
                first_boot:0
            }
        /** 登录页面 auth */
        case 1:
            return {
                restcode:2000,
                errmsg:'success',
                first_boot:0
            }
        default:            
            return{
                'error':'the message you send is not defined!'
            }
    }
  };
  
复制代码

4 修改package.json

"scripts": {
  "start": "node scripts/start.js",
  "server": "node mock/server.js",
  "build": "node scripts/build.js",
  "test": "node scripts/test.js"
},
复制代码

开启服务： npm run server 注，这里还不能进行热更新，能够在评论告诉我怎么加哦

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

axios.post('/cgibin/vista',{cgid:1})
  .then((res) => {
    console.log(res)
      if(res.status == 200){
          that.setState({
              dataSource: res.data.data
          })
      }
  })
复制代码

注意，这里的post路径已经在webpackDevServer.config.js中写死了， 若是想要灵活变通路径能够参考json-server官网说明https://github.com/typicode/json-server， 或者参考上一编关于GET的文章。

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