Mock.js入门分享

---

---

一、安装Mock.js

官网：Mock官方
场景：在Vue项目中利用Mock.js模拟数据
首先，在Vue项目中安装axios、Mock.js，在项目目录下执行如下代码即可：

之后，可以在package.json中查看到，就说明安装成功了。

在main.js中引入mock.js和axios：

二、模拟GET请求

在src目录下创建mock文件夹，里面创建mock.js文件。
参考官方文档：

Mock函数接收三个参数，其中前两个是可选的参数，最后一个参数是必传的。

• 第一个参数：要拦截的请求地址
• 第二个参数：请求类型
• 第三个参数：传数据的模板或者函数

下面模拟了一个get请求，第一个参数是请求路径，请求路径为/obtain；第二个参数是请求类型，为get类型；第三个参数是返回的数据，这里有利用到Mock的随机函数。

在CardView.vue中利用按钮获取mock数据，this.$axios.get 表示使用get请求，“/obtain” 代表访问路径。

运行项目，点击按钮，控制台就会输出mock模拟的数据：

三、模拟POST请求

下面模拟了一个post请求，第一个参数是请求路径，请求路径为/requestPostData；第二个参数是请求类型，为post类型；第三个参数是请求体携带的参数。

在页面中定义一个按钮来调用请求，this.$axios.post 表示使用post请求，“/requestPostData” 代表访问路径，{pid:5}代表post请求携带的参数。

运行浏览器，点击按钮，可以看到POST请求成功了！

四、Mock随机函数

官方教程里面提供了很多随机函数，引用直接使用 @函数名 函数具体用法大家可以查阅官方文档。
举例：GET请求获取数据使用Mock随机函数

在页面中写点击事件：

点击按钮，控制台就会输出1条随机的数据，可以看到每次点击输出的内容都是不一样的。

需求：想每次点击按钮不止生成一个数据，而是多个数据，应该怎么办呢？

方法：可以给data加一个引号（单双引号都可），并且中间加一个 | 符号，后面加上数字3， 即”data | 3” 表示生成3条数据。

在页面中添加一个表格，用模拟数据来渲染表格。

进入项目，就可以看到表格中生成了3条随机的数据。

补充：”data | 3-6” 表示随机生成3-6条数据。

---

总结

这就是目前了解到的内容，欢迎大家补充指正~