目录
1. 安装插件
npm install mockjs --save-dev
2. 接口模拟
1. 在src目录下创建 mocker/mockData/index.js,内容为 mock 数据:
// 静态数据
const resultList = [
{
id: '8a58c6736f452c10016f4604c6ce0687',
resourceType: '0',
deptName: '研发中心',
isDefault: '0'
},
{
id: '40283f8172a6f8590172a7ff0bb50b7d',
resourceType: '0',
deptName: '运行管理中心',
isDefault: '1'
}
]
// mock一组动态随机数据
const produceNewsData = function () {
let articles = []
for (let i = 0; i < 100; i++) {
let newArticleObject = {
title: Random.csentence(5, 30), // Random.csentence( min, max )
thumbnail_pic_s: Random.dataImage('300x250', 'mock的图片'), // Random.dataImage( size, text ) 生成一段随机的 Base64 图片编码
author_name: Random.cname(), // Random.cname() 随机生成一个常见的中文姓名
date: Random.date() + ' ' + Random.time() // Random.date()指示生成的日期字符串的格式,默认为yyyy-MM-dd;Random.time() 返回一个随机的时间字符串
}
articles.push(newArticleObject)
}
return {
data: articles
}
}
const configDesign = Object.assign(
{},
{
'POST /api/appsys/getDeptList/v1': (req, res) => {
return res.json({
id: req.id,
list: resultList,
errorDesc: null,
retCode: '200',
message: null
})
},
'GET /api/appsys/getArticleList/v1': {
produceNewsData
},
}
)
module.exports = configDesign
2. 在src目录下创建 mocker/index.js ,内容为:
const mockData = require('./mockData')
const proxy = Object.assign(
{}, // proxy自身,不要动
mockData
);
module.exports = proxy;
3. 在 vue.config.js 文件中添加以下内容:
let apiMocker = require('mocker-api');
const mocker = path.resolve(__dirname, 'mocker/index.js');
module.exports = {
port: 3000,
devServer: {
proxy: {
'/api/bpm': {
target: 'http://127.0.0.1:8080',
ws: false,
changeOrigin: true
},
...
},
before(app) {
// 如需mock才要开启,本地java服务模式请关闭
apiMocker(app, mocker, {
changeHost: true
});
}
}
}
4. 在需要使用的组件中使用:
export default {
data () {
return {
articleData: [],
deptData: []
}
},
methods: {
requestArticleData () {
this.$axios.get('/api/appsys/getArticleList/v1')
.then(e => {
let data = e.data
if (data.data && Array.isArray(data.data)) {
this.articleData= data.data
}
console.log(this.articleData)
})
.catch(err => {
console.log(err)
})
},
requestDeptData () {
this.$axios.post('/api/appsys/getDeptList/v1', {id: 'dfafgrgegbhc'})
.then(res => {
if(res.data.list.length){
this.deptData = res.data.list;
}
})
.catch(err => this.$message.error(err));
}
},
created () {
this.requestArticleData();
this.requestDeptData();
}
}