手把手撸后台-VUE3_VITE_MOCK

在 vue3 项目中引入 mock

• 安装 Mock 与 vite-plugin-mock

npm i mockjs vite-plugin-mock --save-dev

安装 axios 依赖

npm i axios

配置 vite.config.ts

• 在 vite.config.ts 中引入 vite-plugin-mock 插件

import { fileURLToPath, URL } from "node:url";
import { viteMockServe } from "vite-plugin-mock";
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    viteMockServe({
      supportTs: false, // -是否读取ts文件模块，设置为true时不能读取js文件
      logger: false, // 是否在控制台显示请求日志
      mockPath: "./mock", // 注意：此时的 mockPath 地址是真正安装的 mock 文件夹的地址;
    }),
  ],
  resolve: {
    alias: {
      "@": fileURLToPath(new URL("./src", import.meta.url)),
    },
  },
});

vite 的配置文档及其 mockjs 官方文档

• vite 配置文档地址

https://vitejs.dev/config/

• mockjs 官方文档地址

http://mockjs.com/examples.html

创建 mock 文件夹

• 在根目录下创建 mock 文件夹及 index.js 文件：

• 创建 mock 文件夹后的目录结构：

配置 mock 文件夹下面的 index.js

body 就是 post,quesy 就是 get

// 下面是导出一个数组；
export default [
  // user login
  {
    url: "/api/loginpost",
    type: "post",
    response: (config) => {
      console.log(config);
      const { username, password } = config.body;
      console.log(username);
      console.log(password);
      // mock error
      return {
        code: 200,
        message: "测试post接口",
      };
    },
  },
  {
    url: "/api/loginget",
    type: "get",
    response: (config) => {
      console.log(config);
      const { username, password } = config.query;
      console.log(username);
      console.log(password);
      // mock error
      return {
        code: 200,
        message: "测试get接口",
      };
    },
  },
];

使用

• 创建 request.js 文件

import axios from "axios";

// create an axios instance
const service = axios.create({
  // baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
  // withCredentials: true, // send cookies when cross-domain requests
  timeout: 5000, // request timeout
});

// request interceptor
service.interceptors.request.use(
  (config) => {
    // do something before request is sent

    return config;
  },
  (error) => {
    // do something with request error
    console.log(error); // for debug
    return Promise.reject(error);
  }
);

// response interceptor
service.interceptors.response.use(
  /**
   * If you want to get http information such as headers or status
   * Please return  response => response
   */

  /**
   * Determine the request status by custom code
   * Here is just an example
   * You can also judge the status by HTTP Status Code
   */
  (response) => {
    const res = response.data;
    console.log(res);
    // if the custom code is not 20000, it is judged as an error.
    if (res.code !== 200) {
      // 50008: Illegal token; 50012: Other clients logged in; 50014: Token expired;
      return Promise.reject(new Error(res.message || "Error"));
    } else {
      console.log("进来了啊");
      return res;
    }
  },
  (error) => {
    console.log("err" + error); // for debug
    return Promise.reject(error);
  }
);

export default service;

• 创建 api 文件注意路径需要对上

data 就是 post get 就是 params

import request from "@/api/request";

export const loginApi = (data) => {
  return request({
    url: "/api/loginpost",
    method: "post",
    data,
  });
};

export const loginApi2 = (params) => {
  return request({
    url: "/api/loginget",
    method: "get",
    params,
  });
};

• 使用

<button @click="handleget">测试get接口</button>
<button @click="handlepost">测试post接口</button>
<script>
  import { loginApi, loginApi2 } from "@/api/loginapi/loginapi.js";
  const handleget = () => {
    loginApi2({
      username: "admin",
      password: "123456",
    }).then((res) => {
      console.log(res);
    });
  };
  const handlepost = () => {
    loginApi({
      username: "admin",
      password: "123456",
    }).then((res) => {
      console.log(res);
    });
  };
</script>