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