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;
});

第五步：启动项目，测试

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