快捷導(dǎo)航

使用mock.js隨機(jī)數(shù)據(jù)和使用express輸出json接口的實(shí)現(xiàn)方法

更新時(shí)間：2018年01月07日 11:13:56 作者：朋也

這篇文章主要介紹了使用mock.js隨機(jī)數(shù)據(jù)和使用express輸出json接口的實(shí)現(xiàn)方法,需要的朋友可以參考下

前端項(xiàng)目都會(huì)用到后端的接口，但當(dāng)后臺(tái)接口沒(méi)有寫(xiě)好的時(shí)候，這時(shí)候可以用mock.js先隨機(jī)生成一些假數(shù)據(jù)來(lái)調(diào)試頁(yè)面

安裝mock.js

先用express創(chuàng)建一個(gè)nodejs的web項(xiàng)目，名字假如是 demo ，這里就不說(shuō)了

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))

上面的隨機(jī)方法在最下面給出的mockjs文檔的鏈接里可以找到，Mock.Random調(diào)用的方法，直接拿來(lái)在前面加上@就可以用了，非常方便

輸出

{
"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()'
 }]
 })
 // 延時(shí)1秒，模擬網(wǎng)絡(luò)請(qǐng)求時(shí)間
 setTimeout(function() {
 res.send(JSON.stringify(data))
 }, 1000);
}

express跨域

接口地址跟前端項(xiàng)目地址肯定會(huì)不一樣，這時(shí)候請(qǐng)求接口就會(huì)涉及到跨域的問(wèn)題，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();
});

說(shuō)明：上面代碼是在網(wǎng)上找的，不過(guò)網(wǎng)上找的沒(méi)有這句 res.header('Access-Control-Allow-Credentials', true);

我前端項(xiàng)目的地址是 http://localhost:8080 所以 Access-Control-Allow-Origin 的值就是 http://localhost:8080

可以根據(jù)自己的服務(wù)器來(lái)修改

參考

•mockjs文檔

總結(jié)

以上所述是小編給大家介紹的使用mock.js隨機(jī)數(shù)據(jù)和使用express輸出json接口的實(shí)現(xiàn)方法，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)歡迎給我留言，小編會(huì)及時(shí)回復(fù)大家的！

您可能感興趣的文章: