在vue專案中mock的使用

模擬後台介面，提供頁面需要的資料。

使用例子：

// 使用 mock

var mock =
require
('mockjs'
)var data = mock.
mock(]
})// 輸出結果
console.
log(
json
.stringify
(data)
)

mock.

mock()
/* =>
*/

佔位符的格式為：

@佔位符

@佔位符
(引數 [
, 引數]
)

用@來標識其後的字串是 佔位符；

佔位符引用的是mock.random中的方法；

通過mock.random.extend()來擴充套件自定義佔位符；

佔位符也可以引用 資料模板中的屬性；

佔位符會優先引用資料模板中的屬性；

佔位符支援相對路徑和絕對路徑。

mock.

mock(}
)/* 
} */

yarn add mockjs --dev

// /mock/index.js檔案(mock的總引用檔案)

const mock =
require
('mockjs'
)const course =
require
('./course'
)const mocks =
[...course
]function
mockxhr()
}module.exports =

// /mock/course.js(模組中的模擬資料的建立)

const mock =
require
('mockjs'
)const list =
const count =
200// 定義建立的資料個數
for(
let i =
0; i < count; i++))
)}module.exports =[}
}}]

// /api/course.js(介面的定義)

import request from
'@/utils/request'
export
function
getcourselist
(params)
)}

// /utils/request.js(介面的封裝)

import axios from
'axios'
import
from
'@/utils/auth'
const service = axios.
create()
service.interceptors.request.
use(
config =>
, error =>
)// response interceptors
service.interceptors.response.
use(response =>
else
}, error =>
)export
default service

// main.js(引入並初始化mock)

const
=require
('./mock'
)mockxhr
()

// vue頁面中的使用

import
from
'@/api/course'
getcourselist()
.then
(res =>
);

在vue專案中, mock資料

1.在根目錄下建立 test 目錄,用來存放模擬的 json 資料,在 test 目錄下建立模擬的資料 data.json 檔案 2.在build目錄下的 dev server.js的檔案作如下更改 3.在.vue做請求,就可以成功獲取data.json的資料了,下面使用 axios 進行請求axi...

vue專案中使用mock

1 src下新建mock資料夾,mock資料夾下新建response目錄 造後台介面資料，輸出getuserinfo import mock from mockjs const random mock.random export const getuserinfo options userinfo....

Vue筆記 專案中設定mock資料

我們在使用vue寫前端專案的時候，可能會需要後端傳回來的資料來進行測試。但是有的時候我們沒有後端的環境，不能獲取到我們想要的資料。這個時候我們就需要在vue專案中設定一些假資料，即mock資料。配置完成之後，我們就可以像請求後台資料一樣，通過乙個特定的url來獲取到我們需要的mock資料，比如 ap...