一、環境搭建
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>
最終效果如下: