在前后端分离的项目中,通常需要启动一个后台服务器来配合前端项目的接口需求。Mockjs的作用是拦截ajax请求并模拟各种数据返回,让前端开发可以更加自由独立。

安装

npm install mockjs

使用

  Mock.mock()第一个参数是需要拦截的接口,第二个参数表明ajax请求类型(get/post/put/delete等),第三个参数是模拟返回值的数据模版。

  接口可以通过字符串或者正则匹配:字符串需要和接口完全一样,正则只需要一部分匹配就行。请求类型参数如果省略,就表示任何类型的请求都可以拦截。数据模版可以生成各种随机数据,参见语法规范

import Mock from "mockjs";

/*** 设置随机的接口响应时间,10-2500毫秒 ***/
Mock.setup({
timeout: '10-2500'
}) /*** 监听user接口,采用正则匹配 ***/
Mock.mock(/\/user/, {
info: {
name: Mock.Random.cname(),
"age|12-38": 1,
"sex|1": ["male", "female"]
}
})
$.ajax({
url: '/user/1111'
}).done(function(data, status, jqXHR) {
console.log(JSON.stringify(data, null, 4))
}) /*** 监听list接口,采用字符串匹配 ***/
Mock.mock("/list","post", {
'info|15-25': [{
'index|+1': 1,
'name': '@first @last',
'id': '@integer( 10000, 99999 )',
'date': '@datetime',
'img': "@image('200x200')",
'prod': "@sentence( 6, 22 )" }]
})
$.ajax({
url: '/list',
dataType: 'json',
type:'post'
}).done(function(data, status, jqXHR) {
console.log(JSON.stringify(data, null, 4))
})

  将mockjs相关代码写在独立的js文件里,开发时引用该文件,打包时去掉对该文件的引用即可。

Mockjs 前端接口数据模拟的更多相关文章

  1. JavaScript闭包应用场合——控制前端接口轮训

    很多人都知道JavaScript的闭包,也知道大致是一个什么意思,但是对于闭包的应用场合不是很清楚 最近在改造项目的过程之中修改前端接口轮训方式的时候用到了闭包驱动setTimeout来实现一个类似定 ...

  2. 后端拜拜,用不到你了,前端开发数据模拟神器nodejs

    后端拜拜,用不到你了,前端开发数据模拟神器nodejs 欢迎关注博主公众号「java大师」, 专注于分享Java领域干货文章, 关注回复「资源」, 免费领取全网最热的Java架构师学习PDF, 转载请 ...

  3. 前端Json数据模拟神器mockJs使用教程

    一般项目做法: <html> <head> <script src="http://requirejs.org/docs/release/2.1.16/comm ...

  4. Mock.js 虚拟接口 数据模拟

    Mock.js 是一款前端开发中拦截Ajax请求再生成随机数据响应的工具.可以用来模拟服务器响应. 优点是非常简单方便, 无侵入性, 基本覆盖常用的接口数据类型. 大概记录下使用过程, 详细使用可以参 ...

  5. vue项目中使用mockjs模拟接口返回数据

    Mock.js 是一个模拟数据生成器,利用它,可以拦截ajax请求,直接模拟返回数据,这样前后端只要约定好数据格式,前端就不需要依赖后端的接口,可以直接使用模拟的数据了. 网上介绍mock的教程也较多 ...

  6. ModelProxy 前端接口配置建模框架

    ModelProxy    轻量级的接口配置建模框架(1) 先看一下这个博客说明为什么需要用ModelProxy的前端轻量级的框架吧:  http://developer.51cto.com/art/ ...

  7. 前端接口自动化测试工具-DOClever使用介绍(转载)

    DOClever 不仅集成了文档编写,团队协作,接口运行,mock 数据等功能,还有两个功能是让我们团队大大的提高工作效率的.一个是接口的自动化生成,可以根据接口数据自动生成文档信息,还有一个便是本文 ...

  8. node起本地服务器以及实现代理,前端接口转发

    上一篇文章写了使用docker来做nginx镜像实现本地的页面代理以及接口转发,但是需要下载docker,这个对于很多人来说还是显得比较麻烦,于是这个文章就是介绍如何只用node就可以代理本地的页面和 ...

  9. nodejs前端接口与状态转换调试

    和UI无关的逻辑用browser 调有时不太方便,配置 node 命令行调试环境方法如下: cnpm install @babel/core @babel/cli @babel/register @b ...

随机推荐

  1. 安装Centos7 随手记

    1.老笔记本安装Centos7 配置:酷睿I3  内存8G 2.原有系统Win7 将原来的硬盘空间,调整出60G 给Centos7 用. 3.安装Centos7 图形介面的,和windows安装过程类 ...

  2. JNI 简单例子

    原文:http://www.cnblogs.com/youxilua/archive/2011/09/16/2178554.html 1,先把c语言的编译环境搭建好,windows下这里使用mingw ...

  3. JavaScript -- Window-Resize

    -----036-Window-Resize.html----- <!DOCTYPE html> <html> <head> <meta http-equiv ...

  4. wordpress中常用的一些php代码

    <?php the_author(); ?> 显示文章的作者 <?php the_author_description(); ?> 显示文章作者的描述(作者个人资料中的描述) ...

  5. 如何查找SHELL的进程号并杀死

    一.shell查找进程并杀死 #!/bin/sh tomcat_id=`ps -ef | grep tomcat | grep -v "grep" | awk '{print $2 ...

  6. Visual Studio最好用的快捷键(你最喜欢哪个)

    每次在网上搜关于VS有哪些常用快捷键的时候,出来的永远是一串长的不能再长的列表,完全没体现出“常用”二字,每次看完前面几个就看不下去了,相信大家都 有这种感觉.其实我们平时用的真的只有很少的一部分,借 ...

  7. solr(一) : 整合 tomcat

    前面 lucene 初探 都是为了solr打基础的. 虽然lucene 的filter 没有涉及, 但是打基础, 差不多够用了. 一. solr 和 lucene 的区别 这里我就用自己的理解来说了, ...

  8. Python多版本管理器-pyenv 介绍及部署记录

    一. pyenv简单介绍 在日常运维中, 经常遇到这样的情况: 系统自带的Python是2.x,而业务部署需要Python 3.x 环境, 此时需要在系统中安装多个Python版本,但又不能影响系统自 ...

  9. linux编译找不到aprt apr-util

    Linux很多地方编译的时候都会用到apr 如果找不到apr就会报错 configure: WARNING: APR not found The Apache Portable Runtime (AP ...

  10. 第一次项目上Linux服务器(五:CentOS7下Mysql数据库的安装与配置(转))

    好像在CentOS 7系统中,默认安装的mysql是它的分支mariadb.所以不能像CentOS-6.3那样安装,如下: [root@izwz ~]# yum -y install mysql my ...