Mock 基础作用

1. 前后端项目同时开发，后端接口并未出来时，可以使用mock来进行数据模拟。
2. 进行ajax请求拦截

安装

npm i mockjs

Mock模拟数据

export default {
  getUserData: () => {
    return {
      code: 200,
      data: {
        user: {
          avatar: '/avatar.webp',
          username: 'Weko',
          nickname: 'Weko',
        },
      },
    };
  },
};

Mock配置

import Mock from 'mockjs';
import userApi from './mockData/user.ts';
import getMessageApi from './mockData/messagePrompt.ts';
​
// 拦截请求
// 第一个参数是路径，第二个是返回的数据
Mock.mock('/api/home/getData', userApi.getUserData);
Mock.mock('/api/navbar/getMessageData', getMessageApi.getMessageData);

引入Mock

// 项目入口文件(main.ts / main.js)中引入 Mock
import './mock/mock';

项目中使用Mock

1. Api文件中封装接口

import request from './request';
​
export const login = () => {
  return request({
    url: '/home/getData',
    method: 'get',
  });
};
​
export const getMessageData = () => {
  return request({
    url: '/navbar/getMessageData',
    method: 'get',
  });
};

2. vue文件中使用接口

<script setup lang="ts">
import { login, getMessageData } from '@/api/user.ts';
​
const userList = ref<User>({
  avatar: '',
  username: '',
  nickname: '',
});
​
const messageList = ref<string[]>([]);
​
onMounted(() => {
  // Get user information and message data
  login().then(res => {
    userList.value = res.data.data.user;
  });
  // Get message data
  getMessageData().then(res => {
    messageList.value = res.data.data.tableData;
  });
});
</script>