入门vue中Mock/mock.js的使用

首先来简单介绍一下mock是什么,是用来做什么的(复制的官网内容):
生成随机数据,拦截 Ajax 请求
官网给了一句话来介绍mock,按照我的个人理解,就是mock会把我们通过ajax或者axios发送的请求给拦截,并同时给我们模仿后端给返回我们需要的数据。
接下来给大家简单说一下vue中mock 的安装及使用。

安装:

npm install mockjs -D

我们执行命令后就可以在我们的项目中安装好mock的依赖,我前面说过,mock是拦截请求的,所以我们的基础是要发请求,所以安装mock的前提是安装好axios,如果有些朋友不太清楚axios的安装,我把命令贴出来:

npm install axios -S

安装完成之后,我们vue的项目就可以开始使用mock了

使用方法:
我们可以新建一个mock.js的文件,当然这个文件的名称可以随便起,然后我们在里面内容,例子如下:

var Mock = require('mockjs')
Mock.mock("/getNewsList", () => {
	return [1,12,3,5,4,45,"nihao"];
})

完成了mock.js的内容后,我们在main.js中引入mcok.js(路径写相对路径就行),代码如下:

require("./mock.js")

or

import "./mock.js"

引入文件后,我们就可以在页面中发送axios请求,如下:

import axios from "axios"

export default {
	mounted() {
		axios.get("/getNewsList").then(res => {
			console.log(res)
		})
	}
}

发送请求的时候就会把我们的定义过的请求拦截下来,然后然后我们在mock.js中设置的值。
当然,mockjs有很多有趣的方法,我只是介绍一种通俗易懂的最简单的使用方法,大家可以自行百度,查看随机的使用方法等等,这里继续贴地址:
http://mockjs.com/

对于vue的大神,可以忽略本文章

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值