mockjs怎么使用

一 mockjs是什么

二 mockjs的mock方法

三 mockjs接受get请求

四 mockjs接受post请求        

五 mockjs的setup方法

---

一 mockjs是什么

        用通俗的话来讲 mockjs就是一个放在前端的服务器  

        先讲讲传统意义上的服务器，传统意义上的服务器就是拦截前端发送过来的请求，后端服务器拦截后做出响应， 响应种携带着数据。

        而mockjs就是把服务器放在了前端部分，mockjs请求还没发送到后端，就先被拦截(至于被谁拦截，我也不知道，但是肯定不是axios的请求和响应拦截器，这俩没关系， 本人菜鸡，以上是学习笔记)，然后就和服务器一样，发送请求，mockjs返回响应数据。

        下面主要介绍一下mockjs的mock方法和setup方法以及如何发送get请求和post请求 其他请求都和get和post请求类似 mockjs其他方法请移步mockjs官网
Mock.js (mockjs.com)http://mockjs.com/

---

二 mockjs的mock方法

Mock.mock( rurl?, rtype?, template|function( options ) )

简单解释一下mockjs的参数

rurl	请求的url地址
rtype	请求的类型
template|function(options)	template : 记录数据模板。当拦截到匹配 rurl 的 Ajax 请求时，将根据数据模板 template 生成模拟数据，并作为响应数据返回 function : 记录用于生成响应数据的函数。当拦截到匹配 rurl 的 Ajax 请求时，函数 function(options) 将被执行，并把执行结果作为响应数据返回。

options中包含的属性 

url	本次请求的url
type	本次请求的类型
body	请求的请求体

注意：说通俗点，template是死数据，请求不能携带参数，不管什么url请求返回的都是一个模板

而function(options)可以根据请求的参数做出处理并返回动态数据

下面是mock方法的post请求实例 运用function(options)动态判断输入的用户名和密码是否正确（为了简便我直接把用户名和密码都设置成了一样了，可以看到我验证了用户名是否等于密码）

function(options)的返回值将会作为响应体中的数据返回

Mock.mock("http://127.0.0.1:5173/mockjs/verificationUsername", "post",
    (request)=>{

        let jsonBody = JSON.parse(request.body);
        for (let index in usersname){
            if (jsonBody.username == usersname[index] &&
                jsonBody.username == jsonBody.password) {
                return {
                    name: jsonBody.username,
                    is:true
                }
            }

        }
        return {
            name: jsonBody.username,
            is:false
        }
    })

mock方法就像后端的接口一样，如果你想封装get请求就把上面的post改为get，其余都一样

特别注意 mockjs请求发送来的数据是字符串，记得用json parse一下 转换成字符串

三 mockjs的get请求

        下面是mockjs的get请求封装， 在封装之前要先引入axios实例，在下文中也就是axiosInterface，如果不知道怎么配置axios请先移步我的另一篇博客

vue3+ts配置axioshttp://t.csdn.cn/I9crAmock请求的封装其实和普通请求的封装一样

export const getAllId= () =>{return axiosInstance.get("http://127.0.0.1:5173/mockjs/chineseName")}

导出在使用的时候导入

    getAllId().then((response)=>{
        // 请求成功的回调
    },(reason)=>{
        //请求失败的回调
    })

四 mockjs的post请求 

记得写形参 

import {axiosInstance} from "../axiosInterface";
export const verificationUser = (username: string, password: string) =>{return axiosInstance.post("http://127.0.0.1:5173/mockjs/verificationUsername",{
    username: username,
    password: password
})}

导入使用 注意我这里是post请求

记得传参

verificationUser(userMessage.username, userMessage.password).then(
            (response)=>{
                if(response.data.is){
                    isLoading.value = false;
                    router.replace({name: "table", query:{username: username.value}});
                }else {
                    isLoading.value = false;
                    alert("密码错误");
                }
            })

 五 mockjs的setup方法 

这个方法和axios的基本配置差不多  可以配置请求的timeout baseURL等

Mock.setup({
    timeout: 400，
    baseURL：""
})