Electron-vue实战（二）— 请求Mock数据渲染页面
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>
最终效果如下：
