Vue項目中引入Mock.js & Mock.js語法整理

1.安裝 ：

cd項目目錄，npm install mockjs --save-dev

 

2.使用：

在src文件夾下創建mock文件夾，在mock文件夾中創建一個api.js文件（命名隨意）

 

3.在main.js中添加一行

require('./mock/api')

 

4.api.js配置

配置方式1（一看就懂版）

// 引入mockjs
const Mock = require('mockjs') // 獲取 mock.Random 對象
const Random = Mock.Random // mock一組數據
const simulateData = function () { let data = [] for (let i = 0; i < 8; i++) { let data = { name: Random.cname(), date: Random.date(), city: Random.city() } data.push(data) } return { data: data } } Mock.mock('/user/login', 'get', simulateData)

 

如何獲取數據（我這里用的是axios）：直接向

配置的url發起請求即可

 返回的數據應該類似於下圖

 

 配置方式2：在Mock.mock()中進行配置

 

Mock的語法：

官方文檔

 Mock.mock(url,type,template|function(options))

Mock會攔截向指定url發起的指定格式的數據請求，並返回根據模板生成的數據

function(options)：

Mock.mock('http://test.com', 'get', function() { return Mock.mock({ "user|1-3": [{ 'name': '@cname', 'id': 88 } ] }); });

 

自定義響應時間

// 設置1秒至4秒間響應 Mock.setup({ timeout: '1000-4000' });

Mock.Random是一個工具類，用於生成各種格式隨機數據. 有兩種寫法:

第一種:

// 生成一個email格式的字符串 console.log(Mock.mock('@email')); // 結果: [e-mail]

第二種:

var Random = Mock.Random; console.log(Random.email()); // 結果: [e-mail]

這里有一份比較詳細的整理

Mock.Js官方的例子

Mock.toJSONSchema( template )：把 Mock.js 風格的數據模板 template 轉換成 JSON Schema

 

(可以理解為是JSON風格的數據模板）