mock.JS模拟接口实现请求数据的基础使用方法

最新推荐文章于 2022-08-07 19:06:18 发布

原创最新推荐文章于 2022-08-07 19:06:18 发布 · 736 阅读

1 ·

CC 4.0 BY-SA版权

本文介绍了如何使用Mock.JS模拟接口实现请求数据，包括基础请求方式、数据方法、POST请求的示例，以及如何构建增删改查功能的模拟数据。通过Mock.JS可以方便地生成各种随机数据，如姓名、性别、年龄、邮箱等，用于前端开发的测试和调试。

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="box">

</div>
</body>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="http://mockjs.com/dist/mock.js"></script>
<script>
/**
*mock基础请求方式
**/
   var data=[{
       user:[
           {name:"小明",age:"22"},
           {name:"阿花",age:"18"}
       ],
       status:200,
       msg:"连接成功！"
   }];
   Mock.mock("comp/userInfo","get",data)
/**
*mock数据方法需要官方字段搜搜mockjs的常用mock字段
**/
var data =Mock.mock("www.mock.com","get",{
"object|35": [{
"name":"@cname",//生成随机姓名
"sex|1":[
   "男","女"
],
"age":"@integer(20,40)",//生成随机年龄
"email":"@email",//生成随机邮件地址
"birthday":"@date",//生成随机年月日
'regexp1': /^((13[0-9])|(14[5,7])|(15[3,9])|(17[0,3,5-8])|(18[0-9])|166|198|199|(147))\d{8}$/,//正则生成
"city":"@city(true)",//生成随机地址
"money|10-99":12,
'datetime': '@datetime("yyyy-MM-dd A HH:mm:ss")',
'ip': '@ip'

}]
})

/**
*构建生成数据的第二种方式 POSt请求
**/
Mock.mock("api/user/InfoList","get",(req,res)=>{
   return Mock.mock({
   "status":200,
   "object|35": [{
   "name":"@cname",//生成随机姓名
   "sex|1":[
       "男","女"
   ],
   "age":"@integer(20,40)",//生成随机年龄
   "email":"@email",//生成随机邮件地址
   "birthday":"@date",//生成随机年月日
   'regexp1': /^((13[0-9])|(14[5,7])|(15[3,9])|(17[0,3,5-8])|(18[0-9])|166|198|199|(147))\d{8}$/,//正则生成
   "city":"@city(true)",//生成随机地址
   "money|10-99":12,
   'datetime': '@datetime("yyyy-MM-dd A HH:mm:ss")',
   'ip': '@ip'

   }],
   "msg":"请求成功!"
   })
})
/**
*mock:如需要增删改查功能模拟数据，csdn搜索mock实现增删改查
**/
// 输出结果
console.log(data)
$.ajax({
   type:"get",
   url:"api/user/InfoList",
   async:true,
   success:function(res){
       console.log(JSON.parse(res))
   },error:function(err){
       console.log(err)
   }
});

</script>

</html>