一种页面按钮的动态响应方法及系统
技术领域
本发明涉及页面组件控制领域,涉及一种页面按钮的动态响应方法及系统。
背景技术
目前,在web应用中,往往会根据业务系统的需求为不同用户分配针对前端页面的、不同的操作权限,所述的操作权限实际是指用户对于前端页面上的可操作按钮或者其他页面元素的可操作性,以此来判断该用户是否拥有操作该按钮的权限,从而控制前端页面的按钮等页面元素面向该用户时进行显示或者隐藏。
现有技术普遍采用的做法是通过JavaScript代码做逻辑的判断,动态添加页面元素的样式从而达到控制页面权限点的目的。在现有技术中,页面按钮的事件调用只能通过硬编码实现,即每个事件的回调必须显示的声明在页面元素上,回调函数和元素上调用的事件名称一一对应。
现有技术的缺点在于,控制实现过程较为复杂,需要为每个页面按钮做不同的逻辑判断,并且要在每个按钮上写明调用函数名称,对于页面较多且场景复杂的项目,重复性开发工作较多,不够便利;此外,如果页面元素仅仅是实现了简单的显示和隐藏,那么当恶意用户知道某个被隐藏的按钮背后的请求操作时,就有可能自行构建请求进行非法请求操作,从而对系统安全构成威胁。
综上可知,现有的解决方案往往存在不便于开发以及页面系统可能存在安全隐患的缺陷。因此,当前迫切地需求一种便于开发且安全可靠的页面按钮的动态响应方法,以解决页面按钮控制响应领域普遍存在的上述问题。
发明内容
针对现存的上述技术问题,本发明的目的在于提供一种页面按钮的动态响应方法及系统,该方法及系统实现了针对来自不同权限用户的访问按钮请求的动态响应,从而避免了非法请求操作的入侵,增强了页面系统的安全性。
本发明在第一方面提供了一种页面按钮的动态响应方法,该方法包括:确定访问页面的用户的用户类型;根据该用户类型,通过按钮封装方法获取按钮元素关联列表,并在新创建的页面上显示该按钮元素关联列表中的按钮元素;其中,该按钮元素关联列表中包括该按钮元素,该按钮元素与该事件对象相对应,该事件对象与该页面方法相关联;当监听到第一按钮元素的触发事件时,根据该按钮元素关联列表,调用与该第一按钮元素对应的事件回调方法以进行动态响应。
在本发明第一方面的一种可能的实现方式中,该根据该用户类型,通过按钮封装方法获取按钮元素关联列表,并在新创建的页面上显示该按钮元素关联列表中的按钮元素,具体为:根据该用户类型和该用户对应的预设访问权限,获取该用户的可访问按钮列表;遍历预设的按钮模板,根据该可访问按钮列表生成按钮元素列表;根据按钮元素列表构建与按钮元素相对应的事件对象列表;其中,该事件对象包括事件名称和事件回调方法;遍历事件对象列表,将每一个事件对象和页面方法进行关联,从而得到按钮元素关联列表;显示该按钮元素关联列表中的按钮元素。
在本发明第一方面的一种可能的实现方式中,所述监听到第一按钮元素的触发事件,具体为:通过Vue.js的混入特性在页面中混入事件监听功能,当用户触发第一按钮元素时产生触发事件,该触发事件通过Vue的事件冒泡传播到页面,从而能够监听到第一按钮元素的触发事件。
在本发明第一方面的一种可能的实现方式中,该Vue.js的混入特性具体为:通过将mounted钩子函数混入到mixin属性中来获取该按钮列表、构建该事件对象列表以及监听该第一按钮元素的触发事件。
在本发明第一方面的一种可能的实现方式中,该按钮列表中的按钮元素包括按钮名称、触发事件名称。
本发明在第二方面提供了一种页面按钮的动态响应系统,包括用户输入模块、按钮显示模块和动态响应模块;其中,该用户输入模块用于确定访问页面的用户的用户类型,对第一按钮元素的触发事件进行监听;该用户输入模块还用于向该按钮显示模块发送用户类型信息,并在监听到第一按钮元素的触发事件时向该动态响应模块发送响应指令;该按钮显示模块用于接收用户类型信息,从而根据该用户类型信息,通过按钮封装方法获取按钮元素关联列表,并在新创建的页面上显示该按钮元素关联列表中的按钮元素;其中,该按钮元素关联列表中包括该按钮元素,该按钮元素与该事件对象相对应,该事件对象与该页面方法相关联;该动态响应模块用于在接收到来自用户输入模块的响应指令时,根据该按钮元素关联列表,调用与该第一按钮元素对应的事件回调方法以进行动态响应。
在本发明第二方面的一种可能的实现方式中,所述按钮显示模块用于根据所述用户类型,通过按钮封装方法获取按钮元素关联列表,并在新创建的页面上显示所述按钮元素关联列表中的按钮元素,具体为:该按钮显示模块包括按钮列表获取单元、按钮元素列表生成单元、事件对象列表构建单元、关联单元和显示单元;其中,该按钮列表获取单元用于根据该用户类型和该用户对应的预设访问权限,获取该用户的可访问按钮列表;该按钮元素列表生成单元用于遍历预设的按钮模板,根据该可访问按钮列表生成按钮元素列表;该事件对象列表构建单元用于根据按钮元素列表构建与按钮元素相对应的事件对象列表;其中,该事件对象包括事件名称和事件回调方法;该关联单元用于遍历事件对象列表,将每一个事件对象和页面方法进行关联,从而得到按钮元素关联列表;该显示单元用于显示该按钮元素关联列表中的按钮元素。
在本发明第一方面的一种可能的实现方式中,该按钮显示模块可通过将mounted钩子函数混入到mixin属性中来获取该按钮列表、构建该事件对象列表。
在本发明第一方面的一种可能的实现方式中,该用户输入模块可通过将mounted钩子函数混入到mixin属性中来监听该第一按钮元素的触发事件。
相比于现有技术,本发明实施例具有如下有益效果:
本发明提供了一种页面按钮的动态响应方法及系统,该方法根据用户类型显示该用户类型有权限访问的按钮,并对用户的触发按钮事件进行监听和动态响应,从而避免了非法请求操作的入侵,增强了页面系统的安全性。
进一步的,本发明提供的页面按钮的动态响应方法及系统利用Vue.js的混入特性实现了按钮封装方法,从而实现对按钮的通用判断逻辑的封装,使得无需针对不同按钮的进行重复的逻辑判断,增强了开发的便利性。
附图说明
下文将结合说明书附图对本发明进行进一步的描述说明,其中:
图1示出了本发明的页面按钮的动态响应方法的一个实施例的流程图;
图2示出了采用本发明的页面按钮的动态响应方法的一个实施例的页面结构图;
图3示出了本发明的页面按钮的动态响应系统的一个实施例的结构图。
具体实施方式
下面将结合本发明实施例中的附图,对本发明实施例中的技术方案进行清楚、完整地描述,显然,所描述的实施例仅仅是本发明一部分实施例,而不是全部的实施例。基于本发明中的实施例,本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例,都属于本发明保护的范围。
本发明实施例的第一方面提供了一种页面按钮的动态响应方法,该方法包括如下步骤:
S1:确定访问页面的用户的用户类型。
S2:根据该用户类型,通过按钮封装方法获取按钮元素关联列表,并在新创建的页面上显示该按钮元素关联列表中的按钮元素。
在本步骤中,应当首先根据该用户类型和该用户对应的预设访问权限,获取该用户的可访问按钮列表;随后,遍历预设的按钮模板,根据该可访问按钮列表生成按钮元素列表;在获取到按钮元素列表后,根据按钮元素列表构建与按钮元素相对应的事件对象列表;然后,遍历事件对象列表,将每一个事件对象和页面方法进行关联,从而得到按钮元素关联列表;最后,显示该按钮元素关联列表中的按钮元素。
在上述过程中,为了保证能够在确定了用户类型的前提下获取该用户的可访问按钮列表,不同用户类型对应的访问权限以及对应的可访问按钮列表是一一对应且预设好的。按钮元素关联列表中包括按钮元素,按钮元素与事件对象相对应,事件对象与页面方法相关联,从而保证在触发按钮元素时能够动态地、正确地响应。其中,按钮元素包括按钮名称、触发事件名称;事件对象包括事件名称和事件回调方法。
在一个实施例中,可通过将mounted钩子函数混入到mixin属性中来获取该可访问按钮列表以及构建该事件对象列表。
S3:当监听到第一按钮元素的触发事件时,根据该按钮元素关联列表,调用与该第一按钮元素对应的事件回调方法以进行动态响应。
在上述步骤中,事件回调方法为以事件名称作为函数名称的事件回调函数,页面方法为以冒泡的触发事件名称和事件回调函数为输入参数的页面函数。其中,事件回调函数是预设且与事件回调方法名称一致的,该事件名称对应于该触发事件名称。当监听到第一按钮元素的触发事件时,根据该按钮元素关联列表,获取与该按钮元素相关联的事件回调函数,并将触发事件名称传入事件回调函数中,再将触发事件名称和事件回调函数作为参数传入页面函数中,从而完成针对触发事件的动态响应。
在一个实施例中,通过Vue.js的混入特性在页面中混入事件监听功能,从而使得当用户触发第一按钮元素时产生触发事件,该触发事件通过Vue的事件冒泡传播到页面,从而能够监听到第一按钮元素的触发事件。通过Vue.js的Mixin混入特性能够实现Vue组件中的可复用功能。混入的对象可以包含Vue中任意的选项,组件混入对象后,会和Vue页面实例中已有选项“合并混入”,从而为差异性功能页面提供通用功能实现。在本实施例中,正是通过该混入功能实现了按钮的封装,从而使得按钮元素的显示和调用响应方法可以是通用的。
在一个实施例中,可通过将mounted钩子函数混入到mixin属性中来实现事件监听功能,从而监听该第一按钮元素的触发事件。
本发明实施例的第二方面提供了一种页面按钮的动态响应系统1,该系统1包括用户输入模块11、按钮显示模块12和动态响应模块13。
其中,用户输入模块11用于确定访问页面的用户的用户类型,对第一按钮元素的触发事件进行监听。
在一个实施例中,该用户输入模块可通过将mounted钩子函数混入到mixin属性中来实现事件监听功能,从而监听该第一按钮元素的触发事件。
此外,该用户输入模块11还用于向该按钮显示模块发送用户类型信息,并在监听到第一按钮元素的触发事件时向该动态响应模块发送响应指令。其中,响应指令包括所监听到的第一按钮元素的触发事件名称。
在一个实施例中,通过Vue.js的混入特性在页面中混入事件监听功能,从而使得当用户触发第一按钮元素时产生触发事件,该触发事件通过Vue的事件冒泡传播到页面,从而使得该用户输入模块11能够监听到第一按钮元素的触发事件。
按钮显示模块12用于接收用户类型信息,从而根据该用户类型信息,通过按钮封装方法获取按钮元素关联列表,并在新创建的页面上显示该按钮元素关联列表中的按钮元素。其中,该按钮元素关联列表中包括该按钮元素,该按钮元素与该事件对象相对应,该事件对象与该页面方法相关联。
在一个实施例中,该按钮显示模块12包括按钮列表获取单元121、按钮元素列表生成单元122、事件对象列表构建单元123、关联单元124和显示单元125;其中,该按钮列表获取单元121用于根据该用户类型和该用户对应的预设访问权限,获取该用户的可访问按钮列表;该按钮元素列表生成单元122用于遍历预设的按钮模板,根据该可访问按钮列表生成按钮元素列表;该事件对象列表构建单元123用于根据按钮元素列表构建与按钮元素相对应的事件对象列表;其中,该事件对象包括事件名称和事件回调方法;该关联单元124用于遍历事件对象列表,将每一个事件对象和页面方法进行关联,从而得到按钮元素关联列表;该显示单元125用于显示该按钮元素关联列表中的按钮元素。其中,事件对象包括事件名称和事件回调方法,该事件名称对应于该触发事件名称,该事件回调方法对应以该事件名称为函数名称的事件回调函数;页面方法为页面函数。
在一个实施例中,该按钮显示模块可通过将mounted钩子函数混入到mixin属性中来获取该可访问按钮列表以及构建该事件对象列表。
动态响应模块13用于在接收到来自用户输入模块的响应指令时,根据该按钮元素关联列表,调用与该第一按钮元素对应的事件回调方法以进行动态响应。具体的,动态响应模块13在接收到来自用户输入模块的响应指令时,解析出该响应指令包括的第一按钮元素的触发事件名称,随后,根据按钮元素关联列表获取与该第一按钮元素的触发事件名称相对应的事件对象中的事件回调方法,将该第一按钮元素的触发事件名称作为参数传入该事件回调方法对应的事件回调函数中,再将该第一按钮元素的触发事件名称和该事件回调函数传入页面函数中,从而完成对该第一按钮元素的触发事件的动态响应。
上述根据本发明的页面按钮的动态响应方法及系统相比现有技术具有许多有益效果,至少包括但不限于如下几点:
1.页面按钮的显示与响应均为“动态”,最大程度地避免了非法请求操作的入侵,增强了页面系统的安全性。
2.Vue.js的混入特性对按钮的显示和调用响应过程进行了封装,简化了传统的、重复性高的开发过程,提升了开发人员的便利性。
以上所述的具体实施例,对本发明的目的、技术方案和有益效果进行了进一步的详细说明,应当理解,以上所述仅为本发明的具体实施例而已,并不用于限定本发明的保护范围。特别指出,对于本领域技术人员来说,凡在本发明的精神和原则之内,所做的任何修改、等同替换、改进等,均应包含在本发明的保护范围之内。