在Vue项目中使用Mock
一、Mock介绍mock.js可以通过随机数据来模拟各种场景,不需要修改既有代码,就可以拦截 Ajax请求,返回模拟的响应数据;支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等;支持支持扩展更多数据类型,支持自定义函数和正则,非常简单方便,无侵入性, 基本覆盖常用的接口数据类型。结合vue使用1.安装使用yarn安装yarn add mockjs2 --save2.引入mock.j
·
一、Mock介绍
mock.js可以通过随机数据来模拟各种场景,不需要修改既有代码,就可以拦截 Ajax
请求,返回模拟的响应数据;支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等;支持支持扩展更多数据类型,支持自定义函数和正则,非常简单方便,
无侵入性, 基本覆盖常用的接口数据类型。
结合vue使用
1.安装
使用yarn安装
yarn add mockjs2 --save
2.引入mock.js
通过vue脚手架搭建的项目,在src目录下创建mock文件夹区分。
在mock文件夹下面创建文件index.js,以及模拟接口模块api文件夹,其中index.js内容如下:
// 判断环境不是 prod 或者 preview 是 true 时,加载 mock 服务
if (process.env.NODE_ENV !== 'production' || process.env.VUE_APP_PREVIEW === 'true') {
// 使用同步加载依赖
const Mock = require('mockjs2')
const fs = require("fs");
require('./api/user')
Mock.setup({
timeout: 100 // 请求延时时间
})
console.log('#####################启动Mock服务#####################')
}
在api文件夹下面创建接口模拟服务user.js
import Mock from "mockjs2";
//获取用户数据
Mock.mock(/\/api\/user\/user/, "get", {
status: 200,
message: "success",
data: {
"id|+1": 1, // 模拟自增+1
id: "@increment(1)", // 自增的数字
name: "@cname()", // 中文名称
introduce: "@cword(10,20)", // 中文字
img: "@dataImage(64x64)" // 图片
}
});
在main.js中引入mock
import './mock'
3.使用测试
在测试页面里面使用
<template>
<div>
<button @click="this.getUser">加载信息按钮</button><br>
</div>
</template>
<script>
import axios from "axios";
export default {
components: {},
data: function () {
return {
};
},
created() {
},
mounted() {
},
methods: {
getUser() {
axios.get("/api/user/user").then(res => {
console.log(res.data)
});
}
}
};
</script>
效果图:
更多推荐
已为社区贡献2条内容
所有评论(0)