常我们在做项目时会遇到后端接口还没有完成的情况,这个时候我们可以使用mock 实现本地模拟后端接口来测试前端代码效果
1、安装mock
npm install mockjs
2、 创建一个mock.js文件
下面编写两个接口,一个是get请求,一个是post请求带分页
// 引入mockjs
const Mock = require('mockjs')
// 获取 mock.Random 对象
const Random = Mock.Random
// mock一组数据
// const produceNewsData = function () {
let articles = []
for (let i = 0; i < 100; i++) {
let newArticleObject = {
title: Random.csentence(5, 30), // Random.csentence( min, max )
author_name: Random.cname(), // Random.cname() 随机生成一个常见的中文姓名
date: Random.date() + ' ' + Random.time() // Random.date()指示生成的日期字符串的格式,默认为yyyy-MM-dd;Random.time() 返回一个随机的时间字符串
}
articles.push(newArticleObject)
}
// }
console.log(articles,'articles')
// 拦截ajax请求,配置mock的数据
Mock.mock('/api/articles', 'get', articles)
Mock.mock('/api/articles', 'post', (params)=>{
console.log(params)
const [index,size,total] = [JSON.parse(params.body).pageIndex,JSON.parse(params.body).pageSize,articles.length]
let len = total/size;
console.log(index,size,total)
const totalPages = len - parseInt(len) >0 ? parseInt(len)+1 : len
const newProduceNewsData = articles.slice(index * size, (index+1)*size)
return {
code: '0',
message: 'success',
data:{
pageIndex: index,
pageSize: size,
list: newProduceNewsData,
total: total,
totalPages: totalPages
}
}
})
3、 引用mock,在dev.env.js中设置为true
'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')
module.exports = merge(prodEnv, {
NODE_ENV: '"development"',
Mock: true
})
在prod.env.js生产环境中设置为false
'use strict'
module.exports = {
NODE_ENV: '"production"',
Mock: false
}
在main.js中引入
process.env.Mock && require('./mock.js')
4、去相应的界面使用
import axios from 'axios'
mounted(){
axios.get('/api/articles')
.then(e => {
console.log(e)
})
.catch(err => {
console.log(err)
})
axios.post('/api/articles',{pageIndex:2,pageSize:20})
.then(e => {
console.log(e)
})
.catch(err => {
console.log(err)
})
},
效果如图所示