vue+element-ui JYAdmin后台管理系统模板-集成方案【项目搭建篇2】

项目搭建时间：2020-06-29

本章节：讲述基于vue/cli，

项目的基础搭建。

本主题讲述了：

1、跨域配置

2、axios请求封装

3、eslint配置

4、环境dev,test，pro（开发，测试，线上），
run自动调用对应的接口（proxy多代理配置）

vue+element-ui JYAdmin
后台管理系统模板-集成方案
从零到一的手写搭建全过程。

该项目不仅是一个持续完善、
高效简洁的后台管理系统模板，
还是一套企业级后台系统开发
集成方案，致力于打造一个

与时俱进、高效易懂、高复用、
易维护扩展的应用方案。

---

1、安装axios

cnpm i axios --save

2、axios封装，调用以及api资源管理

@/serve/axiosResquest.js(axios封装)

import axios from 'axios';

axios.interceptors.response.use(

    response => {

        return response

    },

    error => {

        if (error && error.response) {

            const ERR_CODE_LIST = { //常见错误码列表

                [400]: "请求错误",

                [401]: "登录失效或在其他地方已登录",

                [403]: "拒绝访问",

                [404]: "请求地址出错",

                [408]: "请求超时",

                [500]: "服务器内部错误",

                [501]: "服务未实现",

                [502]: "网关错误",

                [503]: "服务不可用",

                [504]: "网关超时",

                [505]: "HTTP版本不受支持"

            }

            const errMsg = ERR_CODE_LIST[error.response.status]

            alert("[" + error.response.status + "]" + errMsg || '服务器异常')

            return Promise.reject(false)

        }

    }

)

let axiosResquest = (url, config) => {

    let {

        data = {},

        isAlert = false,

        contentType = 'application/json',

        method = 'POST'

    } = { ...config }

    return new Promise((resolve) => {

        axios({

            url: url,

            method:method,

            data: data,

            header: {

                'content-type': contentType,

                'Cookie': '' // 全局变量中获取 cookie

            },

            transformRequest(data) {

                if (contentType == 'application/x-www-form-urlencoded; charset=UTF-8') {

                    let ret = ''

                    for (let it in data) {

                        ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'

                    }

                    return ret

                } else {

                    return data

                }

            }

        }).then((res) => {

            if (isAlert) {

            }

            resolve(res.data);

        }).catch(function () {

            resolve(false);

        });

    })

}

export default axiosResquest;

　　

@/api/api.js（api资源模块管理）

import axiosResquest from '@/serve/axiosResquest.js';

let host = ""

if(process.env.VUE_APP_CURENV == 'development'){

  host = '/api'

}else if(process.env.VUE_APP_CURENV == 'test'){

  host = '/test'

}else if(process.env.VUE_APP_CURENV == 'production'){

    host = '/pro'

}

export function axiosSuccessApi(data) {

    return axiosResquest(host+'/index-1.php?m=home&c=WebZuDetails&a=Details', data || {})

}

export function axiosResquestEeorApi(data) {

    return axiosResquest(host+'/index-1.php?m=home&c=WebZuDetails', data || {})

}

export function axiosSuccessApiAwait(data) {

    return axiosResquest(host+'/index-1.php?m=home&c=WebZuDetails&a=Details', data || {})

}

　　

@/pages/jsDemo/jsDemo.js（组件调用）

import { axiosSuccessApi } from '@/api/api.js'

const config = {

            data: {

                id: '102'

            },

            contentType: 'application/x-www-form-urlencoded; charset=UTF-8',

            isAlert: true,

        }

        axiosSuccessApi(config).then(res => {

            if (res) {

                if (res.status) {

                    console.log(res) 

                    config.data.id = res.status

                    axiosSuccessApi(config).then(res => {

                        if (res) {

                           console.log(res) 

                        }

                    })

                }

            }

        })

　

3、vue.config.js 代理配置

devServer: {

        //跨域

        port: 9528, // 端口号

        open: true, //配置自动启动浏览器

        proxy: {

            // 配置跨域处理 可以设置多个

            '^/api': {

                target: 'https://www.weixinyue.cn',

                changeOrigin: true,

                pathRewrite: {

                    '^/api': '' // 规定请求地址以什么作为开头

                },

                logLevel:'debug'

            },

            '^/test': {

                target: 'https://www.weixinyue.cn',

                changeOrigin: true,

                pathRewrite: {

                    '^/test': '' // 规定请求地址以什么作为开头

                },

                logLevel:'debug'

            },

            '^/pro': {

                target: 'https://www.weixinyue.cn',

                changeOrigin: true,

                pathRewrite: {

                    '^/pro': '' // 规定请求地址以什么作为开头

                },

                logLevel:'debug'

            }

        }

    }

　　

3、package.json 配置

"scripts": {

    "dev": "npm run serve",

    "serve": "vue-cli-service serve --mode development",

    "test": "vue-cli-service serve --mode test",

    "pro": "vue-cli-service serve --mode production",

    "build": "vue-cli-service build",

    "lint": "vue-cli-service lint"

  },

　　

4、.eslintrc.js 配置

module.exports = {

    root: true,

    env: {

        node: true

    },

    extends: [

        'plugin:vue/essential'

        // '@vue/standard'

    ],

    parserOptions: {

        parser: 'babel-eslint'

    },

    rules: {

        'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',

        'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',

        'space-before-function-paren': 0

        // 'eqeqeq': false,

        // 'vue/valid-template-root': false,

        // 'spaced-comment': false,

        // 'quotes': false,

        // 'eol-last': false,

        // 'key-spacing': false,

        // 'vue/valid-v-for':false,

        // 'vue/no-unused-vars':false,

        // 'vue/no-parsing-error':false

    }

}

　　

本章节总结：讲述基于vue/cli，

项目的基础搭建。

1、跨域配置

2、axios请求封装

3、eslint配置

4、环境dev,test，pro
（开发，测试，线上），
run自动调用对应的接口
（proxy多代理配置）

下章节待续，欢迎持续关注：

如需下载源代码请联系博主

（微信号：lovehua_5360）

你也可以选择留言反馈

下章节请关注个人微信公众号【微信悦】，欢迎持续关注：

备注：（使用微信客户端打开）

个人微信公众号：【微信悦】

微信公众号原文链接：http://mp.weixin.qq.com/mp/homepage?__biz=MzIyOTg4MzQyNw==&hid=15&sn=4bc799ac6079fd28d20365f92eb3cb91&scene=18#wechat_redirect