前端基础学习-mock模拟后台接口返回
第一步:安装mockjs
npm install mockjs --save-dev
第二步:/src下创建 mock.js 文件
mock.js内容
// 引入mockjs
const Mock = require('mockjs')
// 获取 mock.Random 对象
const Random = Mock.Random
// mock一组数据
// 用于接受生成数据的数组
let tableList = []
for (let i = 0; i < 100; i++) {
let newObject = {
title: Random.csentence(5, 10), // Random.csentence( min, max )
name: Random.cname(), // Random.cname() 随机生成一个常见的中文姓名
url: Random.url(), // 生成web地址
date: Random.date() + ' ' + Random.time() // Random.date()指示生成的日期字符串的格式,默认为yyyy-MM-dd;Random.time() 返回一个随机的时间字符串
}
tableList.push(newObject)
}
// }
// console.log(tableList, 'tableList')
// 拦截ajax请求,配置mock的数据
// get请求
Mock.mock('/api/mockGetList', 'get', tableList)
// post请求分页
Mock.mock('/api/pageList', 'post', (params) => {
console.log(params, 'params')
const [index, size, total] = [JSON.parse(params.body).page, JSON.parse(params.body).size, tableList.length]
let len = total / size
console.log(index, size, total, 'index, size, total')
const totalPages = len - parseInt(len) > 0 ? parseInt(len) + 1 : len
// 截取list
// const newProduceNewsData = tableList.slice(index * size, (index + 1) * size)
const newProduceNewsData = tableList.slice((index - 1) * size, index * size)
console.log(newProduceNewsData, 'newProduceNewsData')
return {
code: '0',
message: 'success',
data: {
page: index,
size: size,
list: newProduceNewsData,
total: total,
totalPages: totalPages
}
}
})
第三步:引用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')
第六步:去相应的界面使用
<template>
<div>
<el-row>
<el-col :span="12">
<h3>mock模拟get接口(不分页)</h3>
<el-table :data="MockList" border ref="multipleTable" height="400">
<el-table-column prop="title" label="标题" show-overflow-tooltip></el-table-column>
<el-table-column prop="url" label="请求地址" show-overflow-tooltip></el-table-column>
<el-table-column prop="name" label="操作人" show-overflow-tooltip></el-table-column>
<el-table-column prop="date" label="时间" show-overflow-tooltip></el-table-column>
</el-table>
</el-col>
<el-col :span="12">
<h3>mock模拟get接口2</h3>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<h3>mock模拟post分页接口</h3>
<el-table :data="MockPageList" border ref="multipleTable" height="400">
<el-table-column prop="title" label="标题" show-overflow-tooltip></el-table-column>
<el-table-column prop="url" label="请求地址" show-overflow-tooltip></el-table-column>
<el-table-column prop="name" label="操作人" show-overflow-tooltip></el-table-column>
<el-table-column prop="date" label="时间" show-overflow-tooltip></el-table-column>
</el-table>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page.sync="searchForm.page"
:page-sizes="[40, 80]"
:page-size="searchForm.size"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
></el-pagination>
</el-col>
<el-col :span="12">
<h3>自定义样式实现list分页</h3>
</el-col>
</el-row>
</div>
</template>
<script>
import axios from 'axios'
import commonFuc from '@/assets/js/commonFuc'
export default {
name: 'tableMockList',
mixins: [commonFuc],
data () {
return {
MockList: [],
MockPageList: [],
searchForm: {
page: 1,
size: 40
},
total: 0
}
},
mounted () {
this.getMockList()
this.getList()
},
methods: {
getMockList () {
axios.get('/api/mockGetList')
.then(res => {
// console.log(res, 'mock模拟get接口获取result')
this.MockList = res.data
})
.catch(err => {
console.log(err)
})
},
getList () {
axios.post('/api/pageList', this.searchForm)
.then(res => {
console.log(res, 'res')
this.MockPageList = res.data.data.list
this.total = res.data.data.total
})
.catch(err => {
console.log(err)
})
}
}
}
</script>
<style lang='css' scoped>
.el-col-12 {
border-right: 1px solid #e6e6e6;
padding:0 20px 20px 20px;
}
.el-row {
border-bottom: 1px solid #e6e6e6;
}
</style>