概述
通过随机数据,模拟各种场景。 开发无侵入 不需要修改既有代码,就可以拦截 Ajax 请求,返回模拟的响应数据。
在做开发时,当后端的接口还未完成,前端为了不影响工作效率,手动模拟后端接口。
mock优点
- 前后端分离,
- 可随机生成大量的数据
- 用法简单
- 数据类型丰富
- 可扩展数据类型
- 在已有接口文档的情况下,我们可以直接按照接口文档来开发,将相应的字段写好,在接口完成 之后,只需要改变url地址即可。
使用
下载依赖
//安装axios
npm install axios
//安装mock库
npm install mockjs
在Vue-cli中使用
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0gMt3U7d-1629256665579)(https://imxing-blog.csdnimg.cn/947cab980769425c89d1e519b4e17ff9.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NydExpZmU=,size_16,color_FFFFFF,t_70)]
创建一个mock文件夹
添加index.js
import Mock from 'mockjs'
import info from './data'
//import data from './data.json'
//设置拦截响应时间 2s
Mock.setup({timeout:2000})
//拦截请求
Mock.mock('http://localhost:8080/login','get',info.page1)
再添加一个data.js 用来设置模拟数据
const page1 = {
code: 0, data:
{
'data|10': [
{
id: '@id',//随机id
name: '@name',//随机名称
nickname: '@last',//随机昵称
phone: /^1[34578]\d{9}$/,//随机电话号码
'age|11-99': 1,//年龄
address: '@county(true)',//随机地址
email: '@email',//随机邮箱
ismale: '@boolean',//随机性别
createtime: '@datetime',//创建时间
}
]
}
}
export default {
page1,
}
在main.js中导入
在组件中使用
<template>
<div>hhh</div>
</template>
<script>
import { login } from './api/login'
// import {message} from 'ant-design-vue'
export default {
name: 'App',
components: {
},
created(){
//这里我封装了axios
//发起请求
login().then(res=>{
console.log(res)
//antd 提示框组件
this.$message.loading('success')
})
},
}
</script>
<style>
</style>
结果