Vue管理系統前端系列二相關工具引入及封裝

時間 2020-08-21

原文原文鏈接

sass-loader/vuex 等的引入說明

tips:vue-cli 4.x腳手架封裝度更高，配置起來簡單許多，旨在讓用戶把精力都放在編寫業務代碼中html

vue-cli 4.x在建立時已經選擇了相應依賴，所以項目建立好後，基本的依賴都有。不須要重複安裝。vue

引入 `element`

vue-cli 4.x 引入 element 可謂是至關的方便，只須要執行下方語句，便可引入element。node

vue add element

有兩個選項，根據需求選擇，ios

How do you want to import Element? Import on demand #這裏選擇的是按需引入。只引入須要的組件，以達到減少項目體積的目的。
Choose the locale you want to load zh-CN # 選擇加載環境，這裏選擇的是中文

須要使用什麼組件，在plugins下的 element.js 中添加對應的組件。以減少項目體積。vuex

TIPS：此種方式會自動引入樣式vue-cli

引入 `axios`

更多關於axios的信息，請看我另外一篇文章，傳送門npm

axios 是一個基於 Promise 用於瀏覽器和 nodejs 的 HTTP 客戶端，項目與後端的請求交互須要使用到 axios，執行如下命令，安裝 axios 依賴。element-ui

npm i axios

1.基本使用

安裝完成後，能夠直接在界面上引入 axios 而後使用 axios.get 就能直接發起 get 請求。json

import axios from 'axios'

axios.get('url').then((data) => {
    console.log(data)
})

2.封裝使用

2.1 開發環境配置請求地址

首先在.env.development文件中配置須要發起請求的地址，VUE_APP_BASE_RUL='https://www.fastmock.site/mock/37b157378200e4dbd5eecff887e20f81/lion/'axios

須要特別注意的是 .env.production和.env.development文件參數說明：

NODE_ENV - 是「development」、「production」、"test"或者自定義的值。具體的值取決於應用運行的模式
BASE_URL - 會和 vue.config.js 中的 publicPath 選項相符，即你的應用會部署到的基礎路徑
除了 NODEENV 和 BASE_URL，其餘的環境變量必須以 VUE_APP 開頭
項目中使用：process.env.環境變量名，eg：VUE_APP_BASE_URL

2.2 配置代理

而後，若要配置跨域處理的話，在vue.config.js文件中添加訪問代理。

module.exports = {
    publicPath: process.env.NODE_ENV === 'production' ? '/' : '/',
    outputDir: 'dist', //默認輸出到該文件夾，生成時會自動刪除該文件
    assetsDir: 'static',
    lintOnSave: true, // 是否開啓eslint保存檢測
    productionSourceMap: false, // 是否在構建生產包時生成sourcdeMap
    chainWebpack: (config) => {
        config.resolve.alias.set('@', resolve('src')).set('views', resolve('src/views'))
        // config.optimization.runtimeChunk('single')
    },
    devServer: {
        host: 'localhost',
        port: '8080',
        hot: true,
        open: true,
        overlay: {
            warning: false,
            error: true,
        },
        proxy: {
            [process.env.VUE_APP_BASE_RUL]: {
                target: process.env.VUE_APP_BASE_RUL,
                changeOrigin: true,
                secure: false,
                pathRewrite: {
                    ['^' + process.env.VUE_APP_BASE_RUL]: '',
                },
            },
        },
    },
}

2.3 添加接口相關文件

相關文件說明：

1. config.js：axios 默認配置，請求基本 url。
1. axiosHttp.js：二次封裝 axios 模塊，包含攔截器等信息。
1. index.js：請求接口彙總模塊，聚合模塊 API。在 main.js 文件中按插件引入

在 src/api 文件夾下添加 config.js配置文件

const baseUrl = process.env.VUE_APP_BASE_RUL
export default {
    method: 'get',
    // 基礎url前綴
    baseURL: baseUrl,
    // 請求頭信息
    headers: {
        'Content-Type': 'application/json;charset=UTF-8',
    },
    // 參數
    data: {},
    // 設置超時時間
    timeout: 10000,
    // 返回數據類型
    responseType: 'json',
}

在 src/api 文件夾下添加 axiosHttp.js配置文件

import axios from 'axios'
import qs from 'qs'
import router from '@/router'
import config from './config'
import { Message } from 'element-ui'

axios.defaults.timeout = config.timeout
axios.defaults.headers = config.headers
axios.defaults.baseURL = config.baseURL

// 請求攔截器
axios.interceptors.request.use(
    (config) => {
        // 觸發loading效果
        //判斷是否存在token,若是存在，則在header上加上token
        // let token = getStore('token')
        // if (token) {
        //     config.headers.common['token'] = token
        // }
        if (config.method == 'post' || config.method == 'put') {
            //將數據轉成string
            config.data = JSON.stringify(config.data)
        } else if (config.method == 'get') {
            //&& browser.isIE
            //給Get添加時間戳 解決IE緩存問題
            let symbol = config.url.indexOf('?') >= 0 ? '&' : '?'
            config.url += symbol + '_=' + Date.now()
            config.data = qs.stringify(config.data)
        }
        return config
    },
    (err) => {
        // 關閉loading
        // 失敗提示
        return Promise.resolve(err)
    }
)

// 響應攔截器
axios.interceptors.response.use(
    (response) => {
        // 關閉loading
        if (!response || !response.data || !response.data.success) {
            // 失敗提示
        } else if (response.data.data && response.data.code == 200) {
            // 成功處理
        }
        if (response.data) {
            switch (response.data.code) {
                case 401:
                    // 返回 401 清除token信息並跳轉到登陸頁面
                    // store.commit('LOGOUT')
                    Message.error('登陸已失效，請從新登陸')
                    setTimeout(function () {
                        router.replace({
                            path: '/login',
                            // 登陸成功後跳入瀏覽的當前頁面
                            query: { redirect: router.currentRoute.fullPath },
                        })
                    }, 1500)
                    break
                case 402:
                    //402無權限操做
                    Message.error('無權限操做')
                    return new Promise(() => {}) //外部不會再處理
                    break
            }
        }
        return response
    },
    (err) => {
        // 關閉loading
        // 提示異常
        let errMessage = ''
        if (err && err.response) {
            switch (err.response.status) {
                case 400:
                    errMessage = '請求錯誤'
                    break
                case 401:
                    errMessage = '未受權，請登陸'
                    break
                case 403:
                    errMessage = '拒絕訪問'
                    break
                case 404:
                    errMessage = `請求發生錯誤`
                    // err.response.config.url
                    break
                case 408:
                    errMessage = '請求超時'
                    break
                case 500:
                    errMessage = '服務器內部錯誤'
                    break
                case 501:
                    errMessage = '服務未實現'
                    break
                case 502:
                    errMessage = '網關錯誤'
                    break
                case 503:
                    errMessage = '服務不可用'
                    break
                case 504:
                    errMessage = '網關超時'
                    break
                case 505:
                    errMessage = 'HTTP版本不受支持'
                    break
                default:
                    errMessage = '服務器開小差了，請稍後再試'
            }
        }
        Message.error(errMessage)
        //外部不會再處理
        return new Promise(() => {})
    }
)
export default {
    Get(url, params = {}) {
        return new Promise((resolve, reject) => {
            axios
                .get(url, { params })
                .then((res) => {
                    resolve(res.data)
                })
                .catch((error) => {
                    reject(error)
                    //resolve(error)
                })
        })
    },
    Post(url, params = {}) {
        return new Promise((resolve, reject) => {
            axios
                .post(url, params)
                .then((res) => {
                    resolve(res.data)
                })
                .catch((error) => {
                    reject(error)
                    //resolve(error)
                })
        })
    },
    Delete(url, params = {}) {
        return new Promise((resolve, reject) => {
            axios
                .delete(url, params)
                .then((res) => {
                    resolve(res.data)
                })
                .catch((error) => {
                    reject(error)
                    //resolve(error)
                })
        })
    },
    Put(url, params = {}) {
        return new Promise((resolve, reject) => {
            axios
                .put(url, params)
                .then((res) => {
                    resolve(res.data)
                })
                .catch((error) => {
                    reject(error)
                    //resolve(error)
                })
        })
    },
}

在 src/api/modules 文件夾下添加 user.js文件

import axios from '@/api/axiosHttp'

export const login = (params) => {
    return axios.Post('/login', params)
}

export const test = () => {
    return axios.Get('/test')
}

在 src/api 文件夾下添加 index.js文件

/*
 * 接口統一集成模塊
 */
import * as user from '@/api/modules/user'

// 默認所有導出
export default {
    ...user,
}

能夠在 main.js 中將全部的接口都掛在到原型鏈上，也能夠界面引入須要的接口

須要使用原型鏈方式的，代碼以下：

# main.js 文件
import api from '@/api'
Vue.prototype.$api = api

# app.vue 文件
methods: {
    loginFunc() {
        this.$api.login({ username: 'admin', password: '123456' }).then((data) => {
            this.$message({
                type: 'success',
                message: JSON.stringify(data),
            })
        })
    },
},

單個界面引入須要的接口

# app.vue 文件
import { login } from '@/api/modules/user'
export default {
    name: 'app',
    components: {
    },
    data() {
        return {}
    },
    methods: {
        loginFunc() {
            console.log(login)
            // console.log(this.$api.user.login)
            login({ username: 'admin', password: '123456' }).then((data) => {
                this.$message({
                    type: 'success',
                    message: JSON.stringify(data),
                })
            })
        },
    },
}

原文地址：http://book.levy.net.cn/doc/frontend/uiframe/utils_import.html