之前做项目一直想用mock.js,种种原因也没怎么用，现在闲下来时间找了mock.js的一些知识，给自己补习了一下，顺便的也记录一下，方便学习。废话不多说，直接上教程（配合vue.js项目）。
1、首先安装mock.js
npm install mockjs --save-dev
2、在src目录下新建mock文件，里面添加一个mock.js，其内容如下：
import Mock from 'mockjs' Mock.mock('http://test123.com', {//这里的url地址其实可以换成一个字段，比如msg,下边请求时候对应就可以 'name': '@cname', 'age|1-10': 10 }) Mock.mock('http://myname.com','post', {//这里的url地址其实可以换成一个字段，比如msg,下边请求时候对应就可以 'data|1-2':[{ 'title':'@title', 'article':'@csentence' }] })
3、在vue页面里的ajax请求调用
<script> import '@/mock/mock.js'; export default{ name:"test", data(){ return{ } }, mounted (){ this.getlist() }, methods:{ getlist(){ axios('get','http://test123.com').then((res) => {//这里post和get都行 console.log(res) //输出结果：{ "name": "李秀英", "age": 7 } //结果是随机的，也有可能是其他值 }) axios('post','http://myname.com').then((res) => {//这里必须是post请求，因为上边定义了type类型是post console.log(res) //输出结果：{ "data": [ { "title": "Lfw Pbljsjgcu Zsiyvzc Tahgecies", "article": "铁十入易团江无体之车和基出们应车。" } ] }； // 结果是随机的，也有可能是其他值 }) } } } </script>
关于mock.js生成规则的一些常用方式，记录以便查看。详情请查阅：http://mockjs.com/0.1/#time
Mock.mock()
方法 含义 Mock.mock( template ) 根据数据模板生成模拟数据。 Mock.mock( rurl, template ) 记录数据模板。当拦截到匹配 rurl 的 Ajax 请求时，将根据数据模板 template 生成模拟数据，并作为响应数据返回。 Mock.mock( rurl, function( options ) ) 记录用于生成响应数据的函数。当拦截到匹配 rurl 的 Ajax 请求时，函数 function(options) 将被执行，并把执行结果作为响应数据返回。 Mock.mock( rurl, rtype, template ) 记录数据模板。当拦截到匹配 rurl 和 rtype 的 Ajax 请求时，将根据数据模板 template 生成模拟数据，并作为响应数据返回。 Mock.mock( rurl, rtype, function( options ) ) 记录用于生成响应数据的函数。当拦截到匹配 rurl 和 rtype 的 Ajax 请求时，函数 function(options) 将被执行，并把执行结果作为响应数据返回。
Mock.Random
Mock.Random 是一个工具类，用于生成各种随机数据。
（1）、Basic
方法 含义 Random.boolean( min?, max?, current? ) 返回一个随机的布尔值。 Random.natural( min?, max? ) 返回一个随机的自然数（大于等于 0 的整数）。 Random.integer( min?, max? ) 返回一个随机的整数。 Random.float( min?, max?, dmin?, dmax? ) 返回一个随机的浮点数。 Random.character( pool? ) 返回一个随机字符 Random.string( pool?, min?, max? ) 返回一个随机字符串。
（2）、 Date
方法 含义 Random.date(format) 返回一个随机的日期字符串。 Random.time( format? ) 返回一个随机的时间字符串。 Random.datetime( format? ) 返回一个随机的日期和时间字符串。 Random.now( unit?, format? ) 返回当前的日期和时间字符串。
（3）、 Image
方法 含义 Random.image( size?, background?, foreground?, format?, text? ) 生成一个随机的图片地址。 Random.dataImage( size?, text? ) 生成一段随机的 Base64 图片编码。
（4）、Text
方法 含义 Random.paragraph( min?, max? ) 随机生成一段文本。 Random.cparagraph( min?, max? ) 随机生成一段中文文本。 Random.sentence( min?, max? ) 随机生成一个句子，第一个单词的首字母大写。 Random.csentence( min?, max? ) 随机生成一段中文文本。 Random.word( min?, max? ) 随机生成一个单词。 Random.cword( pool?, min?, max? ) 随机生成一个汉字。 Random.title( min?, max? ) 随机生成一句标题，其中每个单词的首字母大写。 Random.ctitle( min?, max? ) 随机生成一句中文标题。
（5）、Name
方法 含义 Random.first() 随机生成一个常见的英文名。 Random.last() 随机生成一个常见的英文姓。 Random.name( middle? ) 随机生成一个常见的英文姓名。 Random.cfirst() 随机生成一个常见的中文名。 Random.clast() 随机生成一个常见的中文姓。 Random.cname() 随机生成一个常见的中文姓名。
（6）、Web
方法 含义 Random.url( protocol?, host? ) 随机生成一个 URL。 Random.protocol() 随机生成一个 URL 协议。 Random.domain() 随机生成一个域名。 Random.tld() 随机生成一个顶级域名（Top Level Domain）。 Random.email( domain? ) 随机生成一个邮件地址。 Random.ip() 随机生成一个 IP 地址。
（7）、Address
方法 含义 Random.region() 随机生成一个（中国）大区。 Random.province() 随机生成一个（中国）省（或直辖市、自治区、特别行政区）。 Random.city( prefix? ) 随机生成一个（中国）市。 Random.zip() 随机生成一个邮政编码（六位数字）。
