mockjs的基本使用入门

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

很多人或多或少的都听说过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

posted @ 2019-08-14 15:26  下一页2013  阅读(2322)  评论(0编辑  收藏  举报