前后端分离模拟数据神器mockjs

最新推荐文章于 2023-10-25 09:35:20 发布

kayla_wang

最新推荐文章于 2023-10-25 09:35:20 发布

阅读量883

点赞数 2

分类专栏： vue项目总结

本文链接：https://blog.csdn.net/qq_16122415/article/details/80436259

版权

7 篇文章 0 订阅

订阅专栏

  现在开发都是前后端分离，静态页面写好后，后端接口还未写好，漫长的等待实在是蓝瘦香菇，终于找到了mockjs这个神器，前端可以模拟数据，实在是太好了。 

  刚开始用mockjs这个神器，因此理解比较粗浅，以后会深入使用，再与大家分享。 

mock文档 http://mockjs.com/

  1.安装 
 npm install mockjs 

  2.使用： 

  因为现在做的是vue项目，所以以vue项目中使用为例 

  （1）.创建mock.js文件，参照mockjs文档写了一个简单的例子 

  // 引入mockjs 

  const Mock = require('mockjs'); 

  // 获取 mock.Random 对象 

  const Random = Mock.Random; 

  // mock一组数据 

  //扩展数据 

  Random.extend({ 

  constellation: function(date) { 

  var constellations =["128元","50元","5元","10元","30元","20元"] 

  return this.pick(constellations) 

}

})

  Random.constellation() 

  const produceNewsData = function() { 

  let userList = []; 

  for(let i = 0; i < 15; i++) { 

  let newArticleObject = { 

  constellation: Random.constellation() , 

  username: Random.cname(), 

  date: Random.date() + ' ' + Random.time() 

}

  userList.push(newArticleObject) 

}

  let userMesObj = { 

  userList: userList, 

  NumberCount: Random.natural(1, 8) 

}

  return { 

  userMesObj: userMesObj 

}

}

  // 
 指定被拦截的 Ajax 请求的响应时间 

  Mock.setup({ 

  timeout: 400 

})

  // Mock.mock( url, post/get , 返回的数据)； 

  Mock.mock('/userinfo', 'post', produceNewsData); 

  （2）mian.js中引用 

  import './config/mock.js' 

  上面的例子返回数据如下： 

  3.当mock提供的数据方法不满足需要时可以扩展方法 

关注