使用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:节点(插入,复制,替换,删除)操作
Mar 04 Javascript
eclipse如何忽略js文件报错(附图)
Oct 30 Javascript
javascript实例分享---具有立体效果的图片特效
Jun 08 Javascript
给angular加上动画效遇到的问题总结
Feb 17 Javascript
易被忽视的js事件问题总结
May 14 Javascript
关于jquery中动态增加select,事件无效的快速解决方法
Aug 29 Javascript
原生JavaScript制作计算器
Oct 16 Javascript
BootStrap+Mybatis框架下实现表单提交数据重复验证
Mar 23 Javascript
vue.js中引入vuex储存接口数据及调用的详细流程
Dec 14 Javascript
Vue引入sass并配置全局变量的方法
Jun 27 Javascript
elementUI Vue 单个按钮显示和隐藏的变换功能(两种方法)
Sep 04 Javascript
js实现点击上传图片并设为模糊背景
Aug 02 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原理之异常机制
2010/08/21 PHP
php使用curl简单抓取远程url的方法
2015/03/13 PHP
JavaScript实现鼠标滑过处生成气泡的方法
2015/05/16 Javascript
js调用百度地图及调用百度地图的搜索功能
2015/09/07 Javascript
关于function类中定义变量this的简单说明
2016/05/28 Javascript
对javascript继承的理解
2016/10/11 Javascript
jquery实现全选、全不选以及单选功能
2017/03/23 jQuery
Angular.JS通过指令操作DOM的方法
2017/05/10 Javascript
jQuery图片缩放插件smartZoom使用实例详解
2017/08/25 jQuery
微信、QQ、微博、Safari中使用js唤起App
2018/01/24 Javascript
vue2 mint-ui loadmore实现下拉刷新,上拉更多功能
2018/03/21 Javascript
如何实现小程序tab栏下划线动画效果
2019/05/18 Javascript
Nest.js 授权验证的方法示例
2021/02/22 Javascript
python处理图片之PIL模块简单使用方法
2015/05/11 Python
python实现linux下使用xcopy的方法
2015/06/28 Python
Python 的类、继承和多态详解
2017/07/16 Python
[原创]windows下Anaconda的安装与配置正解(Anaconda入门教程)
2018/04/05 Python
浅谈pandas中DataFrame关于显示值省略的解决方法
2018/04/08 Python
python判断输入日期为第几天的实例
2018/11/13 Python
django框架model orM使用字典作为参数,保存数据的方法分析
2019/06/24 Python
python画图的函数用法以及技巧
2019/06/28 Python
python实现图片压缩代码实例
2019/08/12 Python
关于Python 常用获取元素 Driver 总结
2019/11/24 Python
动态设置django的model field的默认值操作步骤
2020/03/30 Python
HTML5新特性之语义化标签
2017/10/31 HTML / CSS
自主招生自荐信
2013/12/08 职场文书
两年的个人工作自我评价
2014/01/10 职场文书
接受捐赠答谢词
2014/01/27 职场文书
高三毕业寄语
2014/04/10 职场文书
文体活动总结范文
2014/05/05 职场文书
2015年党员个人剖析材料
2014/12/18 职场文书
试用期自我评价怎么写
2015/03/10 职场文书
2015年光棍节活动总结
2015/03/24 职场文书
2015年四年级班主任工作总结
2015/10/22 职场文书
react国际化react-intl的使用
2021/05/06 Javascript
Windows Server 2012 R2服务器安装与配置的完整步骤
2022/07/15 Servers