• vben admin 当中使用 mock 模拟数据以及对响应数据进行处理

    vben admin 当中使用 mock 模拟数据

    前言

    这篇文章记录了在 vben admin 框架中使用 mock 来模拟请求

    提示：以下是本篇文章正文内容，下面案例可供参考

    一、在 mock 包中准备数据和接口

    在 mock包中创建文件 \test\mock.ts

    // \test\mock.ts 
import { MockMethod } from 'vite-plugin-mock';
import { resultSuccess } from '../_util';

// 准备的模拟物联网卡数据
const simApiMockData = {
  code: 0,
  result: {
    list: [
      {
        id: '1555042387559780352',
        deviceId: '2206101',
        deviceName: '2222',
        iccid: '89860483162090515058',
        msisdn: '1440832155058',
        imsi: '460080321505058',
        state: { text: '停机', value: 'stop' },
        fakeState: { text: '待激活', value: 'notActive' },
        createTime: 1.659585971141e12,
        activeDate: 1.6592832e12,
        openDate: 1.6589376e12,
        modifyTime: 1.659585971141e12,
      },
      {
        id: '1562280375538700288',
        deviceId: '2205909',
        deviceName: '2205909',
        iccid: '89860483162090515069',
        msisdn: '1440832155069',
        imsi: '460080321505069',
        state: { text: '已激活', value: 'activated' },
        fakeState: { text: '待激活', value: 'notActive' },
        createTime: 1.661311641949e12,
        activeDate: 1.6596288e12,
        openDate: 1.6589376e12,
        modifyTime: 1.661311641949e12,
      },
      {
        id: '1565246034465939456',
        deviceId: '2209002',
        deviceName: '2209002',
        iccid: '89860483162090515062',
        msisdn: '1440832155062',
        imsi: '460080321505062',
        state: { text: '已激活', value: 'activated' },
        fakeState: { text: '待激活', value: 'notActive' },
        createTime: 1.662018710137e12,
        activeDate: 1.6614432e12,
        openDate: 1.6589376e12,
        modifyTime: 1.662018710137e12,
      },
      {
        id: '1582305527906983936',
        deviceId: '2208101',
        deviceName: '2208101',
        iccid: 'RS232_NET',
        imsi: 'RS232_NET',
        state: { text: '待激活', value: 'notActive' },
        fakeState: { text: '待激活', value: 'notActive' },
        createTime: 1.666086010323e12,
        modifyTime: 1.666086010323e12,
      },
      {
        id: '1582546476625059840',
        deviceId: '2208102',
        deviceName: 'AAA-网线',
        iccid: 'RS232_NET',
        imsi: 'RS232_NET',
        state: { text: '待激活', value: 'notActive' },
        fakeState: { text: '待激活', value: 'notActive' },
        createTime: 1.666143456976e12,
        modifyTime: 1.666143456976e12,
      },
    ],
    count: 5,
    pageNo: 1,
    pageSize: 20,
  },
  message: 'success',
};
// 准备的模拟数据
const roleManagementData = {
  code: 0,
  result: {
    list: [
      {
        createTime: 1609837428000,
        updateTime: 1645477700000,
        creator: 'admin',
        updater: '',
        deleted: false,
        tenantId: '1',
        id: '2',
        name: '普通角色',
        code: 'common',
        sort: 2,
        status: 0,
        type: 1,
        remark: '普通角色',
        dataScope: 2,
      },
      {
        createTime: 1609912175000,
        updateTime: 1653725465000,
        creator: '',
        updater: '1',
        deleted: false,
        tenantId: '1',
        id: '101',
        name: '测试账号',
        code: 'test',
        sort: 0,
        status: 0,
        type: 2,
        remark: '132',
        dataScope: 1,
        dataScopeDeptIds: [],
      },
      {
        createTime: 1609837428000,
        updateTime: 1645477701000,
        creator: 'admin',
        updater: '',
        deleted: false,
        tenantId: '1',
        id: '1',
        name: '超级管理员',
        code: 'super_admin',
        sort: 1,
        status: 0,
        type: 1,
        remark: '超级管理员',
        dataScope: 1,
      },
    ],
    count: 3,
    pageNo: 1,
    pageSize: 20,
  },
  message: '操作成功',
};
// 准备接口
export default [
  {
    url: '/basic-api/v1/device/sim/_query',
    timeout: 1000,
    method: 'post',
    response: () => {
      return resultSuccess(simApiMockData);
    },
  },
  {
    url: '/basic-api/system/role/page',
    timeout: 1000,
    method: 'get',
    response: () => {
      return resultSuccess(roleManagementData);
    },
  },
] as MockMethod[];

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92
    • 93
    • 94
    • 95
    • 96
    • 97
    • 98
    • 99
    • 100
    • 101
    • 102
    • 103
    • 104
    • 105
    • 106
    • 107
    • 108
    • 109
    • 110
    • 111
    • 112
    • 113
    • 114
    • 115
    • 116
    • 117
    • 118
    • 119
    • 120
    • 121
    • 122
    • 123
    • 124
    • 125
    • 126
    • 127
    • 128
    • 129
    • 130
    • 131
    • 132
    • 133
    • 134
    • 135
    • 136
    • 137
    • 138
    • 139
    • 140
    • 141
    • 142
    • 143
    • 144
    • 145
    • 146
    • 147
    • 148
    • 149
    • 150
    • 151
    • 152
    • 153
    • 154
    • 155
    • 156
    • 157
    • 158
    • 159
    • 160

    二、在 API 包中准备接口

    在 src\api 中创建文件 test\mock.ts

    import { defHttp } from '/@/utils/http/axios';
import { BasicModel, Page } from '/@/api/model/baseModel';

enum Api {
  SIM_DATA_LIST = '/v1/device/sim/_query',
  ROLE_MANAGEMENT_DATA_LIST = '/system/role/page',
}

export interface SimCard extends BasicModel<SimCard> {
  configName?: string; // 名称
  configKey?: string; // 参数键
  configValue?: string; // 参数值
  isSys?: string; // 系统内置（1是 0否）
}
//获取sim卡信息的接口
export const getSimDataList = (params?: SimCard | any) =>
  defHttp.postJson<Page<SimCard>>({
    url: Api.SIM_DATA_LIST,
    params,
  });

//获取角色管理信息的接口
export const getRoleManagementDataList = (params?: SimCard | any) =>
  defHttp.get<Page<SimCard>>({
    url: Api.ROLE_MANAGEMENT_DATA_LIST,
    params,
  });


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28

    三、在views页面中引入调用

    这里做测试,用一个 button 按钮来获取数据好了
    在这里插入图片描述

    <template>
  <a-button type="primary" @click="getData1()"> 获取数据 a-button>
  <a-button type="primary" @click="getData2()"> 获取数据 a-button>
template>
<script lang="ts">
  import { defineComponent } from 'vue';
  import { getSimDataList, getRoleManagementDataList } from '/@/api/test/mock';
  export default defineComponent({
    name: 'MockTest',
  });
script>
<script lang="ts" setup>
  function getData1() {
    getSimDataList().then((res) => {
      console.log('get data here');
      console.log(res);
    });
  }
  function getData2() {
    getRoleManagementDataList().then((res) => {
      console.log('get data here');
      console.log(res);
    });
  }
script>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25

    控制台输出在这里插入图片描述

    注意点

    • 定义mock数据抛出接口url需要以/basic-api开头；
    • api定义接口要去掉url的/basic-api

    请求响应数据处理

    实际项目当中我们可能只需要响应的数据中的一部分
    比如
    在这里插入图片描述

    用数据的时候可能只想要数据中的 list 部分,如果后台返回数据的格式一致
    这时候可以对返回的数据进行处理
    src\utils\http\axios\index.ts 中当请求成功之后,对返回的数据处理后返回处理好的数据,根据自己实际后台返回数据的格式来修改处理规则

    在这里插入图片描述

  • 相关阅读:
    Web学习笔记-React（组合Components）
    2023年腾讯云双十一活动攻略整理汇总
    ICML 2020 | GCNII：简单和深度图卷积网络
    蚁群算法(ant system,AS)
    微信红包封面小程序源码-后台独立版-带测评积分功能源码
    阿里云双11优惠云服务器99元一年，4年396元
    2023.9.25 关于简单了解 HTTPS
    string·模拟实现
    Linux驱动开发笔记（四）：设备驱动介绍、熟悉杂项设备驱动和ubuntu开发杂项设备Demo
    多目标果蝇算法及其MATLAB实现
  • 原文地址：https://blog.csdn.net/YZRHANYU/article/details/127818663