环境：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 Serverserver.use(jsonServer.bodyParser)// Add custom routes before JSON Server routerserver.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,不然提示命令找不到。 这样子模拟数据不会对生产环境造成任何影响。