使用mockjs模拟分页请求
首先安装mockjs
npm install mockjs --save-dev
创建mock.js
//mock.js
const Mock = require("mockjs");
// const Random = Mock.Random // Mock.Random 是一个工具类,用于生成各种随机数据
const dataList = []
//用于接受生成数据的数组
for (let i = 0; i < 50; i++) { // 可自定义生成的个数
const template = {
"roleId": i,
"name": "admin" + i,
"remark": "超级管理员" + i,
"createBy": null,
"createTime": "2018-08-14T03:11:11.000+0000",
"lastUpdateBy": null,
"lastUpdateTime": null,
"delFlag": 0
}
dataList.push(template)
}
Mock.mock(/role\/query/, 'post', (params) => { //三个参数。第一个路径,第二个请求方式post/get,第三个回调,返回值
var info = JSON.parse(params.body)
var [index, size, total] = [info.params.pageIndex, info.params.pageSize, dataList.length]
var len = total / size
var totalPages = len - parseInt(len) > 0 ? parseInt(len) + 1 : len
var newDataList = dataList.slice((index - 1) * size, index * size)
return {
'code': '0',
'message': 'success',
'data': {
'pageIndex': index,
'pageSize': size,
'content': newDataList,
'total': total,
'totalPages': totalPages,
}
}
})
在main.js中引入mock.js
//role.vue
methods: {
// 获取数据
async getSysRoleData () {
try {
const url = '/role/query';
const { data: res } = await this.$http[4].post(url, {
params: {
pageIndex: this.query.pageIndex,
pageSize: this.query.pageSize
}
});
console.log("角色管理列表:", res.data)
} catch (err) {
console.dir(err);
this.$message.error({
message: err.message,
duration: 1500
});
}
},
}
使用mockjs模拟分页请求的更多相关文章
- mockjs模拟数据请求
一般项目的方法 <html> <head> <script> <script src="http://requirejs.org/docs/rele ...
- 单篇文章JS模拟分页
废话部分 前两天做了一个前台分页插件,支持ajax读取数据绑定前台 和 url带页码参数跳转两种方式.于是稍加改动,做了一个单篇文章js模拟分页的代码,为什么说是模拟分页呢?因为在服务器响应HTML请 ...
- vue+vuecli+webpack中使用mockjs模拟后端数据
前言 使用mockjs可以事先模拟数据,前提是和后端约定好了数据接口,怎样的数据.使用mock就可以生成你要的数据了,从而实现开发时前后端分离. 其主要功能是: 基于数据模板生成模拟数据. 基于HTM ...
- Python数据库访问公共组件及模拟Http请求
前言 最近一段时间除了忙于工作之外,在业余时,迷上了python,对它的跨平台深深的吸引.经过一段时间的自我学习,了解了其基本的语法,便开始自己着手摆弄起来.主要想把以前对接的接口再实现一次,以便于在 ...
- 模拟ajax请求爬取微博
#!/usr/bin/env python # -*- coding: utf-8 -*- # @Time : 2018/9/26 10:26 # @Author : Sa.Song # @Desc ...
- 如何在vue-cli项目中结合mockjs模拟假数据
1.前言 在如今前后端分离的开发方式已被广泛采用的今天,前端同学和后端同学各自独立开发,后端提供数据接口,前端调用接口获取数据渲染页面.但是在实际开发中,后端开发由于逻辑相对复杂接口迟迟提供不到位,而 ...
- ASP模拟POST请求异步提交数据的方法
这篇文章主要介绍了ASP模拟POST请求异步提交数据的方法,本文使用MSXML2.SERVERXMLHTTP.3.0实现POST请求,需要的朋友可以参考下 有时需要获取远程网站的某些信息,而服务器又限 ...
- java模拟post请求发送json
java模拟post请求发送json,用两种方式实现,第一种是HttpURLConnection发送post请求,第二种是使用httpclient模拟post请求, 方法一: package main ...
- C# 通过模拟http请求来调用soap、wsdl
C#调用webservice的方法很多,我说的这种通过http请求模拟来调用的方式是为了解决C#调用java的远程API出现各种不兼容问题. 由于远程API不在我们的控制下,我们只能修改本地的调用代码 ...
随机推荐
- Filter过滤器的基本使用方法
ProjectDescription Filter的使用 创建类实现javax.servlet.Filter. 重写方法: init(); //过滤器初始化 doFilter(); //过滤请求 1. ...
- lombok,Invalid byte tag in constant pool: 19
今天偶到一个奇怪的问题: 三台生产服务器部署同样的代码,同样的tomcat ,jdk等环境. 其中有一台服务器启动时报lombok-1.18.6.jar! Invalid byte tag in ...
- 10.qml-组件、Loader、Component介绍
1.组件介绍 一个组件通常由一个qml文件定义(单独文件定义组件), 实际也可以在qml里面通过Component对象来嵌入式定义组件 (4小节讲解). Component对象封装的内容默认不会显示, ...
- Asp.NetCore 自定义中间件
这节演示一下自定义中间件,第一节我们讲到,中间件的处理流程就像一个俄罗斯套娃,那这种俄罗斯套娃型的流程内部是如何实现的呢,下面请看代码. 第一种写法是直接写在Configure方法中的,使用app ...
- Java_接口
接口 接口中的方法全都是抽象方法,用来指定一些规则,让子类去重写.接口的作用主要体现在一下两点 1.指定规则2.利用这些规则给类做功能扩展 接口的定义和使用 接口使用interface关键字来定义,使 ...
- 黄衫女子,黄衫好.png
正想着团队项目中数据该如何解析,就收到了来自软工课程组的一件小黄衫,真是意外之喜.详问其来源,竟是因结对项目做的"较好"而来,顿感受之有愧. 结对项目是两人对文件系统的一个小模拟, ...
- [Python] 命名空间&作用域
Python的类语句不会创建实例 类会创建命名空间,通过对象访问类的属性和方法 类不会创建作用域,对方法和属性的引用必须加以限定(如在方法中必须通过self引用实例的属性) class My1(): ...
- (代替人类)很多操作都在Settings里面。 5.安装第三方库
2020-02-01 pycharm 使用教程 LingSmart关注 0.0842020.02.07 15:08:50字数 1,394阅读 680 实在无聊,就来学习吧.学习pycharm的使用教程 ...
- LTP--linux稳定性测试 linux性能测试 ltp压力测试 ---IBM 的 linux test project
LTP--linux稳定性测试 linux性能测试 ltp压力测试 ---IBM 的 linux test project Peter盼 2014-04-23 11:25:49 20302 收藏 ...
- centos7下cups + samba共打印服务
centos7下cups + samba共打印服务 2015年8月21日admin发表评论阅读评论 这个算是rhce课程的篇外篇,Samba除了提供文件共享外,也可以像windows下的共享一样提 ...