前端mock数据——使用mockjs进行mock数据

一、安装
二、mockjs的具体使用

一、安装

首选需要有nodejs环境
安装mockjs：npm install mockjs

若出现像上图这样的错，则只需npm install mockjs --legacy-peer-deps即可

src下新建mock文件夹：

mock
├─ api.ts // mock数据接口，前端最终调用的接口
├─ data.ts // 定义数据和规则
├─ pmockAxios.ts // 模拟数据库mock 重新封装Axios，因为baseURL不同了
├─ request.ts // 根据数据模板生成模拟数据，生成接口给前端调用

二、mockjs的具体使用

最终获取到的数据： 在这里插入图片描述

// mockAxios.ts 
// 模拟数据库mock 重新封装Axios，因为baseURL不同了，在项目中会存在后端的接口调用路径，所以再使用mock数据时需重新封装axios

// 对axios进行配置(二次封装)
import axios from 'axios'
 
const mockRequestor = axios.create({
    // 配置对象
    baseURL: '/mock',
    timeout: 5000
})
 
// 请求拦截器
mockRequestor.interceptors.request.use((config) => {
    return config
})
 
// 响应拦截器
mockRequestor.interceptors.response.use((res) => {
    return res.data
}, (err) => {
    return new Error(err)
})
 
export default mockRequestor

// data.ts 这里是mock的响应模板
// 定义数据和规则
import Mock from 'mockjs';

const data = Mock.mock({
  records: [
    {
      id: '1111',
      gmtCreate: 1710224932000,
      gmtModified: null,
      name: '测试',
      // 等等...
    },
  ],
});

const data = Mock.mock({
  records: [
    {
      id: '1111',
      gmtCreate: Mock.Random.date('yyyy-MM-dd') + ' ' + Mock.Random.time('HH:mm:ss'), // 自定义时间格式,
      gmtModified: null,
      name: '测试',
      // ...
    },
  ],
  total: 1,
  size: 100,
  current: 1,
  optimizeCountSql: true,
  searchCount: true,
  countId: null,
  maxLimit: null,
  pages: 1,
});

export default data

注意： 若有多个不同的接口可分成多个data接口文件，最后在request中引用即可。最好是将各个请求模块分开，否则容易混乱。

// service.ts 这里是响应的接口 提供给前端的接口
// 创建server入口文件
import Mock from 'mockjs';
// 导入mock数据
import data from './data';

// 根据数据模板生成模拟数据
// Mock.mock('/api/feeCategory','get',data: data.records)
// 默认get方法可不设置，其他方法需设置
Mock.mock('/mock/list', { code: 200, data: data.records });
Mock.mock('/mock/pages', { code: 200, data: data.records });

// api.ts 这里是前端最终请求mock接口的地方
import mockRequestor from './mockAxios';

/*
 * mock数据接口1
 */
export const getList = () => {
  return mockRequestor({
    method: 'GET',
    url: '/list', // 对应配置mockRequest时的URL，请求URL=baseRUL+url
  });
};

/*
 * mock数据接口2
 */
 // 需要传递参数则在这里传递即可
 export const getPage= ({current:1,size:100,total:0}) => {
   return mockRequestor({
     method: 'GET',
     url: '/pages', // 对应配置mockRequest时的URL，请求URL=baseRUL+url
   });
 };

// main.ts入口文件中  引入mock server
import '@/mock/service';

// List.vue
// 在组件中的使用
<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column
      prop="name"
      :label="t('List.name')"
      width="180"
    />
  </el-table>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref, unref, watchEffect } from 'vue';
import { useI18n } from 'vue-i18n';
import useState from '@/hooks/useState';
import { useRouter } from 'vue-router';
import { getFeeCategory } from '@/mock/api';

export default defineComponent({
  name: 'List',
  components: {
  },
  setup() {
    const { t } = useI18n();
    const router = useRouter();

    const tableData = ref<any[]>([]);

    onMounted(() => {
      const res = getList().then((result) => {
        console.log(result);
        tableData.value = result.data
        console.log(tableData.value,'value');
      });
    });

    return {
      t,
      tableData,
    };
  },
});
</script>

<style scoped></style>
<i18n src="./List.json"></i18n>