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 相关文章推荐
jQuery获取css z-index在各种浏览器中的返回值
Sep 15 Javascript
js关闭父窗口时关闭子窗口
Apr 01 Javascript
javascript解决innerText浏览器兼容问题思路代码
May 17 Javascript
js文本框输入点回车触发确定兼容IE、FF等
Nov 19 Javascript
window.open 以post方式传递参数示例代码
Feb 27 Javascript
javascript动态创建表格及添加数据实例详解
May 13 Javascript
javascript常用的方法整理
Aug 20 Javascript
javascript实现对表格元素进行排序操作
Nov 18 Javascript
ES5学习教程之Array对象
Apr 01 Javascript
JS计算两个时间相差分钟数的方法示例
Jan 10 Javascript
微信小程序如何实现精确的日期时间选择器
Jan 21 Javascript
JavaScript检测浏览器是否支持CSS变量代码实例
Apr 03 Javascript
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
thinkPHP5框架auth权限控制类与用法示例
2018/06/12 PHP
php redis setnx分布式锁简单原理解析
2020/10/23 PHP
Javascript写了一个清除“logo1_.exe”的杀毒工具(可扫描目录)
2007/02/09 Javascript
动态创建的表格单元格中的事件实现代码
2008/12/30 Javascript
JQuery 绑定select标签的onchange事件,弹出选择的值,并实现跳转、传参
2011/01/06 Javascript
JS将数字转换成三位逗号分隔的样式(示例代码)
2014/02/19 Javascript
jquery.form.js用法之清空form的方法
2014/03/07 Javascript
js触发onchange事件的方法说明
2014/03/08 Javascript
node.js中的fs.writeFile方法使用说明
2014/12/14 Javascript
JS实现仿中关村论坛评分后弹出提示效果的方法
2015/02/23 Javascript
js实现简单锁屏功能实例
2015/05/27 Javascript
jQuery.each使用详解
2015/07/07 Javascript
跟我学习javascript的定时器
2015/11/19 Javascript
javascript实现延时显示提示框特效代码
2016/04/27 Javascript
ionic js 复选框 与普通的 HTML 复选框到底有没区别
2016/06/06 Javascript
footer定位页面底部(代码分享)
2017/03/07 Javascript
NodeJS处理Express中异步错误
2017/03/26 NodeJs
详解AngularJS1.6版本中ui-router路由中/#!/的解决方法
2017/05/22 Javascript
微信小程序配置服务器提示验证token失败的解决方法
2019/04/03 Javascript
D3.js(v3)+react 实现带坐标与比例尺的柱形图 (V3版本)
2019/05/09 Javascript
redux处理异步action解决方案
2020/03/22 Javascript
VueCli生产环境打包部署跨域失败的解决
2020/11/13 Javascript
python实现批量获取指定文件夹下的所有文件的厂商信息
2014/09/28 Python
Python常见排序操作示例【字典、列表、指定元素等】
2018/08/15 Python
python设置随机种子实例讲解
2019/09/12 Python
解决Opencv+Python cv2.imshow闪退问题
2020/04/24 Python
德国箱包网上商店:koffer24.de
2016/07/27 全球购物
汽车检测与维修应届毕业生求职信
2013/10/19 职场文书
中学生学雷锋活动心得体会
2014/03/10 职场文书
升职演讲稿范文
2014/05/23 职场文书
卫生保健工作总结2015
2015/05/18 职场文书
教师岗位说明书
2015/09/30 职场文书
2015年成本会计工作总结
2015/10/14 职场文书
CSS3 制作精美的定价表
2021/04/06 HTML / CSS
浅谈Java父子类加载顺序
2021/08/04 Java/Android
详解gantt甘特图可拖拽、编辑(vue、react都可用 highcharts)
2021/11/27 Vue.js