1、安装Mock.js
如果仅仅用作脱离后台的模拟数据,就安装在开发环境中:
npm install mockjs -D
2、安装axios-mock-adapter
axios-mock-adapter是一款axios
的请求模拟调试器,可以使用它来实现请求拦截并模拟后台回复。
npm install axios-mock-adapter -D
二、使用
(1)建立文件
在src/renderer
目录下新建mock
文件夹与api
文件夹,然后mock
文件夹下建立data
文件夹存放各类模拟数据,再建立index.js
文件与mock.js
文件,如下:
// mock mock ├─ data │ ├─ flignt.js │ └─ planList.js ├─ index.js └─ mock.js // api api ├─ api.js └─ index.js
api
文件下下的api.js
用于封装接口函数。
打开data/planList.js
关于如何Mcok
数据在官网已经提及,简单明了。
Mcok.mock()
是数据模板,一共有五种方式。
以下数据作为示例使用:
// 引入mock import Mock from 'mockjs' const Random = Mock.Random const List = [] const count = 300 for (let i = 0; i < count; i++) { List.push(Mock.mock({ id:Random.integer(2, 10), // 随机生成由2-10的整数 name: Random.cname(), // 名字 'sex|1': ['男', '女'], // 属性名sex|规则:属性值 从数组里随机选一个 date: Random.date(), // 默认日期为Y-M-D port: Random.string('upper', 2), // 随机的两个大写字母构成的字符串 bay: Random.string('lower', 2), // 随机的两个小写字母构成的字符串 externalState: Random.csentence(3), // 三个字构成的一段文语句 'vipGrade|1': ['★', '★★', '★★★'], // 随机选择 })) }
第一种:Mock.mock(template)
仅根据数据模板生成模拟数据。
List.push(Mcok.mock(...)) // 里面的数据即为模板数据生成的
第二种:Mock.mock(rurl, template)
记录数据模板。当拦截到匹配 rurl
的 Ajax 请求时,将根据数据模板 template
生成模拟数据,并作为响应数据返回。
即生成模板数据之后,可以用Mock
拦截模板数据
Mock.mock('/flight/list',List)
第三种:Mock.mock(rurl, function( options ) )
记录用于生成响应数据的函数。当拦截到匹配 rurl
的 Ajax 请求时,函数 function(options)
将被执行,并把执行结果作为响应数据返回。
Mock.mock('/flight/list', function(options))
第四种:Mock.mock(rurl, rtype, template)
记录数据模板。当拦截到匹配 rurl
和 rtype
的 Ajax 请求时,将根据数据模板 template
生成模拟数据,并作为响应数据返回。
这种是比较常用的。
Mock.mock('/flight/list', 'post|get', List)
第五种:Mock.mock(rurl, rtype, function( options ) )
记录用于生成响应数据的函数。当拦截到匹配 rurl
和 rtype
的 Ajax 请求时,函数 function(options)
将被执行,并把执行结果作为响应数据返回。
Mock.mock('/flight/list', 'post|get', function(options))
在api/api.js
中封装接口函数:
import axios from 'axios' let baseURL = '' // 自定义请求路径 // 获取列表分页 export const getPlanListPage = params => { return axios.get(`${baseURL}/flight/getListPage`, { params: params }) }
由于我们使用的是axios-mock-adapter
请求模拟调试器,可以直接在mock.js
中写:
import axios from 'axios' import MockAdapter from 'axios-mock-adapter' import { List } from './data/planList' let _planList = List export default { bootstrap () { // 模拟调试器实例 let mock = new MockAdapter(axios) // mock success request mock.onGet('/success').reply(200, { msg: 'success' }) // mock error request mock.onGet('/error').reply(500, { msg: 'failure' }) // 获取列表(分页) 模拟接收'/flight/getListPage'接口 mock.onGet('/flight/getListPage').reply(config => { let { page, pageSize, id } = config.params let total = mockList.length // 数据总数 let mockList = _planList.filter((u, index) => index < pageSize * page && index >= pageSize * (page - 1)) // 分页数据显示 return new Promise((resolve, reject) => { // 返回响应数据 setTimeout(() => { resolve([200, { total: total, list: mockList }]) }, 1000) }) }) } }
简单情况下,一般直接在页面中渲染就可以了,如果数据比较多,单页面之间存在共享的数据,可以使用Vuex
进行数据存储管理,这个会在单独的博客中详细描述,这里只做简单的请求数据,渲染处理:
import { getPlanListPage } from '@/api/api' export default { components: { ListForm }, data () { return { listLoading: false, // 加载效果 total: 0, // 数据总数 currentPage: 1, // 当前页 pageSize: 20, // 每页数据数量 tableData: [], // 数据 multipleSelection: [] } }, mounted () { this.getPlanList() }, computed: { ...mapGetters('planList', ['list']) }, methods: { getPlanList () { let para = { page: this.currentPage, pageSize: this.pageSize } this.listLoading = true this.$axios.get('/flight/getListPage', {para: para}) .then(res => { console.log(res.data) this.total = res.data.total this.tableData = res.data.list this.listLoading = false }) .catch(error => { console.log(error) console.log() }), // 显示每页多少条数据 handleSizeChange (val) { this.pageSize = val this.currentPage = 1 this.getPlanList() }, // 显示当前页数 handleCurrentChange (val) { this.currentPage = val this.getPlanList() } } <!-- 表格数据 --> <el-table :data="tableData" highlight-current-row style="width: 100%;margin-bottom: 20px;" height="800px" v-loading="listLoading" size="medium" class="planListTable el-table__column-filter-trigger" @cell-dblclick="rowDbClick" > </el-table> <!-- 分页 --> <el-col :span="24" class=""> <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[20, 50, 100]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total" style="float:right;" > </el-pagination>
最终效果如下: