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 相关文章推荐
javascript实现日历控件(年月日关闭按钮)
Dec 12 Javascript
特殊情况下如何获取span里面的值
May 20 Javascript
深入理解JavaScript系列(38):设计模式之职责链模式详解
Mar 04 Javascript
JS组件系列之Bootstrap Icon图标选择组件
Jan 28 Javascript
AngularJS constant和value区别详解
Feb 28 Javascript
jQuery实现图片滑动效果
Mar 08 Javascript
Angular4实现鼠标悬停3d倾斜效果
Oct 25 Javascript
深入理解vue中slot与slot-scope的具体使用
Jan 26 Javascript
JavaScript实现多叉树的递归遍历和非递归遍历算法操作示例
Feb 08 Javascript
jQuery 实现倒计时天,时,分,秒功能
Jul 31 jQuery
详解es6新增数组方法简便了哪些操作
May 09 Javascript
JS前端监控采集用户行为的N种姿势
Jul 23 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
php导入导出excel实例
2013/10/25 PHP
JS异常处理try..catch语句的作用和实例
2014/05/05 PHP
支付宝支付开发――当面付条码支付和扫码支付实例
2016/11/04 PHP
浅谈PHP的排列组合(如输入a,b,c 输出他们的全部组合)
2017/03/14 PHP
详解PHP函数 strip_tags 处理字符串缺陷bug
2017/06/11 PHP
基于swoole实现多人聊天室
2018/06/14 PHP
微信公众平台开发教程④ ThinkPHP框架下微信支付功能图文详解
2019/04/10 PHP
PHP框架实现WebSocket在线聊天通讯系统
2019/11/21 PHP
JavaScript 基于原型的对象(创建、调用)
2009/10/16 Javascript
js 获取服务器控件值的代码
2010/03/05 Javascript
js使用递归解析xml
2014/12/12 Javascript
jQuery+CSS实现滑动的标签分栏切换效果
2015/12/17 Javascript
javascript实现的网站访问量统计代码
2015/12/20 Javascript
jQuery与Ajax以及序列化
2016/02/01 Javascript
jQuery实现背景弹性滚动的导航效果
2016/06/01 Javascript
AngularJS 入门教程之HTML DOM实例详解
2016/07/28 Javascript
微信小程序 action-sheet底部菜单详解
2016/10/27 Javascript
原生js实现可拖动的登录框效果
2017/01/21 Javascript
TableSort.js表格排序插件使用方法详解
2017/02/10 Javascript
js实现3D图片展示效果
2017/03/09 Javascript
vue的Virtual Dom实现snabbdom解密
2017/05/03 Javascript
redux处理异步action解决方案
2020/03/22 Javascript
js实现跳一跳小游戏
2020/07/31 Javascript
python实现Windows电脑定时关机
2018/06/20 Python
Django 实现图片上传和显示过程详解
2019/07/18 Python
浅谈django 模型类使用save()方法的好处与注意事项
2020/03/28 Python
Django静态资源部署404问题解决方案
2020/05/11 Python
keras-siamese用自己的数据集实现详解
2020/06/10 Python
编写python代码实现简单抽奖器
2020/10/20 Python
python 爬虫之selenium可视化爬虫的实现
2020/12/04 Python
七年级生物教学反思
2014/01/30 职场文书
物业管理毕业生的自我评价
2014/02/17 职场文书
争先创优心得体会
2014/09/12 职场文书
2015年度酒店客房部工作总结
2015/05/25 职场文书
Redis集群节点通信过程/原理流程分析
2022/03/18 Redis
js 实现Material UI点击涟漪效果示例
2022/09/23 Javascript