vue+element-ui JYAdmin后台管理系统模板解析


Posted in Javascript onJuly 28, 2020

项目搭建时间: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)
 
   }
 
   })
 
  }
 
  
 
  }
 
 })

2、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'
 
   
 
  }
 
 }
 
 }

vue+element-ui JYAdmin后台管理系统模板解析

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多代理配置)

到此这篇关于vue+element-ui JYAdmin后台管理系统模板解析的文章就介绍到这了,更多相关vue+element-ui JYAdmin后台管理系统模板内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
用unescape反编码得出汉字示例
Apr 24 Javascript
javascript密码强度校验代码(两种方法)
Aug 10 Javascript
实例讲解JavaScript中instanceof运算符的用法
Jun 08 Javascript
基于Bootstrap框架菜鸟入门教程(推荐)
Sep 17 Javascript
Vue 实现双向绑定的四种方法
Mar 16 Javascript
基于vue实现可搜索下拉框定制组件
Mar 26 Javascript
vue实现的网易云音乐在线播放和下载功能案例
Feb 18 Javascript
vue父组件触发事件改变子组件的值的方法实例详解
May 07 Javascript
vue控制多行文字展开收起的实现示例
Oct 11 Javascript
Vant Weapp组件踩坑:picker的初始赋值解决
Nov 12 Javascript
vue 使用微信jssdk,调用微信相册上传图片功能
Nov 13 Javascript
vue 数据操作相关总结
Dec 17 Vue.js
vue实现虚拟列表功能的代码
Jul 28 #Javascript
vue.js 解决v-model让select默认选中不生效的问题
Jul 28 #Javascript
Vue2.0 $set()的正确使用详解
Jul 28 #Javascript
JavaScript 监听组合按键思路及代码实现
Jul 28 #Javascript
JavaScript动画实例之粒子文本的实现方法详解
Jul 28 #Javascript
Vue $emit()不能触发父组件方法的原因及解决
Jul 28 #Javascript
vue 遮罩层阻止默认滚动事件操作
Jul 28 #Javascript
You might like
PHP 多维数组的排序问题 根据二维数组中某个项排序
2011/11/09 PHP
php实现parent调用父类的构造方法与被覆写的方法
2015/02/11 PHP
PHP序列化/对象注入漏洞分析
2016/04/18 PHP
PHP从二维数组得到N层分类树的实现代码
2016/10/11 PHP
Ajax+PHP实现的分类列表框功能示例
2019/02/11 PHP
php面向对象重点知识分享
2019/09/27 PHP
javascript 打印页面代码
2009/03/24 Javascript
Jquery数独游戏解析(一)-页面布局
2010/11/05 Javascript
JQuery 自定义CircleAnimation,Animate方法学习笔记
2011/07/10 Javascript
利用js实现在浏览器状态栏显示访问者在本页停留的时间
2013/12/29 Javascript
javascript设计模式之解释器模式详解
2014/06/05 Javascript
容易造成JavaScript内存泄露几个方面
2014/09/04 Javascript
JS提示:Uncaught SyntaxError:Unexpected token ) 错误的解决方法
2016/08/19 Javascript
详解AngularJS脏检查机制及$timeout的妙用
2017/06/19 Javascript
解决echarts图表使用v-show控制图表显示不全的问题
2020/07/19 Javascript
js实现搜索提示框效果
2020/09/05 Javascript
pyqt4教程之实现半透明的天气预报界面示例
2014/03/02 Python
python网络编程之文件下载实例分析
2015/05/20 Python
详解Django中Request对象的相关用法
2015/07/17 Python
Python中的条件判断语句基础学习教程
2016/02/07 Python
结合Python的SimpleHTTPServer源码来解析socket通信
2016/06/27 Python
python2.7+selenium2实现淘宝滑块自动认证功能
2018/02/24 Python
Python实现模拟浏览器请求及会话保持操作示例
2018/07/30 Python
python调用其他文件函数或类的示例
2019/07/16 Python
Python 去除字符串中指定字符串
2020/03/05 Python
详解pandas.DataFrame.plot() 画图函数
2020/06/14 Python
python爬取豆瓣电影排行榜(requests)的示例代码
2021/02/18 Python
澳大利亚最大的女装零售商:Millers
2017/09/10 全球购物
美国娱乐和流行文化商品店:FYE
2017/09/14 全球购物
Coltorti Boutique官网:来自意大利的设计师品牌买手店
2018/11/09 全球购物
公司成立感言
2014/01/11 职场文书
法律七进实施方案
2014/03/15 职场文书
加强机关作风建设心得体会
2014/10/22 职场文书
导游词格式
2015/02/13 职场文书
2015毕业寄语大全
2015/02/26 职场文书
2015年检察院个人工作总结
2015/05/20 职场文书