Elecron-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用于封装接口函数。

（2）模拟数据

打开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))

（3）封装接口函数

在api/api.js中封装接口函数：

import axios from 'axios'

let baseURL = '' // 自定义请求路径
// 获取列表分页
export const getPlanListPage = params => {
  return axios.get(`${baseURL}/flight/getListPage`, { params: params })
}

（4）拦截请求

由于我们使用的是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)
      })
    })
  }
}

（5）渲染数据

简单情况下，一般直接在页面中渲染就可以了，如果数据比较多，单页面之间存在共享的数据，可以使用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>

最终效果如下：