vue3+ts 配置mockjs模拟数据

mock官方文档

Mock.js

安装mockjs

cnpm install mockjs --save-dev

在src文件夹下创建mock文件夹

mock文件夹下包括index.ts、typing.ts、apis1.ts、apis2.ts、apis3.ts

index.ts

import Mock from "mockjs";
import { MockParams } from "./typing";
import apis1 from "./apis1";
import apis2 from "./apis2";
const mocks = [...apis1, ...apis2];
//设置延时时间
Mock.setup({
  timeout: "300",
});

export function mockXHR() {
  let i: MockParams;
  for (i of mocks) {
    Mock.mock(new RegExp(i.url), i.type || "get", i.response);
  }
}

typing.ts

export interface MockParams {
  url: string;
  type: string;
  data?: any;
  params?: any;
  response(option?: any): Record<string, unknown>;
}

apis1.ts

import Mock from "mockjs";
export default [
  // GetUserInfo
  {
    url: "/upms/user/info",
    type: "get",
    response: () => {
      return {
        code: 200,
        message: "成功",
        data: {
          name: "testName",
        },
      };
    },
  },
  // GetToken
  {
    url: "/auth/oauth/token",
    type: "post",
    response: (option: any) => {
        return Mock.mock({
          code: 200,
          message: "成功",
          data: {
            name: "testToken",
          },
        });
      }
    },
  },
];

apis2.ts

import Mock from "mockjs";
export default [
  // AddGoods
  {
    url: "/api/addgoods",
    type: "post",
    response: function (option: any) {
      const $name = JSON.parse(option.body).name;
      if ($name) {
        return Mock.mock({
          status: 200,
          message: "提交成功",
          data: {
            goods: [
              {
                name: "MacbookPro",
                num: 1,
              },
              {
                name: "ipad",
                num: 2,
              },
            ],
          },
        });
      } else {
        return Mock.mock({
          status: 400,
          message: "未提交参数",
        });
      }
    },
  },
];

apis3.ts生成随机数据

可以采用Mock.js官方文档生成随机数据的方式
这里使用了json5生成随机数据的形式

import Mock from "mockjs";
export default [
  {
    url: "/user/userInfo",
    type: "get",
    response: () => {
      return Mock.mock({
        id: "@id", //得到随机id
        username: "@cname()", //得到随机姓名
        date: "@date()", //得到随机日期
        avatar: "@image('200*200','red','#fff','avatar')", //得到随机图片
        description: "@paragraph", //得到随机描述
        ip: "@ip()", //得到随机ip
        email: "@email()", //得到随机邮箱
        haha: "hahha", //自定义
      });
    },
  },
];

main.ts引入mockjs

import { createApp } from 'vue'
import App from './App.vue'
import 'lib-flexible'
import router from '@/router';
import { createPinia } from 'pinia'


// 创建一个pinia实例
const pinia = createPinia()
const app = createApp(App)


import { mockXHR } from "@/mock/index";
// 判断开发环境
if(process.env.NODE_ENV=="mock"){
	mockXHR();
	// mockXHR2();
}



// 挂在到vue对象上
app.use(pinia)
app.use(router)

app.mount('#app')

shim-vue.d.ts添加声明

使ts能够识别mockjs

declare module "mockjs";

在根目录package.json中的scripts新增一种运行式"serve:mock"

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "serve:mock": "vue-cli-service serve --mode mock"
  },

在根目录创建对应的.env.development、.env.mock文件（采用下边的写法必须要写在根目录）

NODE_ENV = development

NODE_ENV = mock

在终端执行npm run serve:mock就进入mock模式

因为在main.ts中做了环境判断，所以输入该命令就进入mock模式

npm run serve:mock

在api里面创建接口

// 验证码接口
export function getMock(config: getConfig) {
    const params = new URLSearchParams()
    params.append('page', config.page as string)
    return Service({
        url: "/auth/oauth/token",
        data: params
    })
}

在store下面调用接口

 actions: {
        async getSearch() {
            const getCarDate = await getCarList({ page: 1 })
            this.carList = getCarDate
            // console.log(this.carList)
        },
        // 调用mock接口
        async getMock() {
            const getCarDate = await getMock({ page: '1' })
           console.log(getCarDate);
           
        }
    
    }

在页面中调用接口

<template>
    <div class="about">
        <h1>This is an Search page</h1>
        
        <button @click="searchStore.getMock">获取数据</button>
    </div>
</template>
<script lang="ts" setup>
import { useSearchStore } from '@/store'
const searchStore = useSearchStore()

</script>

控制台输出