mock项目中使用

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

本次教程使用依据vue3中使用后总结
万年不变第一步，下载安装
npm install mockjs --save
*注：这里多说一个请求接口直接安装axios（）请求几乎不变、
第二步：
创建mock文件夹与src同级（当然在那里创建都行，这里只是推荐，只要引入地址的时候对起来就行）
在mock文件创建index.js出口文件,配置mock.

// 配置 mock 文件
// 首先引入Mock
const Mock = require('mockjs');

// 设置拦截ajax请求的相应时间
Mock.setup({
    timeout: '200-600'
});

let configArray = [];

// 使用webpack的require.context()遍历所有mock文件
const files = require.context('.', true, /\.js$/);
files.keys().forEach((key) => {
    if (key === './index.js') return;
    configArray = configArray.concat(files(key).default);
});

// 注册所有的mock服务
configArray.forEach((item) => {
    for (let [path, target] of Object.entries(item)) {
        let protocol = path.split('|');
        Mock.mock(new RegExp('^' + protocol[1]), protocol[0], target);
    }
});
  

第三步，在mian.js主文件引入mock

require('./mock')

第四步：就是创建数据接口了
在mock文件夹下创建接口.js文件与index.js同级
关于假数据怎么生成等创建，这里建议查看官网文档，
官网文档地址：http://mockjs.com/examples.html

const Mock = require('mockjs');
var Random = Mock.Random
let data=Mock.mock({
    'rows|8': [{ //模拟每页有多少条数据。 每页8条。
        key: '@guid', //每页数据都是有id的。 随机生成数据. @是占位符,随机生成后不会重复。
        name: '@cname',  //前缀加 c 的意思为随机生成中文，否则是英文
        'age|1-70': 56,  
        address: '@csentence',
        'tags|1-2': ['@name'] 
    }]
})
let data2=Mock.mock({
    'rows|4': [{ //模拟每页有多少条数据。 每页8条。
        key: '@guid', //每页数据都是有id的。 随机生成数据. @是占位符,随机生成后不会重复。
        name: '@cname',  //前缀加 c 的意思为随机生成中文，否则是英文
        'age|1-70': 56,  
        address: Random.csentence(),
        'tags|1-2': ['@name'] 
    }]
})
let articleList = {
    code: 200,
    msg: 'success',
    data: { //数据
        total: 100, //模拟数据的页数，分页功能。 100条
        rows:data.rows
    }
};
let List = {
    code: 200,
    msg: 'ss',
    data: { //数据
        total: 10, //模拟数据的页数，分页功能。 100条
        rows:data2.rows
    }
};

export default {//前面键是请求方式与请求地址，后边值是返回的数据
    'get|/article/list': articleList,
    'get|/article2/list': List,

}

第五步：其实就不是mock的使用，这里就是用aixos请求数据就是了。
根据本文中的设置，在接口请求的路径是'/article/list'，并且请求方式是get时，就会返回我们写好的mock数据。
这里多说一嘴的是，这里请求地址没有前缀，也就是我们说的http//，因为我在项目中对接口进行了封装，给前缀设置了一个共有变量，在mock测试数据的时候我们将这么共有变量成为空字符串即可，在拼接到地址上，方便后续更换为真是地址

let baseUrl = ""
getData.tableListMock= (data)=>{
  return http.get(baseUrl+"/article/list",{ params:data })
}

项目编写参考文章，也是本文的核心参考文献
https://blog.csdn.net/weixin_57224821/article/details/119941945