根据状态切换mock返回数据结构值及数据的快捷生成方式

最新推荐文章于 2024-07-16 22:00:00 发布

转载最新推荐文章于 2024-07-16 22:00:00 发布

· 337 阅读

版权

原文链接：https://blog.youkuaiyun.com/weixin_62145189/article/details/123845259?ops_request_misc=&request_id=&biz_id=102&utm_term=mock%E6%95%B0%E6%8D%AE%E7%9A%84%E5%AE%9A%E4%B9%89&utm_medium=distribute.pc_search_result.none-task-blog-2~all~sobaiduweb~default-4-123845259.

文章标签：

#数据结构 #模块测试 #前端

自我总结专栏收录该内容

8 篇文章

订阅专栏

这篇博客介绍了如何使用Mock.js来创建模拟数据接口，包括响应配置、参数处理和分页逻辑。示例代码展示了如何根据传入参数动态生成包含各种信息（如姓名、ID、时间戳等）的对象数组，并提供了不同mock调试状态下的返回结果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

第一种方法

export default[
    {
    url:'/find',
    type:'get',
    response:config=>{
          //config是传进来的参数对象
         const {current,size}=config.query;
         //可以在这里对传进来的参数进行后续操作
          ...
          //例如分页
          //当把mockTestStructure假数据定义在**外部时**
         //数据一下子生成太多，根据参数进行分页数据展示，这里需要筛选以下
         if(index>=(Number(current)-1)*size&&index<(Number(current)*size)){
              return item
          }

         //也可以在这里定义后端结构数据体--在这里定义每次调用都会生成新的数据哦
         //主要是让返回体看着简介一些
         let mockTestStructure=({
            //成成一个名为item的对象数组，且数组中有10个对象
           "item|10":[{
                 "client":"@cName",//中文姓名
                 "chineseTitle":"@ctitle(15,25)",//生成中文标题15-25字   
                 "reason":"@csentence(15,25)",//15-25字文字
                 "clientId":"/[0-9]{18,18}/",//身份证号
                 "id":"@id",//身份证号
                 "time":"@dateTime",//yyyy-MM-dd hh:mm:ss
                  "timestamp":+Mock.Random.date("T")//+生成数字型时间戳
                 "importantRank|1":["重要","保密","机密","绝密"],//在字符串数组中任取一个数据
                 "id":"@increment",//重1开始，自增+1
                 "englishName":"@first"//生成一个类似英文名
                 "source":"@float(0,10,2,2)"//生成0-10之间，保留两位小数
                  "rank":"@integer(1,3)",//生成随机数字1-3
                  "canEdit":"@boolean",//返回true/false
                  "macIp":"@guid",//MSOC-cniwN-NSK-nsJM-msuH
                  "email":"@email",//s.cbisbs@sff.ks
                  "color":"@color",//生成16进制颜色
                  "url":"@url",//生成url
                  "ip":"@ip"//生成ip
                  
                   // 例如链接之类的数据只能固定写si了
                   "avator":"www.baidu.com/img/001.png"                     
            }]
         });
      if(window.mockDebug==1){
      //这里返回的是假定的后台数据，结构，数据根据文档
         return {
                status:2000;
                data:{
                    total:100,
                    items:mockTestStructure.item
                 }
                 message:"查询成功"
                 success:true
         }
      }
      else if(window.mockDebug==2){ 
              return {
                      code:5000;
                      message:"查询失败",
              }
       }else if(window.mockDebug==5){ 
              return {
                      code:5000;
                      message:"登录信息过期，请重新登录！",
              }
   }
   //再来一个接口如上
   //...
]