一. 前言 本篇基于有来商城youlai-mall微服务项目,搭建后台前端管理平台,技术选型希望通过本篇文章你可以,技术解决方案选择了vue-element-admin.希望通过本篇文章你可以vue-element-admin工程改造接入到自己的平台. 二. 环境搭建 1.下载vue-element-admin 下载 vue-element-admin的i18n分支版本,这样可以支持中文,地址:https://github.com/PanJiaChen/vue-element-admin/tre

1 .修改浏览器标签名称: 修改浏览器标签名称在文件:\src\settings.js   image.png 2 .修改固定头部Header和侧边栏 Logo:   image.png 1)侧边栏文件在:\src\layout\components\Sidebar\index.vue, Sidebar组件中   image.png 2)修改侧边栏Log和标题在文件:src\layout\components\Sidebar\Logo.vue   image.png 3) 控制showLogo字

在我们使用VUE+Element 处理界面的时候,往往碰到需要利用JS集合处理的各种方法,如Filter.Map.reduce等方法,也可以设计到一些对象属性赋值等常规的处理或者递归的处理方法,以前对于这些不是很在意,但往往真正使用的时候,需要了解清楚,否则很容易脑袋出现短路的情况.本篇随笔列出一些在VUE+Element 前端开发中经常碰到的JS处理场景,供参考学习. 1.常规集合的filter.map.reduce处理方法 filter函数的主要用途是对数组元素进行过滤,并返回一个符合条件的

在我们很多模块里面,都需要使用到一些诸如图片.Excel文件.PDF文件等附件的管理,一般我们倾向于把它独立为一个公用的附件管理模块,这样可以有效的统一管理附件的信息.本篇随笔介绍附件内容的管理,包括可以对图片进行预览,对其他文件实现信息的查看和下载等操作,以及后端提供对应的附件上传等处理. 1.附件管理的界面 和其他模块一样,我们可以对附件记录表里面的信息进行管理,一般情况下,我们管理的附件都是诸如图片.Excel文件.PDF文件等附件的管理. 附件表是一个综合管理这些文件的记录表,虽然附件一

在一些内部OA或者流转的文件,或者给一些客户的报价文件.合同,或者一些医院出示的给保险机构的病历资料等,有时候可能都希望快速的使用电子签章的处理方式来给文件盖上特定的印章,本篇随笔介绍基于Vue&Element的前端项目采用第三方组件 vue-drag-resize和图片转换Base64的方式实现图片印章的盖章处理. 1.图片转换为Base64处理 图片转换为Base64编码可以通过在线工具的转换方式实现图片转Base64编码,网上很多在线的处理,百度一下即可. 如:https://c.runo

新书上线 大家好,笔者的新书<Spring Boot+Spring Cloud+Vue+Element项目实战:手把手教你开发权限管理系统>已上线,此书内容充实.材质优良,乃家中必备垫桌脚垫菜盘之良器,欢迎大家无情购买使用,欢迎大家共同学习交流,欢迎大家提出改进意见. 内容简介: 本书从项目实践出发,手把手.心贴心地带领读者从零开始,一步一步地开发出功能相对完整的权限管理系统,从而深入掌握当前主流的Spring Boot + Spring Cloud + Vue前后端集成开发技术. 全书分为三

我们开发的系统,一般可以不用考虑语言国际化的问题,大多数系统一般是给本国人使用的,而且直接使用中文开发界面会更加迅速 一些,不过框架最好能够支持国际化的处理,以便在需要的时候,可以花点时间来实现多语言切换的处理,使系统具有更广泛的受众用户.VUE+Element 前端应用实现国际化的处理还是非常方便的,一般在Main.js函数里面引入语言文件,然后在界面上进行一定的处理,把对应的键值转换为对应语言的语义即可.本篇随笔介绍在VUE+Element 前端应用中如何实现在界面快速的支持多语言国际化的处

在权限管理系统中,菜单也属于权限控制的一个资源,应该直接应用于角色,和权限功能点一样,属于角色控制的一环.不同角色用户,登录系统后,出现的系统菜单是不同的.在VUE+Element 前端中,我们菜单结合路由集合,实现可访问路由的过滤,也就实现了对应角色菜单的展示和可访问路由的控制,详细可以参考随笔<循序渐进VUE+Element 前端应用开发(3)--- 动态菜单和路由的关联处理>,本篇随笔主要介绍菜单管理模块的界面和相关的实现逻辑. 1.菜单资源及管理界面介绍 前面介绍过,权限管理一般都会涉

一.我正准备使用Vue + Element进行新的项目开发,然后在进行添加下一个组件时报错  二.解决及原因: 原来template中只允许模板里存在一个根节点,在 template 中添加一个 <div>标签,之后所有的组件全部加在 <div>即可解决. 注意:<template></template>中必须要有一个根节点且只能存在一个根节点

之前一直采用VS进行各种前端后端的开发,随着项目的需要,正逐步融合纯前端的开发模式,开始主要选型为Vue + Element 进行BS前端的开发,后续会进一步整合Vue + AntDesign的界面套件,作为两种不同界面框架的展现方式.采用Vue + Element 的前端开发和之前的开发模式需要有较大的转变,以及需要接触更多的相关知识,本系列随笔基于循序渐进的学习研究方式,对使用Vue + Element 这种前端开发的各个方面进行一个完整的介绍,并结合我对BS前端已有的框架功能,进行两者的融

在我们开发Vue应用的时候,很多时候需要记录一些变量的内容,这些可以用来做界面状态的承载,也可以作为页面间交换数据的处理,处理这些内容可以归为Vuex的状态控制.例如我们往往前端需要访问后端数据,一般是通过封装的Web API调用获取数据,而使用Store模式来处理相关的数据或者状态的变化,而视图View主要就是界面的展示处理.本篇随笔主要介绍如何整合这三者之间的关系,实现数据的获取.处理.展示等逻辑操作. Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用

在我开发的很多系统里面,包括Winform混合框架.Bootstrap开发框架等系列产品中,我都倾向于动态配置菜单,并管理对应角色的菜单权限和页面权限,实现系统对用户权限的控制,菜单一般包括有名称.图标.顺序.URL连接等相关信息,对于VUE+Element 前端应用来说,应该原理上差不多,本篇随笔介绍结合服务端的动态菜单配置和本地路由的关联处理,实现动态菜单的维护和展示的处理. 1.菜单和路由的处理过程 由于Vue前端还需要引入路由这个概念,路由是我们前端可以访问到的对应路径集合,路由定义了常

在前面随笔<循序渐进VUE+Element 前端应用开发(3)--- 动态菜单和路由的关联处理>中介绍了在Vue + Element整合框架中,实现了动态菜单和动态路由的处理,从而可以根据用户角色对应的菜单实现本地路由的过滤和绑定,菜单顺利弄好了,就需要进一步开发页面功能了,本篇随笔介绍一个案例,通过获取后端数据后,进行产品信息页面的处理. 1.后端数据的获取处理 前面随笔,我们介绍过了Vue + Element的前端框架中,主要通过后端获取数据,并呈现在界面视图或者组件上的. 前后端的边界则

在我们一般开发的系统界面里面,列表页面是一个非常重要的综合展示界面,包括有条件查询.列表展示和分页处理,以及对每项列表内容可能进行的转义处理,本篇随笔介绍基于Vue +Element基础上实现表格列表页面的查询,列表展示和字段转义处理. 在前面随笔<循序渐进VUE+Element 前端应用开发(4)--- 获取后端数据及产品信息页面的处理>介绍了一个对产品列表的卡片式图片分页展示处理,其中涉及到了对于Element 组件分页控件的操作,本篇随笔继续深化这一组件的使用,结合表格展示来处理效果展示

在我们开发BS页面的时候,往往需要了解常规界面组件的使用,小到最普通的单文本输入框.多文本框.下拉列表,以及按钮.图片展示.弹出对话框.表单处理.条码二维码等等,本篇随笔基于普通表格业务的展示录入的场景介绍这些常规Element组件的使用,使得我们对如何利用Element组件有一个大概的认识. 1.列表界面和其他模块展示处理 在前面随笔<循序渐进VUE+Element 前端应用开发(5)--- 表格列表页面的查询,列表展示和字段转义处理>介绍了基于列表展示了相关数据,并在列表界面整合了增删改查

在我前面随笔<循序渐进VUE+Element 前端应用开发(6)--- 常规Element 界面组件的使用>里面曾经介绍过一些常规的界面组件的处理,主要介绍到单文本输入框.多文本框.下拉列表,以及按钮.图片展示.弹出对话框.表单处理,本篇随笔补充这一个主题,介绍树列表组件和下拉列表树组件在项目中的使用,以及一个SplitPanel的组件. 1.常规树列表控件的使用 众所周知,一般界面很多情况涉及到树列表的处理,如类型展示,如果是一层的,可以用下拉列表代替,如果是多个层级的,采用树控件展示会更加

在我们做应用系统的时候,往往都会涉及图表的展示,综合的图表展示能够给客户带来视觉的享受和数据直观体验,同时也是增强客户认同感的举措之一.基于图表的处理,我们一般往往都是利用对应第三方的图表组件,然后在这个基础上为它的数据模型提供符合要求的图表数据即可,VUE+Element 前端应用也不例外,我们这里使用了基于vue-echarts组件模块来处理各种图表vue-echarts是对echarts图表组件的封装. 1.图表组件的安装使用 首先使用npm 安装vue-echarts组件. git地址:

VUE+Element 前端是一个纯粹的前端处理,前面介绍了很多都是Vue+Element开发的基础,从本章随笔开始,就需要进入深水区了,需要结合ABP框架使用(如果不知道,请自行补习一下我的随笔:ABP框架使用),ABP框架作为后端,是一个非常不错的技术方向,但是前端再使用Asp.NET 进行开发的话,虽然会快捷一点,不过可能显得有点累赘了,因此BS的前端选项采用Vue+Element来做管理(后续可能会视情况加入Vue+AntDesign),CS前端我已经完成了使用Winform+ABP的模

在前面随笔<循序渐进VUE+Element 前端应用开发(12)--- 整合ABP框架的前端登录处理>介绍了一个系统最初接触到的前端登录处理的实现,但往往对整个系统来说,一般会有很多业务对象,而每个业务对象的API接口又有很多,不过简单来说也就是常规的增删改查,以及一些自定义的接口,通用都比较有规律性.而本身我们这个VUE+Element 前端应用就是针对ABP框架的业务对象,因此前端的业务对象接口也是比较统一的,那么可以考虑在前端中对后端API接口调用进行封装,引入ES6的方式进行前端API

在前面随笔<循序渐进VUE+Element 前端应用开发(12)--- 整合ABP框架的前端登录处理>简单的介绍了一个结合ABP后端的登陆接口实现前端系统登陆的功能,本篇随笔继续深化这一主题,着重介绍基于ABP后端接口信息,实现对前端界面的开发工作. ABP(ASP.NET Boilerplate)框架主要是基于.net core 进行的后端Web API的开发,结合Swagger的管理界面我们可以看到发布的 API 的接口明细信息,这样前端技术人员可以很容易整合前端的API应用.Vue +

在前面随笔介绍了ABP+Vue前后端的整合处理,包括介绍了ABP的后端设计,以及前端对ABP接口API的ES6的封装,通过JS的继承类处理,极大减少了重复臃肿的代码,可以简化对后端API接口的封装,而且前端使用Element组件,很好展示API获得的数据,通过在界面中展示树状列表,以及表格列表数据,可以构建一个很好的列表展示界面,而常规的界面,通过也包括了新增.编辑.查看等展示场景,一般我们通过对话框的方式进行展示处理.本篇随笔以权限管理模块中的用户管理为媒介,进行相关功能的介绍和界面设计的处理