學(xué)了一個(gè)月的前端，終于要開(kāi)始用vue框架了。。。

因?yàn)橹熬毩?xí)HTML的時(shí)候，發(fā)現(xiàn)mock.js 挺好用的，所以也想把它帶到vue中使用，我看了官方文檔好像沒(méi)有說(shuō)明用url請(qǐng)求的方式。所以自己也找了些其它大佬寫(xiě)的博客，弄了半天，還是自己研究出來(lái)了。

下面說(shuō)的方法都是最最基礎(chǔ)的方法。麻雀雖小，五臟俱全??！

第一步：把 axios mock.js 都安裝在項(xiàng)目中（這個(gè)不用多說(shuō)）

第二步：在src下面新建如下目錄

目錄結(jié)構(gòu)

我這里模擬的是用戶列表

看一下userInfo.js中的代碼

const mockUserInfo = [{

? id: 0,

? username: 'admin',

? password: '123456'

}, {

? id: 1,

? username: 'user1',

? password: '123456'

}, {

? id: 2,

? username: 'user2',

? password: '123456'

}]

export default {

? mockUserInfo

}

再看一下index.js中的代碼

import Mock from 'mockjs'

import userInfo from './mock/userInfo'

Mock.mock('/user/userInfo', 'get', userInfo)

再把index.js 文件在main.js 中全局引用

全局引用

測(cè)試請(qǐng)求

組件中請(qǐng)求

效果

請(qǐng)求效果

這樣是不是很簡(jiǎn)單

對(duì)的就是很簡(jiǎn)單

我在查資料的時(shí)候，發(fā)現(xiàn)了這個(gè)網(wǎng)站? ?https://www.eolinker.com

這個(gè)可以模擬真實(shí)接口，帶數(shù)據(jù)庫(kù)，我還沒(méi)研究，大家有興趣可以去看一下。

最后祝我下個(gè)星期能夠?qū)W得順利