Mock 前端定义模拟接口，mock在vue中的使用

效果图：

第一步：下载mock插件

npm install mockjs
1

第二步 在src下创建mock文件夹
第三步 在mock文件夹下创建JSON文件，以登录为例

//login.json，注释作用，这一行报错可删除
{
    "token": "79faf82271944fe38c4f1d99be71bc9c",
    "list": [{
        "id": 1,
        "name": "张三",
        "age": 18
    }, {
        "id": 2,
        "name": "李四",
        "age": 16
    }, {
        "id": 3,
        "name": "王二",
        "age": 14
    }]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

第四步在mock文件夹下创建mockrequest文件

//mockrequest.js
import Mock from 'mockjs'
import  loginData from './login.json'
Mock.mock("/mock/login",{code:200,data:loginData})

//如果想定义多个接口
//let userInfo={}
//Mock.mock("/mock/user",{code:200,data:userInfo})
1
2
3
4
5
6
7
8

第五步创建api文件夹，在api文件夹下下创建axiosRequest文件

python之mock模块基本使用方法详解

pdf 0星 超过10%的资源 86KB

下载

//axiosRequest.js
import axios from 'axios';
//创建axios实例[创建出来的实例即为axios，只不过可以配置一些东西]
let service= axios.create({
    baseURL: "/mock",
    timeout: 5000
});

//请求拦截器:在发请求之前可以拦截，此时可在请求头里设置token
service.interceptors.request.use((config) => {
    //config配置对象，这里面有请求头
    config.headers = {
           // 设置后端需要的传参类型
           'Content-Type': 'application/json',
           'token': '79faf82271944fe38c4f1d99be71bc9c',//此处可通过封装方法获取token
     }
    return config;
});

//响应拦截器：服务器的数据已经返回
service.interceptors.response.use((res) => {
    //简化服务器返回的数据格式
    //服务器数据返回进度条结束
    console.log(res,"+请求返回")
    return res.data;
}, (error) => {
    //终止promise链
    return Promise.reject(error);
});
//对外暴露二次封装的axios
export default service;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

第六步在api文件夹下创建index.js文件

//index.js
import  service from './axiosRequest.js'
export  let loginApi =(data)=>service({url:"/login",method:"post",data:data})
1
2
3

第七步 在main.js中引用 mockrequest

//@是配置的路径别名，也可通过相对路径一层层的找文件
//main.js
import "@/mock/mockrequest"
1
2
3

第八步 使用

import {loginApi } from '@/api
<template>
  <div class="login-body">
    <div class="login-container">
      <div class="head">
      div>
      <el-form ref="ruleFormRef" :model="state.ruleForm" :rules="state.rules" label-width="100px" class="demo-ruleForm"
        :size="formSize" status-icon label-suffix="：" style="width: 70%; margin: 0 auto">
        <el-form-item label="账号" prop="name" style="margin: 40px 0 0">
          <el-input v-model="state.ruleForm.name" placeholder="请输入账号" />
        el-form-item>
        <el-form-item label="密码" prop="password" style="margin: 40px 0 0">
          <el-input v-model="state.ruleForm.password" placeholder="请输入密码" />
        el-form-item>
        <el-form-item>
          <el-button type="primary" round @click="submitForm(ruleFormRef)" style="margin: 40px auto 0">登录el-button>
        el-form-item>
      el-form>
    div>
  div>
template>

<script setup>
import { loginApi  } from "@/api";


import { reactive, ref, toRefs } from "vue";
import { useRouter } from "vue-router";
import { userStore, carStore } from "@/store/user";

import { POPPER_CONTAINER_SELECTOR } from "element-plus";
const ruleFormRef = ref(null);
let router = useRouter();
let store = userStore();
let car = carStore();
let state = reactive({
  ruleForm: { name: "test1", password: "123" },
  rules: {
    name: [{ required: "true", message: "账户不能为空", trigger: "blur" }],
    password: [{ required: "true", message: "密码不能为空", trigger: "blur" }],
  },
});
const submitForm = (formEl) => {
  if (!formEl) return;
  formEl.validate(async (valid) => {
    if (valid) {
      let result = await loginApi(state.ruleForm)
      console.log(result,"前端自定义接口返回值")
    } else {
      console.log("error submit!");
      return false;
    }
  });
};
script>

<style scoped>
.login-body {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  background-color: #fff;
}

.login-container {
  width: 50%;
  height: 500px;
  margin: 10% auto 0;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0px 21px 41px 0px rgba(0, 0, 0, 0.2);
}

.head {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40px 0 20px 0;
}

.head img {
  width: 200px;
  height: 100px;
  margin-right: 20px;
}

.head .title {
  font-size: 28px;
  color: #409eff;
  font-weight: bold;
}

.head .tips {
  font-size: 12px;
  color: #999;
}
style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98