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,否則提示命令找不到。 這樣子模擬數據不會對生產環境形成任何影響。