使用mock.js随机数据和使用express输出json接口的实现方法
前端项目都会用到后端的接口，但当后台接口没有写好的时候，这时候可以用mock.js先随机生成一些假数据来调试页面
安装mock.js
先用express创建一个nodejs的web项目，名字假如是demo，这里就不说了
yarnaddmockjs
使用
constMock=require('mockjs')
vardata=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-2212:10:08",
"img":"http://dummyimage.com/250x250",
"url":"http://hwujcvh.fk/vfrjfmi",
"email":"y.ahbatuekk@mbkhfybrh.pl",
"name":"JamesRonaldRodriguez",
"text":"Zsogshtwqjscoeqwggnfkppbdpqdavftdpvczrvnugsyfyefmrbnbjyytgemybupleieghyjpklcxauofulhjmnbkjpyodk.Njyncysrvxjeveistawymcosrlpoiacryqobwkkcfuhnkrrdutrzduikjvtfdcvpppbhiygjnkmgxvpuspayulvu.Wgqmtwvoibqzpcctkodyhovzslocpcuqaseuwvubjgbfhihhoudlymooztiojpitubmwhsmbkktbkyqphsvwgoluujrkosqudm.Wpumdvtwriytwoasbittrrxtjybeorkbosnjpigntundrgxhozeqiufhuhpuirgmhlstoijpqxhopklkxceqhvruymjpgdmsnjjmuivxijmokn."
},
{
"id":2,
"color":"#94f279",
"date":"1980-02-2019:46:44",
"img":"http://dummyimage.com/336x280",
"url":"http://voyqj.cx/jjyksqzur",
"email":"k.ydgui@gixl.cr",
"name":"RonaldNancyHarris",
"text":"Lbdpwqwpgdsodipquoncnnyisebtwhodnbtfqxnjyzrqtrriopgfbjtprtodgmtgffgwaqnhonsdlvpxpjpqomfflscskj.Cvteunojoqmjnfmvowvmwypywtrklcazkvgcvsyzayytlbgvywekfqqzhfgiahmjwuryxsgfxnrpvfxwhaednauookwixuxtgnwqflcbmnrmqglgziyvegml.Cexitvdotefujnptmeihekmljntbukxrdndhjlkfyjcvoldpgorrjkprfkltnfksyvrvc.Aynbydhxguzaftjrnkmlirqowxaldjqjkvahimjnhezpgmusevqbynwhmyotehgkwdgeyxjvfnmicchndsdgmdodxajingvqrdlyhppeba.Tykxnhenjodbslwbsjcjrwlvrkvxkrypewfpfqrqipsislxuwgsjcwrbtfnqeszyleovhcjwupwzokitctnhbdhjqxyiajxms.Gfgkwnnlgdrcqnpwnbowqknwyoiwyysaohkfqqsbgvpmulikvusikwvnbpkpbonhtidhfhrgql."
}
]
}
集成到express里输出json
constMock=require('mockjs')
exports.index=function(req,res){
vardata=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接口的实现方法，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！