ts+vite3+vue3+mock+qs实现本地模拟数据功能

第一步：安装qs

因为项目中用到了ts，所以还需要安装：

第二步：安装mock

第三步：创建Vue页面:Category.vue

第四步：用来生成mock数据的ts文件：Category.ts

import Mock from 'mockjs' // 引入mockjs
import qs from 'qs'

const Random = Mock.Random// Mock.Random 是一个工具类，用于生成各种随机数据

// Mock.setup({timeout: 1000})// 设置请求延时时间

let data = {
    code: 9999,
    msg: "这是Mock中的测试数据",
    data: "xxxxxxxxyyyyyyyyyyyzzzzzzzzzzz"
}

Mock.mock('/productapi/category/getById/11', "get", (id) => {
    console.log(id);
    return data;
});

Mock.mock(RegExp(`/productapi/category/getById1?.*`), "get", (config) => {
    //获取前端传递过来的请求参数
    let queryString = config.url.split("?")[1];
    let queryObject = qs.parse(queryString);
    //根据请求参数构造返回结果
    console.log(queryObject)

    return data;
});

Mock.mock(RegExp('/productapi/category/getById1?.*'), "get", (config) => {
    //获取前端传递过来的请求参数
    let queryString = config.url.split("?")[1];
    let queryObject = qs.parse(queryString);
    //根据请求参数构造返回结果
    console.log(queryObject)
    return data;
});

Mock.mock('/productapi/category/add', "post", (params) => {
    console.log(params);
    return data;
});

Mock.mock('/productapi/category/updateById', "put", (params) => {
    console.log(params);
    return data;
});

Mock.mock('/productapi/category/deleteById/3333', "delete", () => {
    return data;
});

Mock.mock('/productapi/category/batchDelete', "delete", (params) => {
    console.log(params);
    return data;
});

Mock.mock('/productapi/category/list', "post", (params) => {
    console.log(params);
    return data;
});

第五步：启动项目，测试

依次单击每个按钮进行测试，发现能够请求到相对应的测试数据