系统城装机大师 - 固镇县祥瑞电脑科技销售部宣传站!

当前位置:首页 > 脚本中心 > 其它 > 详细页面

Vue管理系统前端系列二相关工具引入及封装

时间:2020-08-20来源:www.pcxitongcheng.com作者:电脑系统城

sass-loader/vuex 等的引入说明

tips:vue-cli 4.x脚手架封装度更高,配置起来简单许多,旨在让用户把精力都放在编写业务代码中

vue-cli 4.x在创建时已经选择了相应依赖,因此项目创建好后,基本的依赖都有。不需要重复安装。

引入 element

vue-cli 4.x 引入 element 可谓是相当的方便,只需要执行下方语句,即可引入element

vue add element

有两个选项,根据需求选择,

  • How do you want to import Element? Import on demand #这里选择的是按需引入。只引入需要的组件,以达到减小项目体积的目的。
  • Choose the locale you want to load zh-CN # 选择加载环境,这里选择的是中文

需要使用什么组件,在plugins下的 element.js 中添加对应的组件。以减小项目体积。

TIPS:此种方式会自动引入样式

引入 axios

更多关于axios的信息,请看我另一篇文章,传送门

axios 是一个基于 Promise 用于浏览器和 nodejs 的 HTTP 客户端,项目与后端的请求交互需要使用到 axios,执行以下命令,安装 axios 依赖。

npm i axios

1.基本使用

安装完成后,可以直接在界面上引入 axios 然后使用 axios.get 就能直接发起 get 请求。

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/'

需要特别注意的是 .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 中将所有的 接口都挂在到原型链上,也可以界面引入需要的接口

  1. 需要使用原型链方式的,代码如下:
# 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),
            })
        })
    },
},
  1. 单个界面引入需要的接口
# 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),
                })
            })
        },
    },
}
分享到:

相关信息

  • Go json反序列化“null“的问题解决

    有这么一段代码,可以先看一下有没有什么问题,作用是输入一段json字符串,反序列化成map,然后将另一个inputMap的内容,merge进这个map 1 2 3 4 5 6 7 8 9 10 11 12 13 14...

    2023-03-15

  • Golang 字符串转time类型实现

    由于数据库的类型为Data 类型,所以插入数据库的时候我先把前端传入的string类型的时间转为Time 再插入。 Go 提供了两种插入的方式,即time.Parse 和 time.ParseInLocation 。两种方式,他们的差异比较大。...

    2023-03-09

系统教程栏目

栏目热门教程

人气教程排行

站长推荐

热门系统下载