vue怎么调用mock.js 拦截ajax请求

之前做项目一直想用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()    随机生成一个邮政编码(六位数字)。
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 211,639评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,277评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,221评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,474评论 1 283
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,570评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,816评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,957评论 3 408
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,718评论 0 266
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,176评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,511评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,646评论 1 340
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,322评论 4 330
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,934评论 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,755评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,987评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,358评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,514评论 2 348