Mockjs模拟数据,实现增删改查
1、安装mockjs
npm install mockjs --save-dev
2、mock.js文件
// mock.js 文件
import Mock from 'mockjs' // 引入mockjs
const Random = Mock.Random // Mock.Random 是一个工具类,用于生成各种随机数据
const dataList = [] // 用于接受生成数据的数组
for (let i = 0; i < 26; i++) { // 可自定义生成的个数
const template = {
'id': i, // id
'Name': Random.name(), // 生成姓名
'Address': Random.province() // 生成地址
}
dataList.push(template)
}
// 模拟分页
Mock.mock('http://localhost:8080/api/list', 'post', (params) => {
var listQuery = JSON.parse(params.body)
var pageIndex = (listQuery.page - 1) * listQuery.pageSize
var [index, size, total] = [pageIndex, listQuery.pageSize, dataList.length]
var newDataList = dataList.slice(index * size, (index + 1) * size)
return {
'code': '200',
'message': 'success',
'data': {
'listQuery': listQuery,
'tableData': newDataList,
'tableHead': [{ column: 'id', columen_comment: '用户id' }, { column: 'Name', columen_comment: '姓名' }, { column: 'Address', columen_comment: '地址' }],
'total': total
}
}
})
// 模拟新增数据
Mock.mock('http://localhost:8080/api/add', 'post', (params) => {
var data = JSON.parse(params.body)
data.id = dataList.length
dataList.push(data)
return {
'code': '200',
'message': 'success'
}
})
// 模拟删除数据
Mock.mock('http://localhost:8080/api/delete', 'post', (params) => {
var data = JSON.parse(params.body)
dataList.splice(data.id, 1)
return {
'code': '200',
'message': 'success'
}
})
// 模拟修改数据
Mock.mock('http://localhost:8080/api/update', 'post', (params) => {
var data = JSON.parse(params.body)
/* dataList.map((item) => {
if (item.id === data.id) {
return data
} else { return item }
}) */
for (var i in dataList) {
if (dataList[i].id === data.id) { // 在数组arr里找到这个id
dataList[i] = data
}
}
return {
'code': '200',
'message': 'success',
'data': data
}
})
3、在使用到地方引入
//引入
require('@/utils/mock.js')
mounted() {
this.test()
},
methods: {
async test() {
await axios.post('http://localhost:8080/api/list', { page: 1, pageSize: 30 }).then(res => {
console.log(res)
})
await axios.post('http://localhost:8080/api/add', { Name: 'lijn', Address: 'fhhsdf' }).then(res => {
console.log(res)
})
await axios.post('http://localhost:8080/api/delete', { id: 25 }).then(res => {
console.log(res)
})
await axios.post('http://localhost:8080/api/update', { id: 26, Name: 'ljc', Address: '广东省' }).then(res => {
console.log(res)
})
await axios.post('http://localhost:8080/api/list', { page: 1, pageSize: 30 }).then(res => {
console.log(res)
})
await axios.post('http://localhost:8080/api/list', { page: 1, pageSize: 30 }).then(res => {
console.log(res)
})
}
}