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

第一步：安装qs

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

第二步：安装mock

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

<template>
  <button @click=getById >getById</button>
  <button @click=getById11 >getById11</button>
  <button @click=getById12 >getById12</button>
  <button @click=add >add</button>
  <button @click=updateById >updateById</button>
  <button @click=deleteById >deleteById</button>
  <button @click=batchDelete >batchDelete</button>
  <button @click=list >list</button>
</template>

<script setup lang=ts>
import '@/mock/Category';  // 引入mock文件
import http from @/utils/request;

function getById() {
  http.get(/productapi/category/getById/11).then(res => {
    console.log(res);
  })
}

function getById11() {
  http.get(/productapi/category/getById1?id=11&name=aaa&pwd=1234).then(res => {
    console.log(res);
  })
}

function getById12() {
  http.get(/productapi/category/getById1, {
    params: {
      id: 11
    }
  }).then(res => {
    console.log(res);
  })
}

function add() {
  http.post(/productapi/category/add, {
    id: 1234,
    name: aaaaa
  }).then(res => {
    console.log(res);
  })
}

function updateById() {
  http.put(/productapi/category/updateById, {
    id: 1234,
    name: bbbb
  }).then(res => {
    console.log(res);
  })
}

function deleteById() {
  http.delete(/productapi/category/deleteById/3333).then(res => {
    console.log(res);
  })
}

function batchDelete() {
  http.delete(/productapi/category/batchDelete, {
    params: {
      ids: 43,44,45
    }
  }).then(res => {
    console.log(res);
  })
}

function list() {
  http.post(/productapi/category/list, {
    name: aa,
    state: 1
  }).then(res => {
    console.log(res);
  })
}
</script>

第四步：用来生成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;
});

第五步：启动项目，测试

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