vue+element-ui JYAdmin后臺管理系統(tǒng)模板解析

更新時間：2020年07月28日 11:00:47 作者：zhangxiaobin

這篇文章主要介紹了vue+element-ui JYAdmin后臺管理系統(tǒng)模板解析，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

項目搭建時間：2020-06-29

本章節(jié)：講述基于vue/cli，項目的基礎(chǔ)搭建。

本主題講述了：

1、跨域配置

2、axios請求封裝

3、eslint配置

4、環(huán)境dev,test，pro（開發(fā)，測試，線上），run自動調(diào)用對應的接口（proxy多代理配置）

vue+element-ui JYAdmin后臺管理系統(tǒng)模板-集成方案從零到一的手寫搭建全過程。

該項目不僅是一個持續(xù)完善、高效簡潔的后臺管理系統(tǒng)模板，還是一套企業(yè)級后臺系統(tǒng)開發(fā)集成方案，致力于打造一個與時俱進、高效易懂、高復用、易維護擴展的應用方案。

1、安裝axios　

cnpm i axios --save

2、axios封裝，調(diào)用以及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]: "服務器內(nèi)部錯誤",
 
  [501]: "服務未實現(xiàn)",
 
  [502]: "網(wǎng)關(guān)錯誤",
 
  [503]: "服務不可用",
 
  [504]: "網(wǎng)關(guān)超時",
 
  [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（組件調(diào)用）

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)
 
   }
 
   })
 
  }
 
  
 
  }
 
 })

2、vue.config.js 代理配置

devServer: {
 
 //跨域
 
 port: 9528, // 端口號
 
 open: true, //配置自動啟動瀏覽器
 
 proxy: {
 
  // 配置跨域處理 可以設置多個
 
  '^/api': {
 
  target: 'https://www.weixinyue.cn',
 
  changeOrigin: true,
 
  pathRewrite: {
 
   '^/api': '' // 規(guī)定請求地址以什么作為開頭
 
  },
 
  logLevel:'debug'
 
   
 
  },
 
  '^/test': {
 
  target: 'https://www.weixinyue.cn',
 
  changeOrigin: true,
 
  pathRewrite: {
 
   '^/test': '' // 規(guī)定請求地址以什么作為開頭
 
  },
 
  logLevel:'debug'
 
   
 
  },
 
  '^/pro': {
 
  target: 'https://www.weixinyue.cn',
 
  changeOrigin: true,
 
  pathRewrite: {
 
   '^/pro': '' // 規(guī)定請求地址以什么作為開頭
 
  },
 
  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
 
 }
 
}

本章節(jié)總結(jié)：

講述基于vue/cli，項目的基礎(chǔ)搭建。

1、跨域配置

2、axios請求封裝

3、eslint配置

4、環(huán)境dev,test，pro（開發(fā)，測試，線上），run自動調(diào)用對應的接口（proxy多代理配置）

到此這篇關(guān)于vue+element-ui JYAdmin后臺管理系統(tǒng)模板解析的文章就介紹到這了,更多相關(guān)vue+element-ui JYAdmin后臺管理系統(tǒng)模板內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: