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

Posted 2022-10-09

第一步：安装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;
);

第五步：启动项目，测试

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