在前端的vue框架學(xué)習(xí)中我們知道Mock 數(shù)據(jù)是前端開發(fā)過程中必不可少的一環(huán),是分離前后端開發(fā)的關(guān)鍵鏈路。通過預(yù)先跟服務(wù)器端約定好的接口,模擬請求數(shù)據(jù)甚至邏輯,能夠讓前端開發(fā)更加獨(dú)立自主,不會(huì)被服務(wù)端的開發(fā)所阻塞。那么今天我們就來說說有關(guān)于“在vue-cli3中怎么使用mockjs ?”這個(gè)問題吧!
一、安裝
安裝代碼如下:
yarn add mockjs
// 或者
npm i mockjs -S
二、搭建mock環(huán)境
1、我們通過在根目錄中新建mock目錄,在這個(gè)目錄中我們新建一個(gè)?index.js
?文件和?modules
?文件夾。
?index.js
?代碼如下:
// index.js
const Mock = require('mockjs');
const mockFiles = require.context('./modules', false, /\.js$/);
let mocks = [];
mockFiles.keys().forEach(key => {
mocks.push(...mockFiles(key))
})
mocks.forEach(item => {
Mock.mock(item.url, item.type, item.response)
})
在modules文件夾中的?user.js
?代碼如下:
// modules/user.js
const userList = {
url: "/user/list",
type: "get",
response: () => {
return {
code: 20000,
data: [
{
"id": 1,
"username": "zhoujielun",
"password": "123456"
},
{
"id": 2,
"username": "guojingming",
"password": "666666"
},
]
}
}
}
const userList1 = {
url: "/user/list1",
type: "get",
response: () => {
return {
code: 20000,
data: [
{
"id": 1,
"username": "zhoujielun",
"password": "123456"
},
{
"id": 2,
"username": "guojingming",
"password": "666666"
},
]
}
}
}
module.exports = [
userList,
userList1,
]
2、在main中引入,代碼如下:
require("../mock");
當(dāng)我們完成到這邊的時(shí)候其實(shí)環(huán)境已經(jīng)搭建的差不多了,下面我們在進(jìn)行優(yōu)化。
在我們的根目錄中新建個(gè)?.env
?文件:
// .env
VUE_APP_MOCK=true
完成之后我們在進(jìn)行修改一下?main.js
?:
// VUE_APP_MOCK的值為true,并且在開發(fā)環(huán)境下
if (process.env.VUE_APP_MOCK && process.env.NODE_ENV === 'development') {
require("../mock");
}
到這一步我們就完成了?mock
?的數(shù)據(jù)環(huán)境搭建了。
三、使用
我們在使用的使用需要注意的是在接口中的?url
?和?type
?要與我們的?mock
?中定義的相同。代碼如下:
// request.js
import axios from 'axios'
import { Message } from 'element-ui'
// create an axios instance
const service = axios.create({
baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
// withCredentials: true, // send cookies when cross-domain requests
timeout: 5000 // request timeout
})
// request interceptor
service.interceptors.request.use(
config => {
return config
},
error => {
// do something with request error
console.log(error) // for debug
return Promise.reject(error)
}
)
// response interceptor
service.interceptors.response.use(
response => {
const res = response.data;
return res;
},
error => {
console.log('err' + error) // for debug
Message({
message: error.message,
type: 'error',
duration: 5 * 1000
})
return Promise.reject(error)
}
)
export default service
?api
?層中代碼:
// index.js
const moduleFiles = require.context('./modules', false, /\.js$/);
let apis = {};
moduleFiles.keys().forEach(key => {
// 獲取文件名,將 ./ 和 .js 替換為空, 最終格式 common
const fileName = key.replace(/(\.\/|\.js)/g, '');
// 填充數(shù)據(jù)
apis[fileName] = moduleFiles(key);
})
export default {
...apis
}
// modules/user.js
import request from '@/utils/request'
export function getList() {
return request({
url: '/user/list',
method: 'get'
})
}
完成之后我們在?views
?層調(diào)用?api
?接口,代碼如下:
import api from "@/api";
api.user.getList().then(res => { console.log(res) });
總結(jié):
以上就是有關(guān)于“在vue-cli3中怎么使用mockjs ?”這個(gè)問題的相關(guān)內(nèi)容,當(dāng)然如果你有更好的方法也可以和大家一同分享探討,更多的有關(guān)于vue這方面的內(nèi)容我們都可以在W3cschool中進(jìn)行學(xué)習(xí)和了解