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检测flash插件是否被禁用的方法
Jan 14 Javascript
jQuery validate验证插件使用详解
May 11 Javascript
HTML5+jQuery插件Quicksand实现超酷的星际争霸2兵种分类展示效果(附demo源码下载)
May 25 Javascript
Node.js 日志处理模块log4js
Aug 28 Javascript
Node.js用readline模块实现输入输出
Dec 16 Javascript
微信小程序之电影影评小程序制作代码
Aug 03 Javascript
javascript 中模板方法单例的实现方法
Oct 17 Javascript
深入学习js函数的隐式参数 arguments 和 this
Jun 24 Javascript
基于vue+echarts 数据可视化大屏展示的方法示例
Mar 09 Javascript
vue和小程序项目中使用iconfont的方法
May 19 Javascript
jquery实现拖拽添加元素功能
Dec 01 jQuery
JavaScript 防盗链的原理以及破解方法
Dec 29 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脚本中include文件出错解决方法
2008/11/20 PHP
PHP统计nginx访问日志中的搜索引擎抓取404链接页面路径
2014/06/30 PHP
php简单smarty入门程序实例
2015/06/11 PHP
自制PHP框架之设计模式
2017/05/07 PHP
各浏览器中querySelector和querySelectorAll的实现差异分析
2012/05/23 Javascript
js实现图片旋转的三种方法
2014/04/10 Javascript
js 求时间差的实现代码
2016/04/26 Javascript
第十篇BootStrap轮播插件使用详解
2016/06/21 Javascript
jQuery实现输入框邮箱内容自动补全与上下翻动显示效果【附demo源码下载】
2016/09/20 Javascript
jquery动态添加文本并获取值的方法
2016/10/12 Javascript
Vuex简单入门
2017/04/19 Javascript
jQuery DOM节点的遍历方法小结
2017/08/15 jQuery
详解在express站点中使用ejs模板引擎
2017/09/21 Javascript
Javascript中从学习bind到实现bind的过程
2018/01/05 Javascript
[04:47]DOTA2-潍坊风行电子俱乐部探秘
2014/08/08 DOTA
[01:11]辉夜杯战队访谈宣传片—CDEC.Y
2015/12/26 DOTA
python修改字典内key对应值的方法
2015/07/11 Python
python中pylint使用方法(pylint代码检查)
2018/04/06 Python
django框架之cookie/session的使用示例(小结)
2018/10/15 Python
Python中@property的理解和使用示例
2019/06/11 Python
pyinstaller 3.6版本通过pip安装失败的解决办法(推荐)
2020/01/18 Python
python爬虫可以爬什么
2020/06/16 Python
keras CNN卷积核可视化,热度图教程
2020/06/22 Python
国外的一些J2EE面试题一
2012/10/13 面试题
国贸专业自荐信范文
2014/03/02 职场文书
小班幼儿评语大全
2014/04/30 职场文书
大学生个人先进事迹材料范文
2014/05/03 职场文书
保护环境标语
2014/06/09 职场文书
离退休人员聘用协议书
2014/11/24 职场文书
2014年设备管理工作总结
2014/11/26 职场文书
2014年政务公开工作总结
2014/12/09 职场文书
中学生自我评价2015
2015/03/03 职场文书
送达通知书
2015/04/25 职场文书
图书馆义工感想
2015/08/07 职场文书
DBCA命令行搭建Oracle ADG的流程
2021/06/11 Oracle