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前端
vue-cli中模擬資料的兩種方法
2018-06-29
Vue
Python中Faker庫介紹及如何使用創造模擬資料
2020-10-22
Python
前端資料與後臺分離，使用mockjs模擬後臺返回json資料
2017-12-14
前端MockJSON
使用管道符在PowerShell中進行各種資料操作
2015-05-21
.NET中各種資料庫連線大全
2007-11-27
資料庫
PHP中獲取當前頁面的各種URL格式
2019-02-16
PHP
改造vue-cli,使用mockjs搭建mock server
2019-03-04
VueMockJSServer
Vue 使用History記錄上一頁面的資料
2018-11-01
Vue
SQL稽核 | 如何快速使用 SQLE 稽核各種型別的資料庫
2022-05-20
SQL型別資料庫
nb的vue - vue各種版本
2019-02-28
Vue
Java中各種Log的使用
2019-11-10
Java
如何選擇各種型別資料庫？- Raj
2021-11-15
型別資料庫
各種學習資料
2014-03-03
.NET中各種資料庫連線大全 (轉)
2007-12-14
資料庫
Redis中5種資料結構的使用場景介紹
2015-11-18
Redis資料結構
C++ 中各種map的使用
2013-11-25
C++
如何解決重要資料檔案各種問題？
2020-12-24
各種資料庫連線
2007-06-29
資料庫
淺談虛擬桌面的資料安全
2015-05-04
給Excel表格中的資料批次新增各種符號
2012-06-29
Excel符號
python中list的各種方法使用
2018-10-03
Python
如何使用ChatGPT模擬MySQL資料庫
2023-02-20
ChatGPTMySql資料庫
各種智慧指標的介紹
2013-08-06
指標
JavaScript中的幾種資料結構簡介
2019-03-25
JavaScript資料結構
LaTeX中各種常用盒子的使用總結
2020-10-28
三種方法教你如何用PHP模擬post提交資料
2016-02-16
PHP
[原創]用Charles模擬App各種網路頻寬測試介紹
2014-02-25
APP
vue中如何監聽vuex中的資料變化
2021-09-11
Vue
RabbitMQ如何解決各種情況下丟資料的問題
2020-11-01
MQ
各種語言的介紹(轉)
2007-08-11
iOS模擬各種網路狀態
2016-03-22
iOS
sql統計各種奇葩的資料庫表資料
2021-09-09
SQL資料庫
caffe中各種cblas的函式使用總結
2020-04-04
函式
redis部署以及各種資料型別使用命令等詳解
2022-03-05
Redis資料型別
前端樹形Tree資料結構使用-🤸🏻‍♂️各種姿勢總結
2024-02-25
前端資料結構
使用 NocoDB 一鍵將各種資料庫轉換為智慧表格
2024-03-26
資料庫
如何驗證 elk 裡面的資料？
2020-08-25

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

mockjs的作用

Vue 中使用 mock

第一種方式，編寫mock

第一種方式，呼叫mock

第二種方式，編寫server

第二種方式，編寫mock

Mock物件API用例檢視

相關文章