使用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 相关文章推荐
jquery实现每个数字上都带进度条的幻灯片
Feb 20 Javascript
javascript不同类型数据之间的运算的转换方法
Feb 13 Javascript
原生javascript实现图片弹窗交互效果
Jan 12 Javascript
jQuery插件jFade实现鼠标经过的图片高亮其它变暗
Mar 14 Javascript
AngularJS入门教程之控制器详解
Jul 27 Javascript
jQuery的时间datetime控件在AngularJs中的使用实例(分享)
Aug 17 jQuery
浅谈Vue-cli 命令行工具分析
Nov 22 Javascript
解决VUEX兼容IE上的报错问题
Mar 01 Javascript
angular将html代码输出为内容的实例
Sep 30 Javascript
vue + any-touch实现一个iscroll 实现拖拽和滑动动画效果
Apr 08 Javascript
vue和better-scroll实现列表左右联动效果详解
Apr 29 Javascript
微信小程序绑定手机号获取验证码功能
Oct 22 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
PHP5函数小全(分享)
2013/06/06 PHP
ThinkPHP开发框架函数详解:C方法
2015/08/14 PHP
PHP fopen函数用法实例讲解
2019/02/15 PHP
基于thinkphp5框架实现微信小程序支付 退款 订单查询 退款查询操作
2020/08/17 PHP
jquery 学习笔记一
2010/04/07 Javascript
js切换光标示例代码
2013/10/10 Javascript
将json对象转换为字符串的方法
2014/02/20 Javascript
jQuery 中$(this).index与$.each的使用指南
2014/11/20 Javascript
node.js中的fs.stat方法使用说明
2014/12/16 Javascript
jquery文档操作wrap()方法实例简述
2015/01/10 Javascript
JQuery报错Uncaught TypeError: Illegal invocation的处理方法
2015/03/13 Javascript
JavaScript数据结构与算法之栈与队列
2016/01/29 Javascript
jquery 动态合并单元格的实现方法
2016/08/26 Javascript
js实现可旋转的立方体模型
2016/10/16 Javascript
jQuery niceScroll滚动条错位问题的解决方法
2018/02/03 jQuery
springboot+vue实现文件上传下载
2020/11/17 Vue.js
python实现从字符串中找出字符1的位置以及个数的方法
2014/08/25 Python
pyqt5使用按钮进行界面的跳转方法
2019/06/19 Python
python3读取图片并灰度化图片的四种方法(OpenCV、PIL.Image、TensorFlow方法)总结
2019/07/04 Python
将python包发布到PyPI和制作whl文件方式
2019/12/25 Python
python中rc1什么意思
2020/06/19 Python
实例讲解CSS3中的box-flex弹性盒属性布局
2016/06/09 HTML / CSS
CSS 说明横向进度条最后显示文字的实现代码
2020/11/10 HTML / CSS
canvas之自定义头像功能实现代码示例
2017/09/29 HTML / CSS
法国奢华女性时尚配饰网上商店:Monnier Frères
2016/08/27 全球购物
HashMap和Hashtable的区别
2013/05/18 面试题
使用C#编写创建一个线程的代码
2013/01/22 面试题
数控机械专业个人的自我评价
2014/01/02 职场文书
技能比赛获奖感言
2014/02/14 职场文书
竞争上岗实施方案
2014/03/21 职场文书
教室标语大全
2014/06/21 职场文书
学习雷锋月活动总结
2014/07/03 职场文书
领导批评与自我批评范文
2014/10/16 职场文书
驾驶员管理制度范本
2015/08/06 职场文书
关于车尾的标语大全
2015/08/11 职场文书
2016入党心得体会范文
2016/01/06 职场文书