在vue-cli3中怎么使用mockjs ？使用mock.js經(jīng)驗(yàn)分享！

在前端的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

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) });

以上就是有關(guān)于“在vue-cli3中怎么使用mockjs ？”這個(gè)問題的相關(guān)內(nèi)容，當(dāng)然如果你有更好的方法也可以和大家一同分享探討，更多的有關(guān)于vue這方面的內(nèi)容我們都可以在W3cschool中進(jìn)行學(xué)習(xí)和了解