使用mock.js随机数据和使用express输出json接口的实现方法


Posted in Javascript onJanuary 07, 2018

前端项目都会用到后端的接口,但当后台接口没有写好的时候,这时候可以用mock.js先随机生成一些假数据来调试页面

安装mock.js

先用express创建一个nodejs的web项目,名字假如是 demo ,这里就不说了

yarn add mockjs

使用

const Mock = require('mockjs')

var data = Mock.mock({
 'list|2': [{
 'id|+1': 1,
 'color': '@color()',
 'date': '@datetime()',
 'img': '@image()',
 'url': '@url(http)',
 'email': '@email()',
 'name': "@name(1,2)",
 'text': '@paragraph()'
 }]
})
console.log(JSON.stringify(data))

上面的随机方法在最下面给出的mockjs文档的链接里可以找到,Mock.Random调用的方法,直接拿来在前面加上@就可以用了,非常方便

输出

{
 "list": [
 {
  "id": 1,
  "color": "#8179f2",
  "date": "2015-06-22 12:10:08",
  "img": "http://dummyimage.com/250x250",
  "url": "http://hwujcvh.fk/vfrjfmi",
  "email": "y.ahbatuekk@mbkhfybrh.pl",
  "name": "James Ronald Rodriguez",
  "text": "Zsogshtw qjscoe qwggnfk ppbdpqd avftd pvczrvnu gsyfyefm rbnbjyy tgemy buple ieghyjp klcxauofu lhjmnb kjpyodk. Njync ysrvx jevei stawy mcosrlpo iacryqob wkkcfuh nkrrdutr zduikjvtf dcv pppbhi ygjnkmg xvpusp ayu lvu. Wgqmtwvo ibqzp cct kodyh ovz slo cpc uqaseuwv ubjgbf hihh oudly mooztiojpi tubmwhsmb kktbkyqp hsvwgoluu jrkosqudm. Wpumdvtw riytwoa sbittrr xtjy beorkb osnjpigntu ndrgxhozeq iufhu hpuirgmh lstoijpqx hopk lkxceqhvr uymj pgdms njjmu ivxijmokn."
 },
 {
  "id": 2,
  "color": "#94f279",
  "date": "1980-02-20 19:46:44",
  "img": "http://dummyimage.com/336x280",
  "url": "http://voyqj.cx/jjyksqzur",
  "email": "k.ydgui@gixl.cr",
  "name": "Ronald Nancy Harris",
  "text": "Lbdpwqwpgd sodipqu oncnnyis ebtwho dnbt fqxnjyzr qtrriop gfbjt prto dgmtgff gwaqnhon sdlvpxpj pqomfflsc skj. Cvteunoj oqmjnfm vowvmw ypywtr klcazkvg cvsyzayytl bgvywe kfqqzhfg iahm jwury xsgf xnr pvfxwhaed nauookwi xuxtgnwq flcbmnrm qglgziy vegml. Cexit vdotefuj nptmei hekmljnt bukxrd ndhj lkfyjcv oldpgo rrj kprfklt nfks yvrvc. Aynbyd hxguza ftjrn kmlirqo wxald jqjkvahim jnhezpgm usev qbynwhm yotehgkwdg eyxj vfnm icchnds dgmd odxajing vqrdl yhpp eba. Tykxnhe njod bslwbsjcj rwlv rkvxk rypew fpfqrqi psislxuwgs jcwrbtfn qeszy leovhc jwupwzo kitct nhbdhjq xyiajxms. Gfgkw nnlg drcqnpwn bowqknwy oiw yysaohk fqqsbgvp mulik vusikwv nbp kpbo nhti dhf hrgql."
 }
 ]
}

集成到express里输出json

const Mock = require('mockjs')

exports.index = function(req, res) {
 var data = Mock.mock({
 'list|2': [{
  'id|+1': 1,
  'color': '@color()',
  'date': '@datetime()',
  'img': '@image()',
  'url': '@url(http)',
  'email': '@email()',
  'name': "@name(1,2)",
  'text': '@paragraph()'
 }]
 })
 // 延时1秒,模拟网络请求时间
 setTimeout(function() {
 res.send(JSON.stringify(data))
 }, 1000);
}

express跨域

接口地址跟前端项目地址肯定会不一样,这时候请求接口就会涉及到跨域的问题,express里的解决办法如下

app.all('*', function(req, res, next) {
 res.header("Access-Control-Allow-Origin", "http://localhost:8080");
 res.header("Access-Control-Allow-Headers", "X-Requested-With");
 res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
 res.header("X-Powered-By",' 3.2.1')
 res.header("Content-Type", "application/json;charset=utf-8");
 res.header('Access-Control-Allow-Credentials', true);
 next();
});

说明:上面代码是在网上找的,不过网上找的没有这句 res.header('Access-Control-Allow-Credentials', true);

我前端项目的地址是 http://localhost:8080 所以 Access-Control-Allow-Origin 的值就是 http://localhost:8080

可以根据自己的服务器来修改

参考

•mockjs文档

总结

以上所述是小编给大家介绍的使用mock.js随机数据和使用express输出json接口的实现方法,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
利用javascript实现禁用网页上所有文本框,下拉菜单,多行文本域
Dec 14 Javascript
jquery中对于批量deferred的处理方法
Jan 22 Javascript
Javascript节点关系实例分析
May 15 Javascript
jQuery mobile 移动web(6)
Dec 20 Javascript
jQuery简单实现提交数据出现loading进度条的方法
Mar 29 Javascript
jquery实现网页定位导航
Aug 23 Javascript
Bootstrap整体框架之CSS12栅格系统
Dec 15 Javascript
Vue2.0实现购物车功能
Jun 05 Javascript
Angular2监听页面大小变化的解决方法
Oct 09 Javascript
seajs模块压缩问题与解决方法实例分析
Oct 10 Javascript
Nuxt升级2.0.0时出现的问题(小结)
Oct 08 Javascript
vue基础之使用get、post、jsonp实现交互功能示例
Mar 12 Javascript
使用 Node.js 开发资讯爬虫流程
Jan 07 #Javascript
CentOS环境中MySQL修改root密码方法
Jan 07 #Javascript
12条写出高质量JS代码的方法
Jan 07 #Javascript
js数组方法reduce经典用法代码分享
Jan 07 #Javascript
javascript中的replace函数(带注释demo)
Jan 07 #Javascript
基于JavaScript实现简单的音频播放功能
Jan 07 #Javascript
js实现复制功能(多种方法集合)
Jan 06 #Javascript
You might like
phplot生成图片类用法详解
2015/01/06 PHP
js innerHTML 的一些问题的解决方法
2008/06/22 Javascript
理解Javascript_14_函数形式参数与arguments
2010/10/20 Javascript
jquery+easeing实现仿flash的载入动画
2015/03/10 Javascript
Bootstrap 轮播(Carousel)插件
2016/12/26 Javascript
jQuery实现的仿百度,仿谷歌搜索下拉框效果示例
2016/12/30 Javascript
详解如何使用webpack打包Vue工程
2017/05/27 Javascript
node跨域请求方法小结
2017/08/25 Javascript
详解http访问解析流程原理
2017/10/18 Javascript
详解VUE2.X过滤器的使用方法
2018/01/11 Javascript
Node.js搭建WEB服务器的示例代码
2018/08/15 Javascript
微信小程序 MinUI组件库系列之badge徽章组件示例
2018/08/20 Javascript
iview在vue-cli3如何按需加载的方法
2018/10/31 Javascript
vue elementUI table表格数据 滚动懒加载的实现方法
2019/04/04 Javascript
vue-cli 项目打包完成后运行文件路径报错问题
2019/07/19 Javascript
微信小程序实现购物车代码实例详解
2019/08/29 Javascript
[15:28]DOTA2 HEROS教学视频教你分分钟做大人-剧毒术士
2014/06/13 DOTA
Python中XlsxWriter模块简介与用法分析
2018/04/24 Python
深入浅析python 中的匿名函数
2018/05/21 Python
numpy中loadtxt 的用法详解
2018/08/03 Python
解决python2 绘图title,xlabel,ylabel出现中文乱码的问题
2019/01/29 Python
python 通过SSHTunnelForwarder隧道连接redis的方法
2019/02/19 Python
django使用admin站点上传图片的实例
2019/07/28 Python
tensorflow生成多个tfrecord文件实例
2020/02/17 Python
python动态规划算法实例详解
2020/11/22 Python
pycharm配置QtDesigner的超详细方法
2021/01/25 Python
基于Canvas+Vue的弹幕组件的实现
2019/07/23 HTML / CSS
美国名牌手表折扣网站:Jomashop
2020/05/22 全球购物
软件测试面试题
2015/10/21 面试题
JSP和Servlet有哪些相同点和不同点,他们之间的联系是什么?
2015/10/22 面试题
入党自我评价范文
2014/02/02 职场文书
初中生庆国庆演讲稿范文2014
2014/09/25 职场文书
法院个人总结
2015/03/03 职场文书
2015年度个人工作总结报告
2015/10/24 职场文书
2019企业文化管理制度范本!
2019/08/06 职场文书
导游词之任弼时故居
2020/01/07 职场文书