前端項目都會用到后端的接口，但當后臺接口沒有寫好的時候，這時候可以用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
可以根據自己的服務器來修改
參考
總結
以上所述是小編給大家介紹的使用mock.js隨機數據和使用express輸出json接口的實現方法，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復大家的！
新聞熱點
疑難解答
