使用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 相关文章推荐
JS 显示当前日期与时间的代码
Mar 24 Javascript
js加减乘除丢失精度问题解决方法
May 16 Javascript
JavaScript实现在数组中查找不同顺序排列的字符串
Sep 26 Javascript
jQuery中replaceWith()方法用法实例
Dec 25 Javascript
每天一篇javascript学习小结(基础知识)
Nov 10 Javascript
jQuery Mobile 和 Kendo UI 的比较
May 05 Javascript
js实现图片左右滚动效果
Feb 27 Javascript
JavaScript实现动态增删表格的方法
Mar 09 Javascript
Egg.js 中 AJax 上传文件获取参数的方法
Oct 10 Javascript
微信小程序JS加载esmap地图的实例详解
Sep 04 Javascript
微信小程序 行的删除和增加操作实现详解
Sep 29 Javascript
JavaScript 异步时序问题
Nov 20 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
php提取身份证号码中的生日日期以及验证是否为成年人的函数
2015/09/29 PHP
laravel框架模板之公共模板、继承、包含实现方法分析
2019/08/30 PHP
JS中==与===操作符的比较
2009/03/21 Javascript
JQuery下关于$.Ready()的分析
2009/12/13 Javascript
再次分享18个非常棒的jQuery表格插件
2011/04/10 Javascript
js onclick事件传参讲解
2013/11/06 Javascript
如何在JavaScript中实现私有属性的写类方式(一)
2013/12/04 Javascript
Jquery实现仿腾讯微博发表广播
2014/11/17 Javascript
JavaScript错误处理
2015/02/03 Javascript
javascript生成不重复的随机数
2015/07/17 Javascript
简要了解jQuery移动web开发的响应式布局设计
2015/12/04 Javascript
分享JS数组求和与求最大值的方法
2016/08/11 Javascript
解决JS内存泄露之js对象和dom对象互相引用问题
2017/06/25 Javascript
bootstrap是什么_动力节点Java学院整理
2017/07/14 Javascript
webpack配置sass模块的加载的方法
2017/07/30 Javascript
解决在vue项目中,发版之后,背景图片报错,路径不对的问题
2018/03/06 Javascript
vue-cli开发环境实现跨域请求的方法
2018/04/07 Javascript
vue+jquery+lodash实现滑动时顶部悬浮固定效果
2018/04/28 jQuery
vue引入axios同源跨域问题
2018/09/27 Javascript
JavaScript模板引擎原理与用法详解
2018/12/24 Javascript
vue.js的vue-cli脚手架中使用百度地图API的实例
2019/01/21 Javascript
3分钟读懂移动端rem使用方法(推荐)
2019/05/06 Javascript
微信小程序云开发 生成带参小程序码流程
2019/05/18 Javascript
JS多个异步请求 按顺序执行next实现解析
2019/09/16 Javascript
python使用nibabel和sitk读取保存nii.gz文件实例
2020/07/01 Python
Django Session和Cookie分别实现记住用户登录状态操作
2020/07/02 Python
毕业生自荐书
2013/12/18 职场文书
员工工作表扬信范文
2014/01/13 职场文书
四风问题自查报告剖析材料
2014/02/08 职场文书
研修第一天随笔感言
2014/02/15 职场文书
入学申请自荐信范文
2014/02/26 职场文书
《北大荒的秋天》教学反思
2014/04/14 职场文书
2014年政风行风评议工作总结
2014/10/21 职场文书
全陪导游词开场白
2015/05/29 职场文书
Python OpenCV 彩色与灰度图像的转换实现
2021/06/05 Python
python程序的组织结构详解
2021/12/06 Python