脚本宝典收集整理的这篇文章主要介绍了mock项目中使用，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

本次教程使用依据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

import Mock from 'mockjs'
require('./mock')
createApp(App).use(Mock).mount('#app')

第四步：就是创建数据接口了 在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

脚本宝典总结

以上是脚本宝典为你收集整理的mock项目中使用全部内容，希望文章能够帮你解决mock项目中使用所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。