mock.js使用指南

首先什么是mock.js

Mock.js （官网http://mockjs.com/）是一款模拟数据生成器，旨在帮助前端攻城师独立
于后端进行开发，帮助编写单元测试。提供了以下模拟功能：

mock.js特点？

前后端分离,让前端攻城师独立于后端进行开发。
增加单元测试的真实性
通过随机数据，模拟各种场景。
开发无侵入
不需要修改既有代码，就可以拦截 Ajax 请求，返回模拟的响应数据。
用法简单
符合直觉的接口
数据类型丰富
支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等。
方便扩展
支持支持扩展更多数据类型，支持自定义函数和正则。

mock.js在Vue中的使用

安装mock.js

npm install --save-dev mockjs

在src目录下创建mock文件夹，并创建index.js文件，内容如下：

import Mock from 'mockjs'const data={ "id":"@guid","name":"@cname",
};Mock.mock('/api/test', 'post', data)export default Mock;

在main.js中引入mock文件下的index.js文件

import '@/mock/mock.js'

App.vue中使用

<template><div id="app"><img src="./assets/logo.png"><span>{{$t("global.test")}}</span><button @click="testReq">测试请求</button><router-view/></div>
</template><script>
import Cookie from './util/cookie'
import Axios from 'axios'export default {name: 'App',methods:{testReq:function(){Axios.post('/api/test').then((res) => {console.log(res)}).catch((err) => {console.log(err)})}}
}</script>

常用数据占位符

//数据占位符使用
{"integer": "@integer(10, 30)",  //随机生成一个10～30之间的正整数"float": "@float(60, 100, 2, 2)",  //随机生成浮点数，参数分别为整数部分最小值和最大值、小数部分保留最小位数和最大位数"boolean": "@boolean",       //随机生成boolean"string|1-2": "@string",     //随机生成字符串"name":"@cname",             //随机生成名字"date": "@date(yyyy-MM-dd)", //按照格式随机生成时间"datetime": "@datetime",     //随机生成时间"now": "@now",               //当前时间"id": "@id",                 //随机生成一个 18 位身份证"guid": "@guid",             //随机生成一个 GUID"url": "@url",               //随机生成url字符串"email": "@email",           //随机生成邮箱"image": "@image(200x200)",  //随机生成一个大小为200x200的图片链接"title": "@title",           //随机生成一句标题，其中每个单词的首字母大写"upper": "@upper(@title)",   //把生随机成的标题全部转为大写"cparagraph": "@cparagraph", //随机生成一段中文文本"csentence": "@csentence",   //随机生成一段中文文本"range": "@range(2, 10)" ,   //返回一个内容从2开始到9的整型数组"region": "@region",         //随机生成地区 华中"province": "@province",     //随机生成省会 省"city": "@city",             //随机生成城市 市"county": "@county",         //随机生成一个（中国）县
}

mock.js使用指南相关推荐

使用mock.js提供模拟数据
Mock.js 官网:链接地址官方说明: *前后端分离,让前端工程师独立于后端开发. *增加单元测试的真实性,通过随机数据,模拟各种场景. *开发无侵入,不需要修改既有代码,就可以拦截ajax请求, ...
RAP Mock.js语法规范
Mock.js 的语法规范包括两部分: 数据模板定义规范(Data Template Definition,DTD) 数据占位符定义规范(Data Placeholder Definition,DPD ...
vue-vue项目中mock.js的使用
mock.js 官网地址:mockjs.com/ mockjs是用来模拟产生一些虚拟的数据,可以让前端在后端接口还没有开发出来时独立开发.我们可以使用真实的url,mockjs可以拦截ajax请求,返 ...
《Node.js开发指南》书评汇总
刚查了下库存,发现订阅<Node.js开发指南>的读者大增,这是为什么呢?看了下近期本书在豆瓣的评论,口碑很好,现将豆瓣的书评汇总如下: ------------------------- ...
用node.js启动mock.js
Node.js Node 是一个让 JavaScript 运行在服务端的开发平台,它让 JavaScript 成为与PHP.Python.Perl.Ruby 等服务端语言平起平坐的脚本语言.官网下载n ...
使用Nodejs创建基本的网站 Microblog--《Node.js开发指南》 1
使用Web框架 -- Express express -g 全局安装 express express_examplename install dependencies: $ cd express_e ...
《JS权威指南学习总结--1.1语言核心》
1.1语言核心 --本节主要介绍<js权威指南>基础部分各章讲解内容和一些简单的示例本小节内容: 一.第二章讲解js注释.分号和Unicode,第三章主要讲解js变量和赋值简单示例: ...
使用Mock.js进行独立于后端的前端开发
概述 Mock.js实现的功能基于数据模板生成数据基于 HTML模板生成数据拦截并模拟 Ajax请求用法浏览器:  <scri ...
小弟的新书《Ext JS权威指南》终于出版了
链接:http://product.china-pub.com/3661375&weibo#ml <ext js权威指南> 前言第1章 ext js 4开发入门 / 1 1.1 ...
Mock.js mysql_平台支持mock功能—未完成版
项目背景: 目前测试接口有些是依赖第三方接口,若第三方接口出现异常,会对测试进度有所影响.需要开发mock相关功能辅助测试. 技术选型: 1.前端:python+xadmin+django+mysql ...

mock.js使用指南

首先什么是mock.js

mock.js特点？

mock.js在Vue中的使用

常用数据占位符

mock.js使用指南相关推荐

最新文章

热门文章