mock.js를 사용하여 임의의 데이터 생성

이 글에서는 주로 mock.js 랜덤 데이터를 사용하고 express를 사용하여 json 인터페이스를 출력하는 구현 방법을 소개합니다. 필요한 친구는 참고해도 됩니다.

프런트엔드 프로젝트에서는 백엔드 인터페이스를 사용하지만 백엔드 프로젝트에서는 end 인터페이스가 잘 작성되지 않았습니다. 이때 mock.js를 사용하여 가짜 데이터를 무작위로 생성하여 페이지를 디버그할 수 있습니다

mock.js를 설치하세요

먼저 Express를 사용하여 nodejs 웹 프로젝트를 생성하세요. 이름은 데모이므로 여기서는 다루지 않겠습니다

yarn add mockjs

Use

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

위의 Random 메소드는 하단에 제공된 mockjs 문서 링크에서 찾을 수 있습니다. Mock.Random이 호출한 메소드입니다. @를 앞에 붙여서 바로 사용할 수 있어 매우 편리합니다

Output

{
 "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 cross-domain

인터페이스 주소는 확실히 다릅니다. 이때 인터페이스를 요청하면 도메인 간 문제가 발생하므로 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

자신의 서버에 맞게 수정하시면 됩니다

위 내용은 모두를 위해 정리한 내용입니다. 앞으로 도움이 되셨으면 좋겠습니다.

관련 기사:

순수한 js로 드롭다운 목록을 생성하는 방법

vuex의 자세한 소개 중국어 문서

라우터 교차 모듈 점프 문제를 해결하는 방법

위 내용은 mock.js를 사용하여 임의의 데이터 생성의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!