主要用于拦截axios请求，并返回数据给前端，相当于不用写后端就能取得数据。

要求安装并引入axios，然后配置好链接

安装

image.png
或者

  1. cnpm install mockjs -S

使用

1、创建数据文件

src中创建mock文件夹，里面添加index.js文件，内容如下：

2、引入mock，编写请求

在src文件夹内，创建一个mock文件夹，然后根据业务，创建不同的业务文件夹，在 业务.js 文件中加入如下代码:

  1. import Mock from './mock'
  3. Mock.mock( rurl, template )
  4. Mock.mock( rurl, function( options ) )
  5. Mock.mock( rurl, rtype, template )
  6. Mock.mock( rurl, rtype, function( options ) )
  8. //Mock.mock('/user/login', 'post', (request) => { return ...  })
  9. //request 为前端请求发送过来的数据
  11. //rurl：表示需要拦截的 URL，可以是 URL 字符串或 URL 正则。
  12. //例如 /\/domain\/list\.json/、'/domian/list.json'
  14. //rtype：表示需要拦截的 Ajax 请求类型。例如 GET、POST、PUT、DELETE 等。
  16. //template：表示数据模板，可以是对象或字符串。例如 { 'data|1-10':[{}] }、'@EMAIL'。
  18. //function(options)：表示用于生成响应数据的函数。
  19. //options：指向本次请求的 Ajax 选项集，含有 url、type 和 body 三个属性

数据模板

https://github.com/nuysoft/Mock/wiki/Syntax-Specification#%E6%95%B0%E6%8D%AE%E6%A8%A1%E6%9D%BF%E5%AE%9A%E4%B9%89%E8%A7%84%E8%8C%83-dtd

  1. //js文件
  2. import Mock from 'mockjs'
  4. export default ({ mock }) => {
  5.   if (!mock) return;
  6.   Mock.mock('/assetManagement/test', 'get', ()=> {
  7.     let list = Mock.mock({
  8.       "data|2-3":[{
  9.         数据模板
  10.       }]
  11.     });
  13.     return list;
  14.   });
  17. }
  1. //数据模板,结果参考下面
  2.                 'string1|2-3':'abc',
  3.         'string2|4':'a',
  4.         'id1|+1':1,
  5.         'intAutoPlus|+1':4,
  6.         'randomInt1|1-100':1,
  7.         'randomInt2|1-100':95,
  8.         'randomFloat2|1-100.5': 1,
  9.         'randomFloat3|1-100.6-10': 1,
  10.         'randomFloat4|1234.5': 1.333,
  11.         'boolean1|1': true,
  12.         'boolean2|20-80': false,
  13.         'array1|1': [1,2,3,4,5],
  14.         'array2|+1': [100,200,300,400,500],
  15.         'array4|2': [1,2,3],
  16.         'array3|2-3': [1,2,3],
  17.         'function': function(){return 123321},
  18.         'RegExp1':/[a-z][0-9]/,
  19.         'randomDate':'@date',
  20.         'randomDate2':'@date(yyyy)',
  21.         'randomDate3':'@time(a HH:mm:ss)',
  22.         'randomDate4':'@datetime(yyyy-MM-dd A HH:mm:ss)',
  23.         'randomDate5':'@now(day, yyyy-MM-dd HH:mm:ss SS)',
  24.         'image1':'@image(200x100, #ff0000, #000, png, abcdf)',
  25.         // 'image2':'@dataImage(200x100, abcdf)',
  26.         'color1':'@color',
  27.         'color2':'@hex',
  28.         'color3':'@rgb',
  29.         'color4':'@rgba',
  30.         'color5':'@hsl',
  31.         'textArea1':'@paragraph(1)',
  32.         'textArea2':'@paragraph(3,4)',
  33.         'cTextArea1':'@cparagraph(1)',
  34.         'cTextArea2':'@cparagraph(3,4)',
  35.         'sentence1':'@sentence(1)',
  36.         'sentence2':'@sentence(3,4)',
  37.         'csentence1':'@csentence(3)',
  38.         'csentence2':'@csentence(5,7)',
  39.         'word1':'@word(3)',
  40.         'word2':'@word(5,7)',
  41.         'cWord1':'@cword(3)',
  42.         'cWord2':'@cword(5,7)',
  43.         'cWord3':'@cword(零一二三四五六七八九十,5,7)',
  44.         'title1':'@title(3)',
  45.         'title2':'@title(5,7)',
  46.         'ctitle1':'@ctitle(3)',
  47.         'ctitle2':'@ctitle(5,7)',
  48.         'name1':'@first',
  49.         'name2':'@last',
  50.         'name3':'@name',
  51.         'name4':'@name(true)',
  52.         'cname1':'@cfirst',
  53.         'cname2':'@clast',
  54.         'cname3':'@cname',
  55.         'webUrl1':'@url',
  56.         'webUrl2':'@url(http, nuysoft.com)',
  57.         'webProtocol':'@protocol',
  58.         'webDomain':'@domain',
  59.         'webTld':'@tld',
  60.         'webEmail1':'@email',
  61.         'webEmail2':'@email(abc.com)',
  62.         'webIp':'@ip',
  63.         'addrRegion':'@region',
  64.         'addrProvince':'@province',
  65.         'addrCity1':'@city',
  66.         'addrCity2':'@city(true)',
  67.         'addrCounty1':'@county',
  68.         'addrCounty2':'@county(true)',
  69.         'addrZip':'@zip',
  70.         'upHeader':'@capitalize(abcde)',
  71.         'upper':'@upper(abcde)',
  72.         'lower':'@lower(ABCDE)',
  73.         'randomPick':'@pick([a,b,c,d,e])',
  74.         'guid':'@guid',
  75.         'idCard':'@id',
  76.         'increment1':'@increment()',
  77.         'increment2':'@increment(100)',
  78.         'increment3':'@increment(100)',
  1. {
  2.     "data": [
  3.         {
  4.             "name": "abcabcabc",
  5.             "name1": "Edward",
  6.             "id1": 1,
  7.             "intAutoPlus": 4,
  8.             "randomInt1": 20,
  9.             "randomInt2": 61,
  10.             "randomFloat2": 52.86024,
  11.             "randomFloat3": 98.01214502,
  12.             "randomFloat4": 1234.33322,
  13.             "boolean1": true,
  14.             "boolean2": false,
  15.             "array1": 4,
  16.             "array2": 100,
  17.             "array4": [
  18.                 1,
  19.                 2,
  20.                 3,
  21.                 1,
  22.                 2,
  23.                 3
  24.             ],
  25.             "array3": [
  26.                 1,
  27.                 2,
  28.                 3,
  29.                 1,
  30.                 2,
  31.                 3,
  32.                 1,
  33.                 2,
  34.                 3
  35.             ],
  36.             "RegExp1": "r1",
  37.             "randomDate": "1988-02-25",
  38.             "randomDate2": "1970",
  39.             "randomDate3": "am 07:55:24",
  40.             "randomDate4": "2017-03-21 AM 01:17:23",
  41.             "randomDate5": "2020-10-05 00:00:00 000",
  42.             "image1": "http://dummyimage.com/200x100/ff0000/000.png&text=abcdf",
  43.             "color1": "#7990f2",
  44.             "color2": "#b4f279",
  45.             "color3": "rgb(242, 121, 215)",
  46.             "color4": "rgba(121, 242, 233, 0.92)",
  47.             "color5": "hsl(38, 82, 71)",
  48.             "textArea1": "Nllwbgpnj bblivjl rijfbgwqq gdhfjg muxf jmpoqmtkr obvimevcu ceocb shzwf fvxiqc ovostqgq hapaxe bwmezyy vrwisefqu yuxkoys nytak bieptcykw.",
  49.             "textArea2": "Pquhwplcm ntxy ckezjga fkhexh rbffsowep ddkpqvu jqotbog fpudkvlak yxl trtfiitc epbnmvzhv mjnywrlc utlrnqxlu nsixlrixb tkjxhla vhyuxurijj nfnhlcf. Ljccl qwlegh rlswgj ibem tkykste vgqa jwkiw jdjxlokd ftjzlymob iezg aldcmfgde kphj kimk izmg fwkks yxnxsz kgbkx bxrnhggvjf. Wxvlj gecnhi ccaszmfkz tqfegf huoxx djikbjc isrubkmf dvbop nnlknljwo aiqhhn njrspccxy orwkjjvqkz ifiwvvej wtyrnrmegn frpjvrnb ydwltqt kbuwlrmj gim.",
  50.             "cTextArea1": "适程己国建论易应常清此计之一。",
  51.             "cTextArea2": "少取劳个龙金原片快消习即达组价开个。商般养次劳千信增前温与两她几。二必设值信容点么验而同增处火影安实。",
  52.             "sentence1": "Uattxoxhpv.",
  53.             "sentence2": "Ogwsprnc lboz xkbqnunyqs myvugvn.",
  54.             "csentence1": "科复声。",
  55.             "csentence2": "属口速里识所。",
  56.             "word1": "jcv",
  57.             "word2": "duodm",
  58.             "cWord1": "知都活",
  59.             "cWord2": "体见可候做任传",
  60.             "cWord3": "三六三九七七三",
  61.             "title1": "Tdeelldbp Cjzhvwyfqd Sfmsdzbo",
  62.             "title2": "Qbmo Wkurflj Belkqg Xylp Mdme Tetph",
  63.             "ctitle1": "打二展",
  64.             "ctitle2": "团单矿决行",
  65.             "name2": "Hall",
  66.             "name3": "abcabcabc",
  67.             "name4": "abcabcabc",
  68.             "cname1": "姜",
  69.             "cname2": "明",
  70.             "cname3": "袁秀兰",
  71.             "webUrl1": "news://hkqmuvuc.se/mihuejnvr",
  72.             "webUrl2": "http://nuysoft.com/zzbbs",
  73.             "webProtocol": "telnet",
  74.             "webDomain": "nenctnd.af",
  75.             "webTld": "coop",
  76.             "webEmail1": "u.slsflc@dgqdofsvi.gn",
  77.             "webEmail2": "l.xmkp@abc.com",
  78.             "webIp": "162.3.159.203",
  79.             "addrRegion": "华东",
  80.             "addrProvince": "西藏自治区",
  81.             "addrCity1": "南投县",
  82.             "addrCity2": "天津 天津市",
  83.             "addrCounty1": "东丽区",
  84.             "addrCounty2": "江西省 抚州市 南丰县",
  85.             "addrZip": "314563",
  86.             "upHeader": "Abcde",
  87.             "upper": "ABCDE",
  88.             "lower": "abcde",
  89.             "randomPick": "c",
  90.             "guid": "2bFAc57c-13bF-39eA-e857-EE311eFf9E14",
  91.             "idCard": "520000198507028968",
  92.             "increment1": 1,
  93.             "increment2": 101,
  94.             "increment3": 201,
  95.             "function": 123321
  96.         },
  99.         {
  100.             "name": "abcabc",
  101.             "name1": "Richard",
  102.             "id1": 2,
  103.             "intAutoPlus": 5,
  104.             "randomInt1": 51,
  105.             "randomInt2": 82,
  106.             "randomFloat2": 9.25492,
  107.             "randomFloat3": 4.829814,
  108.             "randomFloat4": 1234.33376,
  109.             "boolean1": false,
  110.             "boolean2": true,
  111.             "array1": 4,
  112.             "array2": 200,
  113.             "array4": [
  114.                 1,
  115.                 2,
  116.                 3,
  117.                 1,
  118.                 2,
  119.                 3
  120.             ],
  121.             "array3": [
  122.                 1,
  123.                 2,
  124.                 3,
  125.                 1,
  126.                 2,
  127.                 3,
  128.                 1,
  129.                 2,
  130.                 3
  131.             ],
  132.             "RegExp1": "k6",
  133.             "randomDate": "2013-01-01",
  134.             "randomDate2": "1999",
  135.             "randomDate3": "pm 17:00:20",
  136.             "randomDate4": "2020-05-09 AM 05:16:15",
  137.             "randomDate5": "2020-10-05 00:00:00 000",
  138.             "image1": "http://dummyimage.com/200x100/ff0000/000.png&text=abcdf",
  139.             "color1": "#a379f2",
  140.             "color2": "#79f27f",
  141.             "color3": "rgb(242, 121, 149)",
  142.             "color4": "rgba(121, 185, 242, 0.82)",
  143.             "color5": "hsl(70, 82, 71)",
  144.             "textArea1": "Ythjvbpo xul bijiplrrsw swmisbctw lfpyncxff scjpap uswitdfhf lpqmxq dihjhp lqqout pfoxoge suups.",
  145.             "textArea2": "Pxdoptnn cvlcrcmpm bmdyigbsv pyzrjkaw bxqeuvte cdgwnfzrl qtqzbwjojj agcf jrxnwsvle hykygliyb cdqdoiza ojfndhs isulq. Qgnnm kieeesck swxw jizc ntibnb vildfqc psp moqb hpohvpb nkltkd unujo elflxqos lkpfmexyg iycvetan qsooe dacl cbvor. Mdrfse evy nln uqbernzkz uzhleig ngxicnjv orglwfwcuc rswygpkg gpvj qymeupucor blsgb enrlzpo uqeyirwo. Czbfmecu bfssfnupfz lqvkmboyua bxcfdj cdsyhdhuy hynnjcvaw log iqntjtajy tluqcqj dbsnqvf bivuvg rgxritr aiogfsjk rdoorwyl hchvcnejdf jobjfxkb.",
  146.             "cTextArea1": "最几日习风全展派用世律目社识走。",
  147.             "cTextArea2": "值日共斗都节何命联民把十低查。龙品周程系军现图例但历的从养片类称。林后具被四何技亲率因列比从前里。又口者可他领海那安器问只个。",
  148.             "sentence1": "Ihqvzj.",
  149.             "sentence2": "Smozotaorb hxofxdky tvlm lxyflnn.",
  150.             "csentence1": "难是也。",
  151.             "csentence2": "参便响至因。",
  152.             "word1": "fox",
  153.             "word2": "iouhn",
  154.             "cWord1": "无流研",
  155.             "cWord2": "示带林真感",
  156.             "cWord3": "八六八三五七零",
  157.             "title1": "Zkyuk Eyndfpvpes Scfpdt",
  158.             "title2": "Mvpwwvpk Mbohtjqj Wjdjvpmr Yipve Srnoyi",
  159.             "ctitle1": "酸我光",
  160.             "ctitle2": "地片设重即达",
  161.             "name2": "White",
  162.             "name3": "abcabc",
  163.             "name4": "abcabc",
  164.             "cname1": "龙",
  165.             "cname2": "明",
  166.             "cname3": "谢静",
  167.             "webUrl1": "gopher://ejlocmbxy.fo/fvtfgbwgd",
  168.             "webUrl2": "http://nuysoft.com/cabedylo",
  169.             "webProtocol": "rlogin",
  170.             "webDomain": "xeharyn.id",
  171.             "webTld": "yu",
  172.             "webEmail1": "l.gnvsrlvqon@gydz.pn",
  173.             "webEmail2": "h.qme@abc.com",
  174.             "webIp": "247.20.133.64",
  175.             "addrRegion": "华南",
  176.             "addrProvince": "香港特别行政区",
  177.             "addrCity1": "阿里地区",
  178.             "addrCity2": "江西省 九江市",
  179.             "addrCounty1": "奎屯市",
  180.             "addrCounty2": "上海 上海市 宝山区",
  181.             "addrZip": "046618",
  182.             "upHeader": "Abcde",
  183.             "upper": "ABCDE",
  184.             "lower": "abcde",
  185.             "randomPick": "d",
  186.             "guid": "A6DABCcC-409A-75EE-8Acf-23EB4cAd7D9e",
  187.             "idCard": "43000020171230491X",
  188.             "increment1": 202,
  189.             "increment2": 302,
  190.             "increment3": 402,
  191.             "function": 123321
  192.         }
  193.     ]
  194. }