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
用于封装接口函数。
(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>
最终效果如下:
Electron-vue实战(二)— 请求Mock数据渲染页面的更多相关文章
- vue 在发送axios请求时数据渲染问题
这是我请求的json格式的数据 一开始在vue用普通的数据渲染,更改为vue后使用v-for 发现没办法渲染上去了. obj.data就是以上数据. 必须加上这三行给this随意赋个值,神奇的事情就会 ...
- 【vue】本地开发mock数据支持
项目离不开数据渲染的支持,为本地开发配置 数据 支持. (一)方式一:安装JSON Server搭建mock数据的服务器 json Server 是一个创建 伪RESTful服务器的工具. 配置流程 ...
- vue 项目初始化、mock数据以及安装less
vue 创建一个项目 1.首先建立一个空文件夹,然后将这个文件夹要放到码云或者其他代码管理平台. 例如码云: 在码云上建立一个项目,然后在控制台进入这文件夹执行 git clone 地址是码云上创建的 ...
- vue使用axios请求后端数据
1. 安装axios $ npm install axios 2.在main.js里面导入axios import axios from 'axios' Vue.prototype.$http = a ...
- Vue中如何书写js来渲染页面填充数据的部分代码
new Vue({ el:"#app" , data:{ user:{ id:"", username:"", password:" ...
- vue简单的请求api并渲染到表格
环境 vue3.11 组件库 https://element-plus.gitee.io/#/zh-CN 开始 初始化一个项目 App.vue <template> <div> ...
- 3-1 vue生存指南 - todolist实现-数据渲染
由于Vue.js作者是中国人,会说汉语,所以国内生态会更好一点.Vue.js作者是尤雨溪,
- Vue获取后端数据 渲染页面后跳转
主页面 <template> <div> <ul v-for="item in courseList"> <router-link :to ...
- vue从后台拿数据渲染页面图片
<div class="list-content"> <div v-for="goods in goodsList" class=" ...
随机推荐
- Linux中的bin文件夹
~/bin适合放个人用户的 script /usr/local/bin存放系统中所有用户都可以使用的 script /usr/local/sbin存放管理员的 script /usr/local/目录 ...
- 简单使用vuex状态管理
1.在使用vue-cli脚手架创建项目后 npm install vuex 2.创建store文件夹,结构如下: 3.store中 index.js代码如下: 4.入口文件main.js中引入stor ...
- NetCore中的环境变量的值取自于哪里?
环境 操作系统 win10 IIS 10 net core 2.2 ,net core 3.0 分别生成了三个环境变量的配置文件: 以及测试代码: public void Configure(IApp ...
- 命令查看当前运行APP的包名和Activity
先用usb链接手机 启动要查看的程序,命令查看当前运行的包名和Activity更清晰. 使用adb shell dumpsys window | findstr mCurrentFocus 命令查看 ...
- flutter网格布局之GridView组件
前面总结了使用ListView来实现列表,但是,有的时候,数据量很大,需要使用矩阵方式排列才能更清晰的展示数据,在flutter中,可以使用网格列表组件GridView来实现这个布局. GridVie ...
- 写在Flutter 1.0之前
开始 大概有半年没有写东西了,感觉时间过得飞快,18年也过一小半,趁着谷歌大会再为Flutter这个耀眼的新星,再吹一波! 都beta3了,1.0还会远吗 Flutter团队依然不紧不慢,一步一个脚印 ...
- Windows-Windows下使用Linux系统(WSL)
Install Windows Subsystem for Linux (WSL) on on Windows 10 | Microsoft Docs WSL(Windows Subsystem fo ...
- JavaScript DOM编程艺术-第一章
发现基础不是很好,补习一下.37买了2本书(dom编程和高级程序设计). 以前读书总是自己勾勾画画,有点没意思.现在写下来,说不定会成为传世经典.哈哈...........随便扯扯淡. 第一天(201 ...
- Bentley二次开发中的,沿曲线构造拉伸实体问题
引用文件:Bentley.Interop.MicroStationDGN 本人开发过程中遇到问题: 创建多个线段及弧线,通过自动创建复杂链获得,沿曲线构造拉伸实体的Path参数,拉伸曲线路径首尾特别近 ...
- Fix invisible cursor issue in Ubuntu 13.10
Fix invisible cursor issue in Ubuntu 13.10 Fixing this problem is rather too easy. Open a terminal ( ...