分类：element

2021
07-01

Vue Element前端应用开发之组织机构和角色管理

目录1、组织机构管理模块界面2、角色管理界面3、界面模块化的处理1、组织机构管理模块界面组织机构管理模块界面如下所示，包括组织机构的成员管理和角色管理，在ABP基础领域里面，组织机构可以包含0到多个成员，也可以包含0到多个角色，因此界面设计如下所示。在对象UML的图例中，应该是如下所示的效果图，组织机构包含组织成员和角色的内容。在界面上，组织成员还需要添加成员的功能，同理角色也需要添加角色的处理，如下UML图示... 继续阅读 >
2021
07-01

js如何构造elementUI树状菜单的数据结构详解

背景说明elementUI中自带树状菜单，就是数据结构有点复杂，偏向json风格。数据库中菜单数据是二维表格，通过parentPk定义上下级，是list型。需要把list转换成tree的结构。elementUI树状菜单的数据结构每个节点有4个属性，id、label、newVal、children数组；通过children数组包含关系标示上下级。vartreeData={id:1,label:'一级1',newVal:"",children:[{id:4,label:'... 继续阅读 >
2021
07-01

Vue Element前端应用开发之用户管理模块的处理

目录1、权限管理模块的设计2、用户管理界面功能1、权限管理模块的设计我们知道，权限管理一般都会涉及到用户、组织机构、角色，以及权限功能等方面的内容，ABP框架的基础内容也是涉及到这几方面的内容，其中它们之间的关系基本上是多对多的关系，它们的关系如下所示。权限模块里面包含的一些主对象表和中间表，中间表主要用来存储两个对象之间的多对多关系，如角色包含多个用户，用户属于多个机构，机构包含多个角色等等。结合ABP... 继续阅读 >
2021
07-01

Vue Element前端应用开发之根据ABP后端接口实现前端展示

目录概述1、ABP接口和前端对接处理2、ABP接口信息和前端界面处理概述ABP（ASP.NETBoilerplate）框架主要是基于.netcore进行的后端WebAPI的开发，结合Swagger的管理界面我们可以看到发布的API的接口明细信息，这样前端技术人员可以很容易整合前端的API应用。Vue+Element的前端应用，是目前较为流行的前端技术整合，Vue提供了前端框架很好的支持，Element提供了非常不错的界面组件封装和处理，通过ABP后端API接口和前端Vue+E... 继续阅读 >
2021
07-01

Vue Element前端应用开发之前端API接口的封装

目录1、ABP框架API接口的回顾2、基于ES6的JS业务类的封装1、ABP框架API接口的回顾ABP是ASP.NETBoilerplate的简称，ABP是一个开源且文档友好的应用程序框架。ABP不仅仅是一个框架，它还提供了一个最?菏导?幕?诹煊蚯??杓?DDD)的体系结构模型。启动Host的项目，我们可以看到Swagger的管理界面如下所示。上图就是ABP后端框架的API接口的查看页面，从上图可以看到，一般业务对象，都有Get、GetAll、Create、Update、Delete等常见接口，... 继续阅读 >
2021
07-01

Vue Element前端应用开发之整合ABP框架的前端登录

目录概述1、ABP开发框架的回顾2、Vue+Element整合ABP框架的前端登录处理概述ABP框架作为后端，是一个非常不错的技术方向，但是前端再使用Asp.NET进行开发的话，虽然会快捷一点，不过可能显得有点累赘了，因此BS的前端选项采用Vue+Element来做管理（后续可能会视情况加入Vue+AntDesign），CS前端我已经完成了使用Winform+ABP的模式了。本篇随笔主要介绍Vue+Element+ABP的整合方式，先从登录开始介绍。1、ABP开发框架的回顾ABP是ASP... 继续阅读 >
2021
07-01

Vue Element前端应用开发之图标的维护和使用

目录概述1、Vue-Awesome的使用介绍2、导入Element图标和Vue-Awesome图标概述Vue-Awesome是基于Vue.js的SVG图标组件，内置图标来自FontAwesome。本篇随笔先来上一个图标管理的界面效果，然后在逐一进行介绍Element内置图标和Vue-Awesome的图标吧。Element图标管理界面如下：基于Vue-Awesome的图标管理如下所示。其中查询提供了名称进行图标查询，以及限制一次性展示多少个，另外提供一个自定义颜色选项，从而可以改变图标的... 继续阅读 >
2021
07-01

Vue Element前端应用开发之echarts图表

目录概述1、图表组件的安装使用2、各种图表的展示处理概述基于图表的处理，我们一般往往都是利用对应第三方的图表组件，然后在这个基础上为它的数据模型提供符合要求的图表数据即可，VUE+Element前端应用也不例外，我们这里使用了基于vue-echarts组件模块来处理各种图表vue-echarts是对echarts图表组件的封装。1、图表组件的安装使用首先使用npm安装vue-echarts组件。git地址：https://github.com/ecomfe/vue-echartsNPM安装命令... 继续阅读 >
2021
07-01

Vue Element前端应用开发之界面语言国际化

目录概述1、main入口函数支持2、界面处理实现概述VUE+Element前端应用实现国际化的处理还是非常方便的，一般在Main.js函数里面引入语言文件，然后在界面上进行一定的处理，把对应的键值转换为对应语言的语义即可。本篇随笔介绍在VUE+Element前端应用中如何实现在界面快速的支持多语言国际化的处理逻辑代码。1、main入口函数支持Element组件内部默认使用中文，若希望使用其他语言，则需要进行多语言设置。以英文为例，在main.js... 继续阅读 >
2021
07-01

Vue Element前端应用开发之树列表组件

目录1、常规树列表控件的使用2、下拉框树列表的处理1、常规树列表控件的使用众所周知，一般界面很多情况涉及到树列表的处理，如类型展示，如果是一层的，可以用下拉列表代替，如果是多个层级的，采用树控件展示会更加直观。在Element里面也有一个el-tree的控件，如下所示，这里主要对它的各种属性和方法进行介绍。简单的代码如下所示<el-tree:data="data"@node-click="handleNodeClick"></el-tree>主要在script部分里面指定它的... 继续阅读 >
2021
06-29

Vue Element前端应用开发之常规的JS处理函数

目录1、常规集合的filter、map、reduce处理方法2、递归处理3、forEach遍历集合处理4、Object.assign赋值方法5、slice()方法1、常规集合的filter、map、reduce处理方法filter函数的主要用途是对数组元素进行过滤，并返回一个符合条件的元素的数组constnums=[10,20,30,111,222,333]letnewNums=nums.filter(function(n){returnn<100})输出：[10,20,30]map函数是对数组每个元素的映射操作，并返回一个新数组，原数组不会改变... 继续阅读 >
2021
06-29

Vue Element前端应用开发之常规Element界面组件

目录1、列表界面和其他模块展示处理2、常规界面组件的使用1）表单和表单项、单文本框2）下拉列表控件的绑定3）图片展示4）第三方扩展控件3、自定义组件的创建使用1、列表界面和其他模块展示处理常规的列表展示界面，一般分为几个区域，一个是查询区域，一个是列表展示区域，一个是底部的分页组件区域。查询区域主要针对常规条件进行布局，以及增加一些全局或者批量的操作，如导入、导出、添加、批量添加、批量删除等按钮；而其中主... 继续阅读 >
2021
06-28

Vue Element前端应用开发之表格列表展示

1、列表查询界面效果在介绍任何代码处理逻辑之前，我们先来做一个感官的认识，贴上一个效果图，在逐一介绍其中处理的步骤和注意事项。常规的列表展示界面，一般分为几个区域，一个是查询区域，一个是列表展示区域，一个是底部的分页组件区域。查询区域主要针对常规条件进行布局，以及增加一些全局或者批量的操作，如导入、导出、添加、批量添加、批量删除等按钮；而其中主体的列表展示区域，是相对比较复杂一点的地方，需要对各项... 继续阅读 >
2021
06-23

Vue Element前端应用开发之获取后端数据

概述在前面随笔《循序渐进VUE+Element前端应用开发之动态菜单和路由的关联处理》中介绍了在Vue+Element整合框架中，实现了动态菜单和动态路由的处理，从而可以根据用户角色对应的菜单实现本地路由的过滤和绑定，菜单顺利弄好了，就需要进一步开发页面功能了，本篇随笔介绍一个案例，通过获取后端数据后，进行产品信息页面的处理。1、后端数据的获取处理前后端的边界则非常清晰，前端可以在通过网络获取对应的JSON就可以构建前端... 继续阅读 >
2021
06-23

Vue Element前端应用开发之动态菜单和路由的关联处理

概述在我开发的很多系统里面，包括Winform混合框架、Bootstrap开发框架等系列产品中，我都倾向于动态配置菜单，并管理对应角色的菜单权限和页面权限，实现系统对用户权限的控制，菜单一般包括有名称、图标、顺序、URL连接等相关信息，对于VUE+Element前端应用来说，应该原理上差不多，本篇随笔介绍结合服务端的动态菜单配置和本地路由的关联处理，实现动态菜单的维护和展示的处理。1、菜单和路由的处理过程由于Vue前端还需要引入... 继续阅读 >
2021
06-23

Vue Element前端应用开发之Vuex中的API Store View的使用

概述在我们开发Vue应用的时候，很多时候需要记录一些变量的内容，这些可以用来做界面状态的承载，也可以作为页面间交换数据的处理，处理这些内容可以归为Vuex的状态控制。例如我们往往前端需要访问后端数据，一般是通过封装的WebAPI调用获取数据，而使用Store模式来处理相关的数据或者状态的变化，而视图View主要就是界面的展示处理。本篇随笔主要介绍如何整合这三者之间的关系，实现数据的获取、处理、展示等逻辑操作。Vuex是一... 继续阅读 >