使用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中的私有成员
Sep 18 Javascript
JavaScript入门学习书籍推荐
Jun 12 Javascript
node.js中的fs.fchown方法使用说明
Dec 16 Javascript
纯js代码实现简单计算器
Dec 02 Javascript
JS Ajax请求如何防止重复提交
Jun 13 Javascript
使用vue实现点击按钮滑出面板的实现代码
Jan 10 Javascript
关于Stream和Buffer的相互转换详解
Jul 26 Javascript
vue2导航根据路由传值,而改变导航内容的实例
Nov 10 Javascript
webpack打包js文件及部署的实现方法
Dec 18 Javascript
理解 JavaScript EventEmitter
Mar 29 Javascript
vue组件中的样式属性scoped实例详解
Oct 30 Javascript
解决Vue-Router升级导致的Uncaught (in promise)问题
Aug 07 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
Windows Apache2.2.11及Php5.2.9-1的安装与配置方法
2009/06/08 PHP
php递归函数中使用return的注意事项
2014/01/17 PHP
php实现文件下载代码分享
2014/08/19 PHP
PHP简单遍历对象示例
2016/09/28 PHP
PHP函数积累总结
2019/03/19 PHP
NodeJS的模块写法入门(实例代码)
2012/03/07 NodeJs
js阻止冒泡及jquery阻止事件冒泡示例介绍
2013/11/19 Javascript
JavaScript设计模式之外观模式介绍
2014/12/28 Javascript
js对象基础实例分析
2015/01/13 Javascript
同一个网页中实现多个JavaScript特效的方法
2015/02/02 Javascript
在JavaScript中模拟类(class)及类的继承关系
2016/05/20 Javascript
js中判断变量类型函数typeof的用法总结
2016/08/09 Javascript
vue组件中的数据传递方法
2018/05/14 Javascript
微信小程序定位当前城市的方法
2018/07/19 Javascript
Vue.js实现双向数据绑定方法(表单自动赋值、表单自动取值)
2018/08/27 Javascript
详解vue-cli3多环境打包配置
2019/03/28 Javascript
通过实例解析JavaScript常用排序算法
2020/09/02 Javascript
python使用正则表达式分析网页中的图片并进行替换的方法
2015/03/26 Python
Pycharm学习教程(3) 代码运行调试
2017/05/03 Python
Python 文件操作的详解及实例
2017/09/18 Python
详解python 拆包可迭代数据如tuple, list
2017/12/29 Python
Python 正则表达式匹配字符串中的http链接方法
2018/12/25 Python
flask session组件的使用示例
2018/12/25 Python
英国Amara家居法国网站:家居装饰,现代装饰和豪华礼品
2016/12/15 全球购物
adidas爱尔兰官方网站:阿迪达斯运动鞋和运动服
2019/11/01 全球购物
长曲棍球装备:Lacrosse Monkey
2020/12/02 全球购物
本科生的职业生涯规划范文
2014/01/09 职场文书
给酒店员工的表扬信
2014/01/11 职场文书
《识字五》教学反思
2014/03/01 职场文书
公司离职证明范本(汇总)
2014/09/10 职场文书
2014最新开业庆典策划方案(5篇)
2014/09/15 职场文书
2015年乡镇卫生院工作总结
2015/04/22 职场文书
宿舍管理制度范本
2015/08/07 职场文书
基于CSS3画一个iPhone
2021/04/21 HTML / CSS
redis内存空间效率问题的深入探究
2021/05/17 Redis
Java后台生成图片的完整步骤
2021/08/04 Java/Android