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 相关文章推荐
用循环或if语句从json中取数据示例
Aug 18 Javascript
jquery实现炫酷的叠加层自动切换特效
Feb 01 Javascript
Bootstrap3 图片(响应式图片&图片形状)
Jan 04 Javascript
Angular.JS通过指令操作DOM的方法
May 10 Javascript
javaScript之split与join的区别(详解)
Nov 08 Javascript
Vue中computed与methods的区别详解
Mar 24 Javascript
vue解决一个方法同时发送多个请求的问题
Sep 25 Javascript
Vue 框架之动态绑定 css 样式实例分析
Nov 14 Javascript
js实现随机点名程序
Sep 17 Javascript
webpack常用构建优化策略小结
Nov 21 Javascript
JS面向对象编程基础篇(一) 对象和构造函数实例详解
Mar 03 Javascript
JavaScript计算出两个数的差值
Mar 19 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简洁函数小结
2011/08/12 PHP
php 字符串替换的方法
2012/01/10 PHP
php不使用copy()函数复制文件的方法
2015/03/13 PHP
php parse_str() 函数的定义和用法
2016/05/23 PHP
基于PHP实现堆排序原理及实例详解
2020/06/19 PHP
DOM下的节点属性和操作小结
2009/05/14 Javascript
jquery简单的弹出层浮动层代码
2015/04/27 Javascript
基于jQuery Bar Indicator 插件实现进度条展示效果
2015/09/30 Javascript
JS实现的简洁二级导航菜单雏形效果
2015/10/13 Javascript
jQuery遮罩层效果实例分析
2016/01/14 Javascript
Javascript设计模式之观察者模式(推荐)
2016/03/29 Javascript
jquery 标签 隔若干行加空白或者加虚线的方法
2016/12/07 Javascript
详解在Vue中使用TypeScript的一些思考(实践)
2018/07/06 Javascript
JS实现的RC4加密算法示例
2018/08/16 Javascript
Angularjs实现数组随机排序的方法
2018/10/02 Javascript
vue 开发企业微信整合案例分析
2019/12/02 Javascript
[04:48]DOTA2上海特锦赛小组赛第三日 TOP10精彩集锦
2016/02/28 DOTA
python 搭建简单的http server,可直接post文件的实例
2019/01/03 Python
Python向excel中写入数据的方法
2019/05/05 Python
Berghaus官网:户外服装和设备,防水服
2020/01/17 全球购物
妇科医生自荐信
2013/11/05 职场文书
法学毕业生自荐信
2013/11/13 职场文书
数控专业推荐信范文
2013/12/02 职场文书
老师自我鉴定范文
2013/12/25 职场文书
市场专员岗位职责
2014/02/14 职场文书
司机岗位职责说明书
2014/07/29 职场文书
八项规定对照检查材料
2014/08/31 职场文书
法律专业大学生职业生涯规划书:向目标一步步迈进
2014/09/22 职场文书
党干部专题民主生活会对照检查材料思想汇报
2014/10/06 职场文书
工作简历自我评价
2015/03/11 职场文书
2015年五四青年节演讲稿
2015/03/18 职场文书
降价通知函
2015/04/23 职场文书
助学金申请书该怎么写?
2019/07/16 职场文书
python turtle绘制多边形和跳跃和改变速度特效
2022/03/16 Python
阿里云 Windows server 2019 配置FTP
2022/04/28 Servers
PYTHON基于Pyecharts绘制常见的直角坐标系图表
2022/04/28 Python