首先安装我们所需要的库，axios，mock，mock-api。
npm install axios
npm install mockjs
npm install mocker-api
然后在我们的src文件夹下新建mock文件夹，在mock文件夹下创建moker.js用来存放模拟的接口数据。具体内容如下：
const proxy = {
'GET /api/user': { id: 1, username: 'kenny', sex: 6 },
'GET /api/user/list': [
{ id: 1, username: 'kenny', sex: 6 },
{ id: 2, username: 'kenny', sex: 6 }
],
'POST /api/login/account': (req, res) => {
const { password, username } = req.body
if (password === '888888' && username === 'admin') {
return res.send({
status: 'ok',
code: 0,
token: 'sdfsdfsdfdsf',
data: { id: 1, username: 'kenny', sex: 6 }
})
} else {
return res.send({ status: 'error', code: 403 })
}
},
'DELETE /api/user/:id': (req, res) => {
console.log('---->', req.body)
console.log('---->', req.params.id)
res.send({ status: 'ok', message: '删除成功！' })
}
}
module.exports = proxy;
然后需要在webpackDevServer.config.js文件中配置mock相关库(如果没有暴露配置文件，需要通过npm run eject命令先暴露出配置文件)
......
const path = require('path');
......
//mock模块引入
const apiMocker = require('mocker-api');
.......
before(app, server) {
......
//mocker模拟后端接口
apiMocker(app, path.resolve(__dirname, '../src/mock/mocker.js'));
......
}
最后就可以在我们所需要使用mock的地方直接模拟接口调用了.
getData = () => {
axios.get('/api/user')
.then(res => {
console.log(res.data);
})
.catch(err => {
console.log(err);
});
}
