Vite+Mock.js 拦截请求-【模拟数据】

前言

最近在做项目，springboot+vite ,由于后端还没有怎么开始写,于是想到了mock.js去拦截请求。模拟数据。其实在真实的项目开发当中，前后端约定好接口也是采用这种方式来同步写代码，不会等后端写完前端才动工。下面给大家入个门，其实这玩意只需要学会如何看官网就行了，不会就查，没有必要记，看会就行。其实这玩意早出来了，但在学习vue的时候我才知道。测试还是很方便的

优点

前后端分离

让前端攻城师独立于后端进行开发

增加单元测试的真实性

通过随机数据，模拟各种场景

开发无侵入

不需要修改既有代码，就可以拦截 Ajax 请求，返回模拟的响应数据。

安装

npm install mockjs

创建一个文件夹mock.jsr

// 引入
import Mock, { Random, mock } from 'mockjs';  

//创建规则
const data = Mock.mock({
    "title": "@ctitle",  //中文的标题
    "images|4": [Random.image()], //生成四个image图片
    "recommendList|4-8": [ //生成最小4个最大8个的数组
        {
            "id": Random.id(),//随机id
            "avator": Random.dataImage('45x45', 'HeadImage'), //45×45的图片 后置是图片的文字
            "username": "@cname", //中文名
            "isFollowed|1": true, //生成布尔值
            "blog": {
                "content": "@cparagraph", //生成中文段落
                "images|2-4": [Random.image('100x100')], //生成图片
                "tags|1-2": ["大学生", "简约"],//重复数组 1-2次
                "create_time": Random.datetime(), //随机时间
                "likes_num|1-200": 1,//1-200的随机数字
                "critical_num|2-30": 2,
                "collect_num|1-200": 3,
            }
        }
    ]
});

//需要拦截的地址  方法  option是传过来的参数
mock('/index/carousel', 'get', (option) => {
    return {
        images: data.images
    }
});



mock('/index/getRecommendUser', 'get', (option) => {
    return {
        recommendList: data.recommendList
    }
});

发送请求

import "@/utils/mock.js";

const recommendList = reactive([]);
const getRecomentList = async () => {
    const { data: res } = await request.get('/index/getRecommendUser');
    recommendList.splice(0);
    recommendList.push(...res.recommendList);
    console.log(res);
}

返回的数据

这个仅用于测试使用，后端全部写好了数据就可以把mock.js删除，再配置代理服务器，就OK。今天的文有点水，嘻，感谢您的观看