vue中如何使用mockjs摸擬介面的各種資料

龍旗飄揚的艦隊發表於2019-02-13

mockjs的作用

生成模擬資料
模擬 Ajax 請求，返回模擬資料
基於 HTML 模板生成模擬資料（後續更新）
幫助編寫單元測試（後續更新）

Vue 中使用 mock

有兩種使用方式，一種是僅編寫資料來呼叫，第二種是編寫服務+資料模擬真實介面（可在network檢視）
Mock物件API用例檢視（推薦只看這個就可以）
官方mock定義api查詢

第一種方式，編寫mock

可以寫完整action url：http://localhost/login
同一域下，也可以只寫api形式：/login
使用 Mock.mock 可以編寫多個介面資料

import Mock from 'mockjs'; //es6語法引入mock模組

Mock.mock('/login', { //輸出資料
    'name': '@name', //隨機生成姓名
    //還可以自定義其他資料
});
Mock.mock('/list', { //輸出資料
    'age|10-20': 10
    //還可以自定義其他資料
});
複製程式碼

兩種資料呼叫方式

1.使用 Mock.mock 直接編寫

Mock.mock('@date("yyyy-MM-dd")');//"1984-06-12"
複製程式碼

2.使用隨機函式 Random 編寫

var Random = Mock.Random;
Random.date('yyyy-MM-dd');//"2018-08-16"
複製程式碼

第一種方式，呼叫mock

注意，將 mock.js 直接匯入即可

import "../mock/mock.js";
axios.post("/login").then(response => {
    if (response.data) {
      this.jumpToKpi();
    }
});
複製程式碼

第二種方式，編寫server

使用 express 提供服務

首先需要安裝幾個依賴：express、babel-cli（支援es6編寫服務）
通過 babel-node mockservice.js 命令啟動服務
注意，babel-node命令不能支援 import 寫法，使用 require 即可。如要用 import 請自行解決

npm i --save-dev express
npm install --save-dev babel-cli
babel-node mockservice.js
複製程式碼

跨域設定

假設 express 服務使用 8090 埠，而 vue 開發一般啟動 8080，則必定跨域，需在 server 端進行設定

app.use(function (req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header('Access-Control-Allow-Methods', 'PUT, GET, POST, DELETE, OPTIONS');
    res.header("Access-Control-Allow-Headers", "X-Requested-With");
    res.header('Access-Control-Allow-Headers', 'Content-Type');
    next();
});
複製程式碼

完整的 mockservice.js 如下

// import express from "express"
// import Mock from "mockjs"
const express = require('express');   //引入express
const Mock = require('mockjs');       //引入mock

let app = express();
const Random = Mock.Random;

app.use(function (req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header('Access-Control-Allow-Methods', 'PUT, GET, POST, DELETE, OPTIONS');
    res.header("Access-Control-Allow-Headers", "X-Requested-With");
    res.header('Access-Control-Allow-Headers', 'Content-Type');
    next();
});

app.use('/list', function (req, res) {
    res.json(Mock.mock({
        'status': 200,
        'list|10': [
            {
                "name|+1": ["John Brown", "Jim Green", "Joe Black", "Jon Snow"],
                "age|18-70": 70,
                "address": Random.region(),
                "date": Random.date()
            }
        ]
    }))
})

app.listen('8090', () => {
    console.log('監聽埠 8090')
})
複製程式碼

第二種方式，編寫mock

同第一種方式

Mock物件API用例檢視

String類
Number類
Boolean類
==Object類==
==Array類==
Function類
RegExp類(略)
Path類(略)
==Basic類 and Random==
==Date類==
Image類
Color類
==Text類==
Name類
==Web類==
==Address類==
Helper類
Miscellaneous類

/* String類 */

var str = Mock.mock({
  "name|1-10":"zk",//1-10次重複
  "home|3":"china",//3次重複
  
})
console.log(str);
//{ "name": "zkzkzkzkzk", "home": "chinachinachina" }

/* Number類 */

var num = Mock.mock({
  "age":22,
  "int|1-100":100,//1-100隨機
  "floor1|1-100.1-5":1,//整數部分1-100，小數1-5位
  "floor2|23.1-3":1,//整數23，小數1-3位
  "floor3|123.3":1//整數123，小數3位
  
})
console.log(num);
//{ "age": 22, "int": 50, "floor1": 11.8427, "floor2": 23.6, "floor3": 123.512 }

/* Boolean類 */

var bool = Mock.mock({
  "can":true,//布林值，true
  "has|1":true,//布林值，可真可假
  "is|1-2":true,//布林值，可真可假
})
console.log(bool);
//{ "can": true, "has": true, "is": false }

/* Object類 */
var obj = Mock.mock({
  //從雜湊表中，隨機取出2個值
  "object1|2": {
    "310000": "上海市",
    "320000": "江蘇省",
    "330000": "浙江省",
    "340000": "安徽省"
  },
  //從雜湊表中，隨機取出1-3個值
  "object2|1-3": {
    "310000": "上海市",
    "320000": "江蘇省",
    "330000": "浙江省",
    "340000": "安徽省"
  }
})
console.log(obj);
//{ "object1": { "310000": "上海市", "330000": "浙江省" }, "object2": { "310000": "上海市", "320000": "江蘇省", "330000": "浙江省" } }

/* Array類 */

var arr = Mock.mock({
  //隨機取1個數
  "arr1|1":[1,2,3,4,5,6,7],
  //按序生成一個list
  "arr2|4":[{
    "name|+1":["gs","zk","lili"]
  }],
  //生成一個1-4個項的陣列
  "arr3|1-4":["green"]
})
console.log(arr);
//{ "arr1": 3, "arr2": [ { "name": "gs" }, { "name": "zk" }, { "name": "lili" }, { "name": "gs" } ], "arr3": [ "green", "green", "green", "green" ] }

/* Function類 */
var fun = Mock.mock({
  "fun1":"this is fun1",
  "fun2":function(){
    return this.fun1
  }
})
console.log(fun);
//{ "fun1": "this is fun1", "fun2": "this is fun1" }

/* RegExp類(略) */

/* Path類(略) */

/* Basic類 and Random */

var Random = Mock.Random;
// Random.boolean();
var random = {
  bool1: Mock.mock('@boolean'),//
  natural1: Random.natural(60, 100),
  integer1:Random.integer(60, 100),
  float1:Random.float(10,20,3,5),//浮點數，限制小數位最小3位，最大5位
}
console.log(random);
//{ "bool1": false, "natural1": 79, "integer1": 85, "float1": 16.5758 }

//Random.range(start?, stop, step?)
var range = {
  range1:Random.range(10),
  range2:Random.range(3,8),//3-8但不包含8
  
}
console.log(range);
//{ "range1": [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 ], "range2": [ 3, 4, 5, 6, 7 ] }

/* Date類 */

//Random.date
var date = {
  date:Random.date(),
  date1:Random.date('yyyy-MM-dd'),
  date2:Random.date('yy-MM-dd'),
  date3:Random.date('y-MM-dd'),
  date4:Random.date('y-M-d'),
}
console.log(date);
//{ "date": "2015-04-30", "date1": "2013-01-07", "date2": "97-04-02", "date3": "03-10-04", "date4": "83-1-8" }

//Random.time
console.log(Random.time());
//20:21:26

//Random.datetime
var datetime = {
  datetime1:Random.datetime('yyyy-MM-dd A HH:mm:ss'),
  datetime2:Random.datetime('yy-MM-dd a HH:mm:ss'),
  datetime3:Random.datetime('y-MM-dd HH:mm:ss'),
  datetime4:Random.datetime('y-M-d H:m:s'),
}
console.log(datetime);
//{ "datetime1": "1981-03-27 AM 10:47:11", "datetime2": "86-03-16 am 06:25:02", "datetime3": "02-12-18 18:13:46", "datetime4": "84-6-6 1:20:37" }

//Random.now
console.log(Random.now());
//2019-02-11 11:10:22

/* Image類 */

//Random.image
var image = {
  image1:Random.image(),
  image2:Random.image('200x100'),
  image3:Random.image('200x100', '#FF6600'),
  image4:Random.image('200x100', '#4A7BF7', 'Hello'),
}
console.log(image);
//{ "image1": "http://dummyimage.com/234x60", "image2": "http://dummyimage.com/200x100", "image3": "http://dummyimage.com/200x100/FF6600", "image4": "http://dummyimage.com/200x100/4A7BF7&text=Hello" }

//Random.dataImage
Random.dataImage('200x100', 'Hello Mock.js!');//生成base64圖片的程式碼

/* Color */

//Random.color()
console.log(Random.color());
//Random.rgb()
console.log(Random.rgb());
//Random.rgba()
console.log(Random.rgba());

/* Text類 */

//paragraph
var paragraph = {
  paragraph1:Random.paragraph(2),
  paragraph2:Random.paragraph(1,4),//生成1-4段落的文字
}
console.log(paragraph);
//{ "paragraph1": "Rwolb iow nzw tncvxbjo xcuwxztvp sluowwdbbe ebspm qxhu oyihkjgo cyperf keizgr wcyk kgsdlxk fkt tlwr fwoappj pcfoln. Wxl gqb tlayp fst ylpikqzvjl ywiwudcu jjhc ikuiojcxdv herlliuti yrebxci mhbwxy rmfyw.", "paragraph2": "Ecifwwsor msyhxovy gdgrr nxpg wfkd suveigx gxtdqvydy oncubsadx cujix qtpkixn tbkzwuf suiobevg qstrs. Mgkxu ugvjz hjxw oje bfwlfmu rgvwqg uee mbub wnjn msjccuihk quprpmwuxy cmbg. Sem mexgend dlijdlo mqooaorr uimveu ktst kbusaeo ntjwbba hftkjq lmbfjklkqc dakew jxidcsr byfqwfj yye." }

//cparagraph | 中文段落
var cparagraph = {
  cparagraph1:Random.cparagraph(2),
  cparagraph2:Random.cparagraph(1,4),//生成1-4段落的[中文文字]
}
console.log(cparagraph);
//{ "cparagraph1": "為必子之有院場走九府江制受。或全親書以眾與改你步積利江爭採。", "cparagraph2": "小特區戰高系應化次主它人系者。發全七第歷東道裝號己育結界滿鐵整習算。" }

//sentence
var sentence = {
  sentence1:Random.sentence(5),//生成5個單詞的句子
  sentence2:Random.sentence(1,10)
}
console.log(sentence);
//{ "sentence1": "Kmuu apvtblwsk pyqleysce xoghbiiymp mxhkmogvgu.", "sentence2": "Utdnre vbmc bziw monmkuz pkwjp qthrjwjq hwbgjwfqk wvdfw jybjjgv." }

//csentence | 中文句子
var csentence = {
  csentence1:Random.csentence(5),//生成5個單詞的句子
  csentence2:Random.csentence(1,10)
}
console.log(csentence);
//{ "csentence1": "習定千機布。", "csentence2": "去鬥或己。" }

//word
var word = {
  word1:Random.word(5),//生成單詞
  word2:Random.word(1,10)
}
console.log(word);
//{ "word1": "ywwxr", "word2": "chkawikz" }

//cword | 中文單詞
var cword = {
  cword1:Random.cword(5),//生成單詞
  cword2:Random.cword(1,10),
  cword3:Random.cword('零一二三四五六七八九十', 3)
}
console.log(cword);
//{ "cword1": "下標力從劃", "cword2": "山許切往理也天家革", "cword3": "九十二" }

//title
var title = {
  title1:Random.title(5),//生成單詞
  title2:Random.title(1,10)
}
console.log(title);
//{ "title1": "Trkfpfrct Vfhgwer Kejisbvjws Epfounrun Vwra", "title2": "Stns Hcfppzc" }

//ctitle | 中文標題
var ctitle = {
  ctitle1:Random.ctitle(5),//生成單詞
  ctitle2:Random.ctitle(1,10)
}
console.log(ctitle);

/* Name類 */

//Random.first()
//Random.last()
//Random.name()
var cname = {
  cfirst:Random.cfirst(),//只能是一個字
  clast:Random.clast(),//只能是一個字
  cname:Random.cname(),//預設為2個字，可以設為3個字，4個字不行
}
console.log(cname);
//{ "cfirst": "段", "clast": "偉", "cname": "蔡剛" }

/* Web類 */

//Random.url()
console.log(Random.url());//注意，會有各種協議頭，不只http
//rlogin://eertsd.uy/ihthk

//Random.domain()
console.log(Random.domain());//注意，會有奇葩域名
//lywxjl.tel

//Random.protocol()
console.log(Random.protocol());//注意，會有ftp協義等等
//ftp

//Random.email()
console.log(Random.email());
//o.gyu@jox.mz

//Random.ip()
console.log(Random.ip());
//13.224.127.79

/* Address類 */

//Random.region() | 地域大區
console.log(Random.region());
//東北

//Random.province() | 省
console.log(Random.province());
//河南省

//Random.city() | 城市
console.log(Random.city());
console.log(Random.city(true));//增加引數後，會提供城市所在的省
//大同市
//江蘇省 常州市

//Random.county() | 區縣
console.log(Random.county());
console.log(Random.county(true));//增加引數後，會提供區縣所屬的市和省
//青山區
//四川省 德陽市 中江縣

/* Helper類 */

//Random.capitalize() | 首字母大寫
console.log(Random.capitalize('hello'));
//Hello

//Random.upper() | 大寫
console.log(Random.upper('hello'));
//HELLO

//Random.lower() | 小寫
console.log(Random.lower('HELLO'));
//hello

//Random.pick() | 隨機抽取
console.log(Random.pick(['a', 'e', 'i', 'o', 'u']));
//i

//Random.shuffle() | 洗牌
console.log(Random.shuffle(['a', 'e', 'i', 'o', 'u']));
//[ "o", "i", "u", "e", "a" ]

/* Miscellaneous | 混雜類 */

//Random.guid() | 全域性唯一識別符號
console.log(Random.guid());
//7AAEc148-FcAD-7EBA-0dAD-f7ac1c43AdCC

//Random.id()
console.log(Random.id());
//710000198410172520

//Random.increment | 自增
console.log(Random.increment());//1
console.log(Random.increment());//2
console.log(Random.increment());//3
console.log(Random.increment(100));//103
console.log(Random.increment());//104

console.log("");
console.log("");
console.log("");
console.log("");
console.log("")；
複製程式碼

Mockjs 前端介面資料模擬
2018-09-07
MockJS前端
Python中Faker庫介紹及如何使用創造模擬資料
2020-10-22
Python
vue-cli中模擬資料的兩種方法
2018-06-29
Vue
Vue3 中的各種 ref
2024-12-01
Vue
改造vue-cli,使用mockjs搭建mock server
2019-03-04
VueMockJSServer
PHP中獲取當前頁面的各種URL格式
2019-02-16
PHP
Vue mockjs mock.js
2024-05-01
VueMockJS
Vue 使用History記錄上一頁面的資料
2018-11-01
Vue
SQL稽核 | 如何快速使用 SQLE 稽核各種型別的資料庫
2022-05-20
SQL型別資料庫
如何選擇各種型別資料庫？- Raj
2021-11-15
型別資料庫
Java中各種Log的使用
2019-11-10
Java
nb的vue - vue各種版本
2019-02-28
Vue
如何解決重要資料檔案各種問題？
2020-12-24
python中list的各種方法使用
2018-10-03
Python
如何使用ChatGPT模擬MySQL資料庫
2023-02-20
ChatGPTMySql資料庫
JavaScript中的幾種資料結構簡介
2019-03-25
JavaScript資料結構
LaTeX中各種常用盒子的使用總結
2020-10-28
Windows Server 2016各種版本介紹
2018-10-09
WindowsServer
sql統計各種奇葩的資料庫表資料
2021-09-09
SQL資料庫
使用 NocoDB 一鍵將各種資料庫轉換為智慧表格
2024-03-26
資料庫
Python——各種方法的使用（儘量每天更新）——from（資料探勘課）
2020-11-19
Python
redis部署以及各種資料型別使用命令等詳解
2022-03-05
Redis資料型別
RabbitMQ如何解決各種情況下丟資料的問題
2020-11-01
MQ
NR中各種ID
2024-11-23
如何使用Tar命令在Linux系統中解壓各種檔案格式
2024-08-04
Linux
FreeMarker對應各種資料結構解析
2019-01-07
資料結構
golang — mgo解析各種資料型別分析
2019-02-16
Golang資料型別
Golang 學習寶庫，各種資料收集
2019-09-11
Golang
javascript 判斷各種資料的型別
2019-03-05
JavaScript型別
如何驗證 elk 裡面的資料？
2020-08-25
mockjs
2023-05-13
MockJS
caffe中各種cblas的函式使用總結
2020-04-04
函式
Django model update的各種用法介紹
2018-07-25
Django
2021年全球網站各語種使用規模（附原資料表）
2021-08-10
網站
Win10系統中虛擬桌面的使用方法
2018-03-31
Win10
深度學習常用的資料集，包括各種資料跟影象資料
2018-09-13
深度學習
海量IT資料 + 各種平臺下的Oracle安裝檔案 + 公開課錄影 + 各種視訊教程資料
2018-07-18
Oracle
Vue-cli 使用json server在本地模擬請求資料
2019-03-04
VueJSONServer

vue中如何使用mockjs摸擬介面的各種資料

mockjs的作用

Vue 中使用 mock

第一種方式，編寫mock

第一種方式，呼叫mock

第二種方式，編寫server

第二種方式，編寫mock

Mock物件API用例檢視

相關文章