一:安装

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的简易使用的更多相关文章

  1. 来,我们手写一个简易版的mock.js吧(模拟fetch && Ajax请求)

    预期的mock的使用方式 首先我们从使用的角度出发,思考编码过程 M1. 通过配置文件配置url和response M2. 自动检测环境为开发环境时启动Mock.js M3. mock代码能直接覆盖g ...

  2. Mock.js简易教程,脱离后端独立开发,实现增删改查功能(转)

    在我们的生产实际中,后端的接口往往是较晚才会出来,并且还要写接口文档,于是我们的前端的许多开发都要等到接口给我们才能进行,这样对于我们前端来说显得十分的被动,于是有没有可以制造假数据来模拟后端接口呢, ...

  3. mock.js 模拟数据

    1. 劫持请求,返回模拟数据: 用于前后台对接前数据模拟 相比于静态json文件而言:代码完成后不必修改源文件对应的接口调用.可模拟增删改查 2.实例代码 <!doctype html> ...

  4. mock.js

    mock.js http://mockjs.com/ https://github.com/nuysoft/Mock/wiki 为了完成angularjs的karma测试,看到这个好东东,这货能拦截a ...

  5. 使用 mock.js 让前端开发与后端独立

    直接上代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...

  6. 前后端分离开发——模拟数据mock.js

    mock.js 生成模拟数据,拦截ajax请求 <script type="text/javascript" src="http://libs.baidu.com/ ...

  7. Mock.js:前后端分离开发工具

    概述 Mock.js实现的功能 基于 数据模板 生成数据 基于 HTML模板 生成数据 拦截并模拟 Ajax请求 用法 浏览器: <!-- (必选)加载 Mock --> <scri ...

  8. mockjax MOCK.js的拦截ajax请求

    今天看了下 mock.js的拦截请求 .https://github.com/nuysoft/Mock/blob/master/src/mockjax.js //覆盖(拦截) Ajax 请求,目前内置 ...

  9. Mock.js 与 fiddler 前端模拟数据与拦截请求

    最近 工作需要  接触了Mock.js. Mock.js 是一款模拟数据生成器,旨在帮助前端攻城师独立于后端进行开发,帮助编写单元测试.提供了以下模拟功能: 根据数据模板生成模拟数据 模拟 Ajax ...

随机推荐

  1. ug nx7.5安装方法(图文详解)

           UG7.5,也称NX7.5,自卑西门子收购,软件名字已经改为SIEMENS NX了,ug7.5是一套集成了CAD.CAE 和CAM解决方案,能为设计师们提供最功能齐全的设计环境,能够大大 ...

  2. python五十七课——正则表达式(元字符)

    1).匹配单个字符(数字.英文.其它) 符号位: []:表示一个字符位 [0123456789]:表示一位,取值范围:[0,9]之间的任何一个值 [0-9]:表示一位,取值范围:[0,9]之间的任何一 ...

  3. 【转】curl 命令行下载工具使用方法小结

    获取curl curl 命令行下载工具 curl的官方网站为: http://curl.haxx.se官方下载页面为:http://curl.haxx.se/download.html 你可能并不清楚 ...

  4. laravel 使用构造器进行增删改查

    使用原生语句进行增删改查 //$list = DB::select('select * from wt_category where id = :id', ['id' => 34]); //$i ...

  5. mysql explain(转)

    explain显示了mysql如何使用索引来处理select和表连接 转自http://blog.csdn.net/zhuxineli/article/details/14455029 explain ...

  6. 深入浅出的webpack构建工具---webpack3版本的CommonsChunkPlugin详解(六)

    阅读目录 一:什么是CommonsChunkPlugin, 它的作用是什么? 二:webpack3中CommonsChunkPlugin配置项及含义? 回到顶部 一:什么是CommonsChunkPl ...

  7. MySQL 误操作后如何快速恢复数据~!~!~

    基本上每个跟数据库打交道的程序员(当然也可能是你同事)都会碰一个问题,MySQL误操作后如何快速回滚?比如,delete一张表,忘加限制条件,整张表没了.假如这还是线上环境核心业务数据,那这事就闹大了 ...

  8. 【Codeforces 1109C 】Sasha and a Patient Friend

    Codeforces 1109 C 题意:现在有个碗,每时每刻其中的水量都会加一个整数(可以为负). 给\(n\)个询问,询问有\(3\)种类型: \(1\ t\ s\):将从第\(t\)秒开始水量增 ...

  9. HDU 1109 Run Away

    题目大意:给一个矩阵的长宽,再给n个点,求矩阵区域内某个点到各个点的最小距离的最大值,输出所求点的坐标 这道题我还是写了随机化乱搞,不过由于比较懒于是就没有写模拟退火,不过也是可以AC的 我们先初始随 ...

  10. TCP 三次握手原理,你真的理解吗?

    最近,阿里中间件小哥哥蛰剑碰到一个问题——client端连接服务器总是抛异常.在反复定位分析.并查阅各种资料文章搞懂后,他发现没有文章把这两个队列以及怎么观察他们的指标说清楚. 因此,蛰剑写下这篇文章 ...