MOCK数据的简单使用

1.什么是mock?

在前后端分离的开发和测试过程中，由于环境不稳定或者是协同开发的同事还没完成所需的接口，有些数据不容易构造或者不容易获取，需要创建一个虚拟的对象或者虚拟数据，用来辅助开发或者测试工作,提高开发或者测试的效率

2.本地mock数据

1.首先在项目下载mockjs与axios

cnpm install mockjs -S

cnpm install axios

2.在src文件夹新建api文件夹 ,并在api文件中新建MockData文件夹以及mock.js

1662991218540

3.mockData文件中定义home.js数据并导出

export default {
  getHomeData: () => {
    return {
      code: 200,
      data: {
        tableData: [
          {
            name: 'oppo',
            todayBuy: 500,
            monthBuy: 3500,
            totalBuy: 22000,
          },
             {
            name: '小米',
            todayBuy: 500,
            monthBuy: 3500,
            totalBuy: 22000,
          },
             {
            name: '三星',
            todayBuy: 500,
            monthBuy: 3500,
            totalBuy: 22000,
          },
             {
            name: '魅族',
            todayBuy: 500,
            monthBuy: 3500,
            totalBuy: 22000,
          },
             {
            name: 'vivo',
            todayBuy: 500,
            monthBuy: 3500,
            totalBuy: 22000,
          },
             {
            name: '苹果',
            todayBuy: 500,
            monthBuy: 3500,
            totalBuy: 22000,
          },
        ],
      },
    };
  },
};

4.在mock.js中导入mock并且拦截写好的数据

//导入mock数据中的 
import Mock from 'mockjs';
import homeApi from './mockData/home'; // home.js 数据

//拦截请求  
Mock.mock('/home/getData', homeApi.getHomeData);

5.在main.js中挂载mock.js

import { createApp } from 'vue';
import './style.css';

// import ElementPlus from 'element-plus';
// import 'element-plus/dist/index.css';
import App from './App.vue';

import './assets/less/index.less';
import router from './router/index';

//mock
import './api/mock';

6.在home.vue文件中读取mock的数据

<script setup>
//定义数据
import { onMounted } from 'vue';

import axios from 'axios';

const getHomeData = async () => {
  await axios.get('/home/getData').then((res) => {
    console.log(res);
  });
};

//挂载时触发
onMounted(() => {
  getHomeData();
});
</script>

7.在浏览器中查看数据

1662991522952

3.简单体验线上mock数据

首先这里介绍一个线上的fastmock的网站,进行线上mock数据 ,进行注册登录进入页面

1.新建一个项目

1663238964193

2.新建项目的一个接口

1663239005328

3.完成接口的描述并且完成接口返回数据(json格式)

1663239830456

4.查看线上返回数据

1663239219211

5.获取请求的数据路径

1663239563544

6.项目中实现请求数据

将复制的url路径放置在axios请求地址中即可

<script setup>
//定义数据

import { onMounted, ref } from 'vue';

import axios from 'axios';

const tableData = ref([]);

const getHomeData = async () => {
  await axios
    .get(
      'https://www.fastmock.site/mock/f521edebd1e4d2bbd642ecd3b9bbe51e/api/api/getTableData'
    )
    .then((res) => {
      //判断当前状态码是否为200保存数据
      console.log(res);
      if (res.data.code === 200) {
        tableData.value = res.data.data.tableData;
      }
    });
};

//挂载时触发
onMounted(() => {
  getHomeData();
});


</script>

7.浏览器打印查看线上mock数据

1663239708214

4.总结本地mock和线上mock

1.本地mock数据需要下载mocjs,并且要在main中引用

2.线上mock数据,可以不要下载mockjs,只需要在线上网站实现接口的描述和返回数据的声明即可(需要有网络环境才行)

mock数据的简单使用