分类：VUE

2021
07-01

如何在Vue单页面中进行业务数据的上报

目录概述1.各个路由的PV上报2.用户点击行为的上报3.用户操作结果的数据上报总结概述业务数据的上报主要分为：各个路由的PV上报；用户的点击行为上报；用户操作结果（分享是否成功）的数据上报等；通用和必须上报的数据，均在上报的代码中进行固定，比如设备信息、用户信息、cookie等都需要上报的数据，在上报前处理完成，需要异步获取且数据固定的，做好存储，防止每次都要重新获取；其他额外的数据，通过对外暴露... 继续阅读 >

2021
07-01

Vue Element前端应用开发之功能点管理及权限控制

目录概述1、权限功能点管理2、VUE+Element前端权限控制概述本篇随笔介绍功能点管理及权限控制，功能点是作为一个业务对象数据进行管理，在角色范畴上进行分配，而在界面元素控制上，VUE+Element前端引入Vue自定义指令Directives进行控制。1、权限功能点管理我们在前面分析过一个权限系统的表和关系的说明，如下所示。权限功能点的管理就是对TB_Function的表的管理操作，这个表是我们定义用于系统控制的功能点。权限功能点的管理... 继续阅读 >

2021
07-01

Vue Element前端应用开发之菜单资源管理

目录1、菜单资源及管理界面介绍2、菜单和路由的结合管理1、菜单资源及管理界面介绍前面介绍过，权限管理一般都会涉及到用户、组织机构、角色，以及权限功能等方面的内容，ABP框架的基础内容也是涉及到这几方面的内容，其中它们之间的关系基本上是多对多的关系，它们的关系如下所示。加入菜单资源，以及整理它们之间的关系和表的信息，整理图示如下。结合ABP后端提供的接口，Vue前端我们要实现基础的用户、组织机构、角色、功能权限... 继续阅读 >

2021
07-01

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

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

2021
07-01

vue实现可拖拽的dialog弹框

本文主要介绍了vue实现可拖拽的dialog弹框，分享给大家，具体如下：element的dialog弹框在项目中挺常用的。但有时候嵌套的话会遮住，体验不好。拖拽形式的弹框会提高用户体验借助基于Sortable.js的Vue拖拽组件vuedraggable安装npminstallvuedraggable--save在公共组件中新建个js文件，搭配vue自定义指令来实现拖拽的效果importVuefrom'vue';//v-dialogDrag:弹窗拖拽属性Vue.directive('dialogDrag',{bind(el,bi... 继续阅读 >

2021
07-01

vue利用Moment插件格式化时间的实例代码

moment是一款多语言支持的日期处理类库，在vue中如何使用呢？首先附上官网地址：http://momentjs.cn/，毕竟查找api才是学习正途！使用npm命令安装momentnpminstallmoment--save在main.js文件里引用moment//TheVuebuildversiontoloadwiththe`import`command//(runtime-onlyorstandalone)hasbeensetinwebpack.base.confwithanalias.importVuefrom'vue'importAppfrom'./App'importrouterfrom'./ro... 继续阅读 >

2021
07-01

vue3删除过滤器的原因

目录什么是vue的过滤器why？举例分析需求描述HTML结构和data数据如下使用filter实现使用computed实现使用methods实现总结什么是vue的过滤器过滤器可以通俗理解成是一个特殊的方法，用来加工数据的比如枚举值可以使用过滤器：如1234对应成功失败进行中已退回比如价格后面跟个过滤器，将价格格式化成小数点两位比如时间格式化等详细请看官方文档why？笔者认为：原因就是vue3要精简代码，并且filter功能重复... 继续阅读 >

2021
07-01

vue开发之moment的介绍与使用

前言在日常开发中，我们常常会遇到以下几种场景：需要对日期进行非标准格式展示，如：2021年5月11日星期二下午6点42分需要对日期进行处理，如：要取前24小时的时间等在这时候用js原生的newDate()处理就有些麻烦了，因此我们找到了moment这个类库一、moment是什么？moment是一个JavaScript日期处理类库。安装moment如果之前安装过就不用再安装了。npminstallmoment--save注：以下所有时间相对于现在时间... 继续阅读 >

2021
07-01

VUE实现大转盘抽奖

目录UI初始参考各值参考图方案分析-参数配置核心思路：关于旋转位置参数配置实现逻辑组件使用抽奖效果结语UI老规矩，先看下静态UI，以便于有个图像概念初始参考各值参考图方案分析-参数配置核心思路：将指针和中奖区域划分两部分，目前常规的效果，控制中奖区域旋转，然后停在指针处，当然控制指针也可以，一套思路，dom结构也比较简单，唯一算是复杂点的就是中奖区域，但是如果你足够懒，像我一样，你可以传递一张图也可以，完全... 继续阅读 >

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... 继续阅读 >