Mock 之搭建本地 MockJs

Mock 之搭建本地 MockJs

一、目的

模拟后端接口

二、发请求

1. install

npm install axios

2. 配置

src/utils/request.js

import axios from "axios"; // axios 导入包
const service = axios.create({}); // axios 简单配置
// /api/user/id    token
service.interceptors.request.use((config) => {
  return config;
}); // axios 请求拦截
service.interceptors.response.use((response) => {
  const { data } = response;
  // if (data.status == 200) {
  // } else if (data.status == 403) {
  // }
  return data;
}); // axios响应拦截
export default service;

• axios 官网.

3. 对接口发起请求

src/api/index.js

import request from "@/utils/request";
export const getUsers = () =>
  request({
    url: "/api/users",
    method: "get",
  });

• axios 发起请求的代码都维护在 api 下。

三、Mock 模拟响应

1. install

npm install mockjs

2. 配置

src/mock/index.js

import Mock from "mockjs";
// example 相关
Mock.mock("/api/users", "get", function () {
  return Mock.mock({
    status: "200",
    msg: "请求成功",
    "data|3": [
      {
        name: "@cname", // Mock.Random.cname(),
        age: "@integer(20,50)",
      },
    ],
  });
});

• MockJS 官网.
• MockJs github 官网文档.

3. 把 mock 导入 main.js

导入才会执行，数据才会成功。

main.js

import "@/mock";

四、请求成功且 mock 成功

1. About.vue

src/views/About.vue

<template>
    <!-- axios & mock-验证 -->
    <div v-for="(item) in list" :key="item.name">
        <span>{{item.name}}</span>
        <span>{{item.age}}</span>
    </div>
</template>
<script>
import { getUsers } from '@/api'
import { onMounted, reactive, toRefs } from 'vue'
export default {
    setup(){
        const data = reactive({
            list: []
        })
        onMounted(()=>{
            getUsers().then(res=>{
                console.log(res)
                data.list = res.data
            })
        })
        const dataAsRefs = toRefs(data)
        return dataAsRefs
    }
}
</script>

五、优化 mock 代码

1. example 模块化

src/mock/example.js

import Mock from "mockjs";
export default {
  getUsers: () => {
    return Mock.mock({
      status: "200",
      msg: "请求成功",
      "data|3": [
        {
          name: "@cname", // Mock.Random.cname(),
          age: "@integer(20,50)",
        },
      ],
    });
  },
};

2. mock 入口文件配置

src/mock/index.js

import Mock from "mockjs";
import example from "./example";
// example 相关
Mock.mock("/api/users", "get", example.getUsers);
export default Mock;

六、实际开发注意事项

1. 配置 baseURL 导致错误：

如果 axios.create({...}) 配置了 baseURL ，上一部分代码为：

src/mock/index.js

import GlobalUrl "@/request/巴啦啦小魔仙"
import Mock from "mockjs";
import example from "./example";
Mock.mock(GlobalUrl+"/api/users", "get", example.getUsers);
export default Mock;