首先来简单介绍一下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的大神,可以忽略本文章