Electron-vue實戰（二）— 請求Mock數據渲染頁面

Electron-vue實戰（二）— 請求Mock數據渲染頁面

作者：狐狸家的魚

本文鏈接

GitHub：sueRimn

一、環境搭建

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>

最終效果如下：