Mock.js的简易使用
一:安装
npm install mockjs --save-dev
二:引入
- 在src目录下创建mock.js文件,输入以下代码:
// 引入mockjs
const Mock = require('mockjs');
// 获取 mock.Random 对象
const Random = Mock.Random;
// mock一组数据
const productData = function() {
let Data = [];
for (let i = 0; i < 8; i++) {
let data = {
a: Random.cname(), // Random.cname() 随机生成一个常见的中文姓名
b: Random.date(), // Random.date()指示生成的日期字符串的格式,默认为yyyy-MM-dd
c: Random.city(), // Random.city() 随机生成一个城市的名字
}
Data.push(data)
}
return {
Data: Data
}
}
// Mock.mock( url, post/get , 返回的数据);
Mock.mock('/user/login', 'post', productData );
Mock.mock('/user/query', 'post', productData);
- 打开src目录下的main.js文件,添加:
require('./mock.js')
如图所示:

三:使用
在需要使用的文件中正常使用即可,以一个调用的函数为例:
updateTable() {
var self = this;
var qs = require('qs');
axios.post('/user/login', qs.stringify({})) //这里的/user/login即在mock.js中自定义的url
.then(function (response) {
self.myDatas = response.data.Data;
})
.catch(function (error) {
console.log(error);
})
self.handleCurrentChange(1);
},
Mock.js的简易使用的更多相关文章
- 来,我们手写一个简易版的mock.js吧(模拟fetch && Ajax请求)
预期的mock的使用方式 首先我们从使用的角度出发,思考编码过程 M1. 通过配置文件配置url和response M2. 自动检测环境为开发环境时启动Mock.js M3. mock代码能直接覆盖g ...
- Mock.js简易教程,脱离后端独立开发,实现增删改查功能(转)
在我们的生产实际中,后端的接口往往是较晚才会出来,并且还要写接口文档,于是我们的前端的许多开发都要等到接口给我们才能进行,这样对于我们前端来说显得十分的被动,于是有没有可以制造假数据来模拟后端接口呢, ...
- mock.js 模拟数据
1. 劫持请求,返回模拟数据: 用于前后台对接前数据模拟 相比于静态json文件而言:代码完成后不必修改源文件对应的接口调用.可模拟增删改查 2.实例代码 <!doctype html> ...
- mock.js
mock.js http://mockjs.com/ https://github.com/nuysoft/Mock/wiki 为了完成angularjs的karma测试,看到这个好东东,这货能拦截a ...
- 使用 mock.js 让前端开发与后端独立
直接上代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...
- 前后端分离开发——模拟数据mock.js
mock.js 生成模拟数据,拦截ajax请求 <script type="text/javascript" src="http://libs.baidu.com/ ...
- Mock.js:前后端分离开发工具
概述 Mock.js实现的功能 基于 数据模板 生成数据 基于 HTML模板 生成数据 拦截并模拟 Ajax请求 用法 浏览器: <!-- (必选)加载 Mock --> <scri ...
- mockjax MOCK.js的拦截ajax请求
今天看了下 mock.js的拦截请求 .https://github.com/nuysoft/Mock/blob/master/src/mockjax.js //覆盖(拦截) Ajax 请求,目前内置 ...
- Mock.js 与 fiddler 前端模拟数据与拦截请求
最近 工作需要 接触了Mock.js. Mock.js 是一款模拟数据生成器,旨在帮助前端攻城师独立于后端进行开发,帮助编写单元测试.提供了以下模拟功能: 根据数据模板生成模拟数据 模拟 Ajax ...
随机推荐
- vue中使用baidushare分享到微信无法显示bug解决方案
最近vue单页面项目中有个页面分享的功能需求,按以往经验,选择了百度开源的baidushare.js 经过一天的挣扎,终于弄清楚了分享到微信后无法显示的原因. 对比分析: 以往成功使用:另写了一个专门 ...
- C#异步编程の----Threadpool( 线程池)
简介: 一个托管线程的创建需要数千个CPU周期,并且当发生线程切换时也会带来明显的开销.考虑线程的重用,避免不断重复创建新的线程是提高系统效率的一种方式. 线程池是一种提供效率的方式,它创建好一些线程 ...
- Vue仿抽屉
创建VUE项目的步骤: npm install vue-cli -g vue init webpack myproject cd myproject npm run dev 组件:它是可扩展的html ...
- win10搭建ftp服务器的操作方法【图文教程】
我们知道FTP是TCP/IP网络上两台计算机传送文件的协议,使得主机间可以共享文件.对于win10版本的ftp服务器搭建方法可能有部分用户还不是很清楚,下面这篇文章就是关于win10搭建ftp服务器的 ...
- 2017-2018-2 20155314《网络对抗技术》Exp9 Web安全基础
2017-2018-2 20155314<网络对抗技术>Exp9 Web安全基础 目录 实验目标 实验内容 实验环境 基础问题回答 预备知识 实验步骤--WebGoat实践 0x10 We ...
- JS进阶之---基本数据类型,引用类型,内存空间
一.内存空间: 为了便于理解,我们暂且先将Js的内存分为栈内存和堆内存. JavaScript具有垃圾自动回收机制,内存的分配与回收都完全实现了自动管理.所以我们在开发时一般会忽视内存空间的问题.但是 ...
- Git使用—第二讲
前面我们学习了Git最基本的用法,包括安装Git.创建代码仓库,以及提交本地代码.下面我们将学习Git更多的使用技巧,在开始之前,我们先给一个项目创建代码仓库,这里选择在ProviderTest项目中 ...
- 软概(lesson 2):课堂测试
一.测试题目 二.完成过程 1.设计思想 ①连接mysql数据库 ②设计user类,增加参数 ③设计add类,向数据库内增加内容 ④设计addInput页面,完成录入操作 ⑤设计add页面,接收录入的 ...
- 学习CSS布局 - 盒模型
盒模型 在我们讨论宽度的时候,我们应该讲下与它相关的另外一个重点知识:盒模型. 当你设置了元素的宽度,实际展现的元素却超出你的设置: 这是因为元素的边框和内边距会撑开元素. 看下面的例子,两个相同宽度 ...
- GIT 分支管理:创建与合并分支、解决合并冲突
分支就是科幻电影里面的平行宇宙,当你正在电脑前努力学习Git的时候,另一个你正在另一个平行宇宙里努力学习SVN. 如果两个平行宇宙互不干扰,那对现在的你也没啥影响.不过,在某个时间点,两个平行宇宙合并 ...