vue+element-ui JYAdmin後臺管理系統模板-整合方案【專案搭建篇2】
阿新 • • 發佈：2020-07-10
專案搭建時間：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