模擬後台介面,提供頁面需要的資料。
使用例子:
資料模板中的每個屬性由3部分構成(// 使用 mock
var mock =
require
('mockjs'
)var data = mock.
mock(]
})// 輸出結果
console.
log(
json
.stringify
(data)
)
'name|rule': value
):屬性名、生成規則、屬性值:
佔位符只是在屬性值字串中占個位置,並不出現在最終的屬性值中。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...