Mock教程

概述

通过随机数据,模拟各种场景。 开发无侵入 不需要修改既有代码,就可以拦截 Ajax 请求,返回模拟的响应数据。

主要实际应用

在做开发时，当后端的接口还未完成，前端为了不影响工作效率，手动模拟后端接口。

mock优点

1. 前后端分离
2. 可随机生成大量的数据
3. 用法简单
4. 数据类型丰富
5. 可扩展数据类型
6. 在已有接口文档的情况下，我们可以直接按照接口文档来开发，将相应的字段写好，在接口完成 之后，只需要改变url地址即可。

如何使用

下载依赖

//安装axios
npm install axios
//安装mock库
npm install mockjs

在Vue-cli中使用

创建一个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>