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

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

  }

 }

 }

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后台管理系统模板内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • 使用vue.js2.0 + ElementUI开发后台管理系统详细教程(一)

    1. 根据官方指引,构建项目框架 # 安装vue $ cnpm install vue@2.1.6 # 全局安装 vue-cli $ cnpm install --global vue-cli # 创建一个基于 webpack 模板的新项目my-project $ vue init webpack my-project # 进入项目目录 $ cd my-project # 安装依赖,走你 $ cnpm install # 运行项目 $ cnpm run dev 2. 运行项目之后,会看到以下界面

  • 使用vue.js2.0 + ElementUI开发后台管理系统详细教程(二)

    在上篇文章给大家介绍了使用vue.js2.0 + ElementUI开发后台管理系统详细教程(一) 1. 引入路由工具vue-router,切换视图 # 安装vue-router cnpm install vue-router --save-dev 2. 使用vue-router main.js import Vue from 'vue' import App from './App' import VueRouter from 'vue-router' import routeConfig f

  • vue中如何实现后台管理系统的权限控制的方法步骤

    一.前言 在广告机项目中,角色的权限管理是卡了挺久的一个难点.首先我们确定的权限控制分为两大部分,其中根据粒的大小分的更细: 接口访问的权限控制 页面的权限控制 菜单中的页面是否能被访问 页面中的按钮(增.删.改)的权限控制是否显示 下面我们就看一看是如何实现这些个权限控制的. 二.接口访问的权限控制 接口权限就是对用户的校验.正常来说,在用户登录时服务器需要给前台返回一个Token,然后在以后前台每次调用接口时都需要带上这个Token, 然后服务端获取到这个Token后进行比对,如果通过则可以

  • 详解Vue后台管理系统开发日常总结(组件PageHeader)

    在后台管理系统的日常开发过程中发现对于同一个业务下面的版块不同的开发同事每次都会重复写页面标题的样式,而且不同的页面标题还不太一样.虽然有的页面标题栏承载的元素不一样,但是也有通用的部分,经过多个项目的迭代慢慢地总结与积累完善出了一个通用的页面标题组件<PageHeader/>. 下面是一个最常见的标题设计原型: 下面是同事给出的封装方案: 使用方式 <router-back class="router-back" text="详情" />

  • vue+express 构建后台管理系统的示例代码

    一个vue+express 构建的后台管理系统 说明: vue+express 构建的后台管理系统,包括登录.注册.表格的增删改查 github 在线 搭建vue项目: 1.安装vue-cli脚手架 npm install -g vue-cli 2.创建基于webpack模版的项目 vue init webpack my-express 3.安装包依赖并运行 cd my-express npm install npm run dev vue项目基于iview-admin改造的 通过应用生成器工具

  • 浅谈vue后台管理系统权限控制思考与实践

    前言 最近在开发管理系统时遇到了任何管理系统都会有的需求---权限控制,之前也遇到过这种需求,但是架构不完善导致的各种问题使得后期维护非常麻烦,这一次的方案解决了之前的种种问题,现做一次记录,当然这个架构后期可能会有坑,不过得一步一步的尝试才能发现并解决问题. 权限控制需求 因为是单页面应用,路由交给前端来控制,对于一些需要特定权限才能查看的信息的保护变得尤为重要,如果前端不做好权限校验,后端也一时疏忽,就可能就会导致数据泄露. 对于权限控制,需求大致为如下: 对于大模块的限制,比如需要通过路由

  • vue中如何实现后台管理系统的权限控制的方法示例

    一.前言 在广告机项目中,角色的权限管理是卡了挺久的一个难点.首先我们确定的权限控制分为两大部分,其中根据粒的大小分的更细: 接口访问的权限控制 页面的权限控制 菜单中的页面是否能被访问 页面中的按钮(增.删.改)的权限控制是否显示 权限控制是什么 在权限的世界里服务端提供的一切都是资源,资源可以由请求方法+请求地址来描述,权限是对特定资源的访问许可,所谓权限控制,也就是确保用户只能访问到被分配的资源.具体的说,前端对资源的访问通常是由界面上的按钮发起,比如删除某条数据:或由用户进入某一个页面发

  • 详解使用VUE搭建后台管理系统(vue-cli更新至3.0)

    最近还没来得及更新文章,就发现vue-cli已经更新到3.0版本了. //想了想还是用升级吧,反正最终都逃不掉,不如在这个项目上实验一下3.0的威力(并不会). 升级vue-cli npm install -g vue@cli vue -V 使用图形化界面创建项目 这里需要到自定义目录下,方便以后的项目管理:执行命令后,会打开一个localhost:8080的窗口,是vue项目的图形化管理界面 cd targetFolder vue ui 创建新项目 这里不一一介绍了,随便截了两张图看看 这里配

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

    项目搭建时间:2020-06-29 本章节:讲述基于vue/cli,项目的基础搭建. 本主题讲述了: 1.跨域配置 2.axios请求封装 3.eslint配置 4.环境dev,test,pro(开发,测试,线上),run自动调用对应的接口(proxy多代理配置) vue+element-ui JYAdmin后台管理系统模板-集成方案从零到一的手写搭建全过程. 该项目不仅是一个持续完善.高效简洁的后台管理系统模板,还是一套企业级后台系统开发集成方案,致力于打造一个与时俱进.高效易懂.高复用.易维

  • Vue+Element ui 根据后台返回数据设置动态表头操作

    由于后端是多人开发,也没有规范数据格式,所有页面是我一个人开发,所以就会遇到同样的页面不同的返回数据格式问题. 一.根据element文档,利用prop属性绑定对应值,label绑定表头. html <el-table class="tb-edit" highlight-current-row :data="tableData" border style="width: 100%"> <template v-for="

  • Vue + Element UI 实现权限管理系统之菜单功能实现代码

    目录 菜单功能实现 菜单接口封装 菜单管理界面 测试效果 源码下载 菜单功能实现 菜单接口封装 菜单管理是一个对菜单树结构的增删改查操作. 提供一个菜单查询接口,查询整颗菜单树形结构. http/modules/menu.js 添加findMenuTree 接口. import axios from '../axios' /* * 菜单管理模块 */ // 保存 export const save = (data) => { return axios({ url: '/menu/save', m

  • Vue+Element UI+vue-quill-editor富文本编辑器及插入图片自定义

    本文为大家分享了Vue+Element UI+vue-quill-editor富文本编辑器及插入图片自定义,供大家参考,具体内容如下 1.安装 npm install vue-quill-editor --save 2.在main.js中引入 import VueQuillEditor from 'vue-quill-editor' import 'quill/dist/quill.core.css' import 'quill/dist/quill.snow.css' import 'quil

  • 在vue+element ui框架里实现lodash的debounce防抖

    事情起因在:我使用element ui框架里的远程搜索框,在单选时,组件内部已经做了防抖,query是在一段时间内的字符串.但是在多选时,并没有做防抖,而是每输入一个字符都要向后台发一次请求,所以必须防抖,官方推荐使用lodash的debounce 在解决这个问题时,我遇到的坎儿主要有以下: 我首先在项目里用npm安装lodash,先全局安装,然后安装到项目 npm install -g lodash npm install --save lodash 安装后,我就在我要用防抖的组件里,引入lo

  • 解决vue+ element ui 表单验证有值但验证失败问题

    一.如图:有值但是验证失败 二. <el-form :model="form" :rules="rules"> <el-form-item label="数据模板" prop="template" > <el-col :span="20"> <el-input type="textarea" v-model="form.template

  • Vue+Element UI 树形控件整合下拉功能菜单(tree + dropdown +input)

    这篇博客主要介绍树形控件的两个小小的功能: 下拉菜单 输入过滤框 以CSS样式为主,也会涉及到Vue组件和element组件的使用. 对于没有层级的数据,我们可以使用表格或卡片来展示.要展示或建立层级关系,就一定会用到树形组件了. 使用Vue + Element UI,构建出最基本的树如下图所示: 现在我们就要在这个基础上进行改造,使页面更加符合我们的交互场景. 下拉菜单 将下拉菜单嵌到树节点中,使操作更加简便.紧凑. 效果演示 效果如图: 图示1:悬浮在树节点状态 图示2:点击三个点图标状态

  • vue element ui validate 主动触发错误提示操作

    elementUI使用了async-validator进行表单验证,但是当我使用下拉树(el-cascader)时,发现其不主动触发,于是我只能主动去触发,方法如下: this.$refs['form'].fields[0].validateMessage = 'error message' this.$refs['form'].fields[0].validateState = 'error' 补充知识:element-ui 打开页面触发校验问题 如果你设置了关闭弹出页就resetFields

  • Vue Element UI自定义描述列表组件

    本文实例为大家分享了Vue Element UI自定义描述列表组件的具体代码,供大家参考,具体内容如下 效果图 写在前面 写后台管理经常从列表点击查看详情,展示数据信息,Element UI虽然有表格组件,但是描述组件并没有,之前团队的成员遇到这种情况都自己去写样式,写起来也麻烦,而且每个人写出来的样式也不统一,破坏了项目的整体风格. 像是Ant Design UI就有描述组件,用起来特别舒服,所以索性自己结合Element UI的el-row和el-col自己写了一个. 实现哪些功能 1.每行

  • vue+Element ui实现照片墙效果

    本文实例为大家分享了vue+Element ui实现照片墙效果的具体代码,供大家参考,具体内容如下 上面是我要实现的效果.直接上代码,简洁明了 1.前端视图代码 <div>   <el-upload     :file-list="fileList"     :headers="upload.headers"     :action="upload.url"     list-type="picture-card&qu

随机推荐