mock模拟后台数据
import Mock from 'mockjs'
const Random = Mock.Random // 获取random对象,随机生成各种数据,具体请翻阅文档
const domain = 'http://mockjs.com/api' // 定义默认域名,随便写
const code = 200 // 返回的状态码const postData = function(req) {
let listData=[]
let totalSize = 30
let pagination = JSON.parse(req.body)
let pageSize = pagination.pageSize;
// 随机生成数据
for (let i = 0; i < pageSize; i++) {
let post = {
id: i,
pfbmc: Random.name(),
pshdmc: Random.csentence(10, 25), // 随机生成名字
pshdsj: Random.date() + ' ' + Random.time(), // 随机生成年月日 + 时间
zt: "启用"
}
listData.push(post)
}
return { // 返回状态码和文章数据posts
code,
result:1,
info:{list:listData,totalSize: totalSize,}
}
}
Random.extend({
name: function() {
var name = ['关于智能手机的评分表', '关于as的评分表', '关于saw的评分表', '关于wqwq的评分表', '关于gtrg的评分表', '任正非回应退休', '新发展理念', '20字好干部标准', '五位一体', '强富美高', '供给侧结构性改革', '三解三促','三会一课','四个进一步','三次大讨论','三个新成效','五查摆五强化','两聚一高','抓项目、转作风、促发展','三工程一计划']
return this.pick(name) //pick:从list中随机选取一个元素
},
})
Mock.mock(`${domain}/gridTable/posts`, /get|post/i, postData); // 定义请求链接,类型,还有返回数据
//删除数据
const list = function (options) {
let rtype = options.type.toLowerCase(); //获取请求类型
switch (rtype) {
case 'get':
break;
case 'post':
let id = parseInt(JSON.parse(options.body).id) //获取删除的id
listData = listData.filter(function(val){
return val.id!=id;//把这个id对应的对象从数组里删除
});
break;
default:
}
return {
code,
info:{list:listData}
} //返回这个数组,也就是返回处理后的假数据
}
Mock.mock(`${domain}/deletes`,/get|post/i, list);//删除数据
mock模拟后台数据的更多相关文章
- Mock模拟后台数据接口--再也不用等后端的API啦
ok,在开发中经常需要从后台获取数据,那么有时候后台的数据接口并没有写好,所以这时候,就需要自己模拟数据接口,来实现前端逻辑, 今天数的就是阿里巴巴的一款mock产品,很好用的哦!!!! ok!这是我 ...
- 深入浅出的webpack4构建工具--webpack4+vue+vuex+mock模拟后台数据(十九)
mock的官网文档 mock官网 关于mockjs的优点,官网这样描述它:1)可以前后端分离.2)增加单元测试的真实性(通过随机数据,模拟各种场景).3)开发无侵入(不需要修改既有代码,就可以拦截 A ...
- vue mock(模拟后台数据) 最简单实例(一)——适合小白
开发是前后端分离,不需要等待后台开发.前端自己模拟数据,经本人测试成功. 我们在根目录新建存放数据的json文件,存放我们的数据data.json //data.json{ "status& ...
- vue mock(模拟后台数据) +axios 简单实例(二)
需装上axios,build文件夹中webpack.dev.conf.js文件添加上vue mock配置的东东, 如,继(一) //组件<template> <div> &l ...
- mock数据(模拟后台数据)
mock数据(模拟后台数据) - Emily恩 - 博客园 https://www.cnblogs.com/enboke/p/vue.html Mock.js http://mockjs.com/ 前 ...
- express+mockjs实现模拟后台数据发送
前言: 大多数时候,前端会和后端同时进行开发,即在我们开发完页面的时候,很可能还不能立马进入联调阶段,这个时候,为了保证我们接口的有效性和代码的功能完整,我们可能需要模拟数据. 模拟数据方法 1.通过 ...
- vue-cli模拟后台数据交互
作为一个前端入坑的妹子,在学习vue的道路上挣扎徘徊,由一开始的对vue一直蒙圈只知道双向数据绑定和一些'V-x'的指令,慢慢通过一个视频的学习渐渐入坑,对于我这个js基础不怎么好而且编程思维又不是很 ...
- iBase4j前端01_bootstrap-suggest json-server模拟后台数据、bootstrap-suggest环境搭建、开启bootstrap-suggest的post和put请求
1 准备 1.1 模拟的json数据 { "info": [ { "message": "信息", "value": [ ...
- 超简单本地mock假数据测试,模拟后台数据返回必杀技
温馨提示:急性子可以直接拉到最后观看方法步骤. 什么是mock? mock就是在开发过程中,对于某些不容易构造或者不容易获取的对象,用一个虚拟的对象来创建以便测试开发的方法. 使用mock有什么好处? ...
随机推荐
- Android--卸载应用
获取应用列表: List<PackageInfo> packages = getPackageManager().getInstalledPackages(0); for (Package ...
- 【scratch3.0教程】2.2 魔力手环
编程前的准备 在设计一个作品之前,必须先策划一个脚本,然后再根据脚本,收集或制作素材(图案,声音等)接着就可以启动Scratch,汇入角色,舞台,利用搭程序积木的方式编辑程序,制作出符合脚本的动画或游 ...
- java 简易日历表
在页面上输出1900年以后任意一年的简易日历表 package text3; import java.util.Scanner; public class MyCalendar { public st ...
- Python2与Python3兼容
Python2与Python3兼容 python3写的代码如何也能在pyhon2上跑?请无论如何加上这一句,python3没有啥影响 from __future__ import absolute_i ...
- logback 日志相关
日志相关: logback:https://www.cnblogs.com/gavincoder/p/10091757.html https://www.cnblogs.com/hhhshct/p/9 ...
- 使用jQuery开发tab选项卡插件(可以右键关闭多个标签)
在前一篇“使用jQuery开发tab选项卡插件”的基础上添加了tab标签右键关闭菜单功能,菜单主要包括:关闭当前标签.关闭左侧标签.关闭右侧标签.关闭其他.关闭全部. 一.插件效果 二.实现思路 为w ...
- js 算法,判断一个数组中的数字出现多少次
let arr = [11, 11, 2, 2, 5, 5, 5, 5, 3]; //创建一个map,把每个数字和其个数相对应 let countObj = {}; for (i = 0; i < ...
- 优化API接口响应速度
前言 API接口响应慢? SLA一直提不上去? 其实这是后端程序员想进阶必须要跨过去的坎:就是把它优化掉. 那么这其中到底有没有套路呢?答案是:有的. 本文将介绍目前正在用并且十分“无脑”有效的这个套 ...
- fontawesome-iconpicker 自定义字体图标选择器
官网地址:https://farbelous.io/fontawesome-iconpicker/ 头部文件引入 <!--本地地址--> <link href="../cs ...
- QT5无法定位程序输入点 于动态链接库QtCore5.dll的解决
本人新手刚接触QT5,今天在写程序时,在QtCreator中可以运行,但是单独运行.exe文件时报错 之后发现是因为我之前在path路径中添加了MinGw,导致里面也有Qt库.但是我编译的时候用的是安 ...