mock.js模拟数据实现前后端分离-创新互联

本篇文章为大家展示了mock.js模拟数据实现前后端分离,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。

创新互联公司专注于平邑网站建设服务及定制,我们拥有丰富的企业做网站经验。 热诚为您提供平邑营销型网站建设,平邑网站制作、平邑网页设计、平邑网站官网定制、重庆小程序开发公司服务,打造平邑网络公司原创品牌,更为您提供平邑网站排名全网营销落地服务。

普通不涉及框架的项目中安装mock.js推荐使用bower安装:

npm install bower -g
bower install mockjs --save

具体使用:

<!DOCTYPE html>
<html lang="en">
 
<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>mock js-demo1</title>
</head>
 
<body>
 
</body>
 
</html>
<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script src="js/ajax.js"></script>
<script type="text/javascript" src="./bower_components/mockjs/dist/mock.js"></script>
<script>
  Mock.mock('http://api.com', {
    'users|5': [ {
      'name': '@cname', //中文名称
      'age|1-100': 100, //100以内随机整数
      'birthday': '@date("yyyy-MM-dd")', //日期
      'city': '@city(true)' //中国城市
    }]
  });
  // //JQuery方式
  $.ajax({
    url: 'http://api.com',
    dataType: 'json'
  }).done(function (data, status, xhr) {
    console.log(
      JSON.stringify(data, null, 4)
    )
  });
  //原生ajax方式
  function ajax(method, url, params, isAsync) {
    //创建对象
    xhr = new XMLHttpRequest();
    //设置请求参数
    xhr.open(method, url, isAsync);
    //回调函数
    xhr.onreadystatechange = function () {
      if (xhr.readyState == 4 && xhr.status == 200) {
        console.log(xhr.responseText);
      }
    }
    //发送请求
    xhr.send();
  }
  ajax('get','http://api.com','', true);
</script>

这里我引入了通过bower下载的mock.js,然后给mockjs给定一个请求地址(如果有可以给定真实地址,没有可以写个假地址,只要和ajax请求地址一致即可),然后在mock的第二个参数中定义了数据格式,是个随机五位的数组对象,包括姓名、年龄、生日、地址

然后通过ajax正常请求地址,然后返回值就会收到mock.js的拦截,而返回我们自定义格式的数据,而不是后端数据

这样在项目初期,后端没有数据的情况下,我们就可以通过模拟数据完成页面功能的开发。

当后端数据完成后,我们只要删除mock.js部分即可(如果前期接口地址是假的,改一下接口地址即可)

这里推荐把mock.js部分抽离到公共的文件中,引入即可,这样后期可维护性强,只要不引入mock部分即可,而不用来回删代码。

返回数据效果:

mock.js模拟数据实现前后端分离

上述内容就是mock.js模拟数据实现前后端分离,你们学到知识或技能了吗?如果还想学到更多技能或者丰富自己的知识储备,欢迎关注创新互联行业资讯频道。

网站题目:mock.js模拟数据实现前后端分离-创新互联
文章路径:https://www.cdcxhl.com/article30/dsddpo.html

成都网站建设公司_创新互联,为您提供定制网站ChatGPT搜索引擎优化定制开发微信公众号动态网站

广告

声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联

网站优化排名