实现前后端分离式开发-在webpack项目中进行MOCK（mock）-1（入门级）

1.webpack.config.js   最上面：

 

const Mock = require('../mock/mock.js'); （该文件在哪如何定义看第3步）

 

2.devServer中：（before能否提前处理ajax请求，app是个很复杂的对象，请不要过分纠结，写上就行了，原来的配置内容不要动即可）

before(app){

            Mock(app)    //这个Mock就是上面那个mock

},

 

3.在项目文件夹中与src文件夹同级，新建一个mock文件夹，一个文件是mock.js（这就是被第1步引入的文件）;另一个是json文件，例：mock.json，（里面装的是后台给你的接口用例的复制数据，分开放比较清楚，也可以直接在mock.js中返回）；

mock.js里面就这样写一下就好：

const data = require('./mock.json')

function Mock(app) {

    app.get('/api/mock', function(req, res) {

      res.json(data);

    });

  }  

  module.exports = Mock;

 

这是我在mock.json里面填的数据：

{

    "status": 200,

    "data": {

        "name":"zachary",

        "age": 100

    }

}
4.为了简单说明我装了一个axios，然后直接在main.js上简单地发了一个请求，如下：
 

const axios = require('axios')

setTimeout(()=> {

    axios.get('/api/mock')

    .then((res) => {

      console.log(res.data);//请求的返回体

    })

},3000)

最终preview效果如下：

1. {status: 200, data: {name: "zachary", age: 100}   //Json格式的
   1. status: 200                                          //解析后的 不多赘述
   2. data: {name: "zachary", age: 100}       //解析后的 不多赘述

处于责任，附上一个参考链接，思密达：https://www.jianshu.com/p/fea615354d10