前端项目都会用到后端的接口,但当后台接口没有写好的时候,这时候可以用mock.js先随机生成一些假数据来调试页面
安装mock.js
先用express创建一个nodejs的web项目,名字假如是 demo ,这里就不说了
使用
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))
'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调用的方法,直接拿来在前面加上@就可以用了,非常方便
输出
集成到express里输出json
exports.index = function(req,res) {
var data = Mock.mock({
'list|2': [{
'id|+1': 1,'text': '@paragraph()'
}]
})
// 延时1秒,模拟网络请求时间
setTimeout(function() {
res.send(JSON.stringify(data))
},1000);
}
var data = Mock.mock({
'list|2': [{
'id|+1': 1,'text': '@paragraph()'
}]
})
// 延时1秒,模拟网络请求时间
setTimeout(function() {
res.send(JSON.stringify(data))
},1000);
}
express跨域
接口地址跟前端项目地址肯定会不一样,这时候请求接口就会涉及到跨域的问题,express里的解决办法如下
说明:上面代码是在网上找的,不过网上找的没有这句 res.header('Access-Control-Allow-Credentials',true);
我前端项目的地址是 所以 Access-Control-Allow-Origin 的值就是
可以根据自己的服务器来修改
参考
总结
以上所述是小编给大家介绍的使用mock.js随机数据和使用express输出json接口的实现方法,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!