mockjs的基本使用入门

最新推荐文章于 2023-06-26 17:22:06 发布

weixin_30925411

最新推荐文章于 2023-06-26 17:22:06 发布

阅读量345

点赞数

原文链接：http://www.cnblogs.com/wyongz/p/11352228.html

版权

相信很多前端同学都有一个困扰，就是没有后端数据的情况下感觉很多想法都不能动手去实现，这里介绍一个模拟后端数据的工具，可以一定程度上解决我们的困扰。

很多人或多或少的都听说过mockjs，都知道是一个模拟后端接口的工具，但是去看官网的时候上边各种安装，各种模块化，对于初学者很不友好，结果就这么放弃了。

下边的例子直接复制粘贴然后打开页面控制台就能看到效果，结合代码就能知道大概mockjs是做了什么事了

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>Document</title>
</head>

<body>
  <script src="http://cdn.bootcss.com/Mock.js/1.0.0/mock-min.js"></script>
  <script src="http://cdn.bootcss.com/zepto/1.2.0/zepto.min.js"></script>
  <script type="text/javascript">
    var url = 'http://api.com'
    var data = Mock.mock(url, {
      "user|5-10": [{
        'name': '@cname', //中文名称
        'age|1-100': 100, //100以内随机整数
        'birthday': '@date("yyyy-MM-dd")', //日期
        'city': '@city(false)' //中国城市
      }]
    });
    $.ajax({
      url: url,
      type: 'post',
      contentType: 'text/plain',
      dataType: 'json',
      success: function(res) {
        console.log(res)
      }
    });
  </script>
</body>
</html>

一下是控制台打印的结果

结合html中的data中的定义大概知道整体过程是什么样的了。

在此基础上了解更多的mockjs的用法可以去查看官网中的示例http://mockjs.com/examples.html

转载于:https://www.cnblogs.com/wyongz/p/11352228.html

weixin_30925411

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
mockjs的基本使用入门

相信很多前端同学都有一个困扰，就是没有后端数据的情况下感觉很多想法都不能动手去实现，这里介绍一个模拟后端数据的工具，可以一定程度上解决我们的困扰。很多人或多或少的都听说过mockjs，都知道是一个模拟后端接口的工具，但是去看官网的时候上边各种安装，各种模块化，对于初学者很不友好，结果就这么放弃了。下边的例子直接复制粘贴然后打开页面控制台就能看到效果，结合代码就能知道大概mockj...
复制链接

扫一扫