CN110908661A - 一种界面验证vue组件的方法、装置、设备及存储介质 - Google Patents

一种界面验证vue组件的方法、装置、设备及存储介质 Download PDF

Info

Publication number
CN110908661A
CN110908661A CN201911157884.0A CN201911157884A CN110908661A CN 110908661 A CN110908661 A CN 110908661A CN 201911157884 A CN201911157884 A CN 201911157884A CN 110908661 A CN110908661 A CN 110908661A
Authority
CN
China
Prior art keywords
vue
verification
component
data
function
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Granted
Application number
CN201911157884.0A
Other languages
English (en)
Other versions
CN110908661B (zh
Inventor
朱道昌
刘新波
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Beijing Inspur Data Technology Co Ltd
Original Assignee
Beijing Inspur Data Technology Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Beijing Inspur Data Technology Co Ltd filed Critical Beijing Inspur Data Technology Co Ltd
Priority to CN201911157884.0A priority Critical patent/CN110908661B/zh
Publication of CN110908661A publication Critical patent/CN110908661A/zh
Application granted granted Critical
Publication of CN110908661B publication Critical patent/CN110908661B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/30—Creation or generation of source code
    • G06F8/38—Creation or generation of source code for implementing user interfaces

Landscapes

  • Engineering & Computer Science (AREA)
  • Software Systems (AREA)
  • General Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Human Computer Interaction (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Debugging And Monitoring (AREA)

Abstract

本发明公开了一种界面验证vue组件的方法、装置、设备以及计算机可读存储介质，包括：当接收到用户发送的验证vue组件的请求时，给所述vue组件注入指令v‑validate，通过该指令获取所述vue组件的html元素，其中，所述指令v‑validate通过vue.directive()定义；通过绑定在所述html元素上的获取数据函数，获取所述vue组件的数据信息；利用绑定在所述html元素上预先制定的vue组件验证逻辑，对所述数据信息进行验证，完成验证后展示验证结果。本发明所提供的方法、装置、设备以及计算机可读存储介质，实现了vue组件的高效率检测。

Description

一种界面验证vue组件的方法、装置、设备及存储介质
技术领域
本发明涉及前端开发技术领域，特别是涉及一种界面验证vue组件的方法、装置、设备以及计算机可读存储介质。
背景技术
随着前端开发技术的越发成熟，vue框架越来越受欢迎，因此前端开发技术越来越多采用了vue框架。但是不管什么框架都离不开界面中的验证，但是由于前端技术都是针对html中的元素进行的验证，而vue框架都是组件化的，组件化顾名思义就是一个模板这个模板生成了很多的html，从而导致如何对vue的组件进行验证成为了较为困难的问题。
综上所述可以看出，如何实vue组件的验证是目前有待解决的问题。
发明内容
本发明的目的是提供一种界面验证vue组件的方法、装置、设备以及计算机可读存储介质，以解决现有技术中无法实现vue组件的验证功能的问题。
为解决上述技术问题，本发明提供一种界面验证vue组件的方法，包括：当接收到用户发送的验证vue组件的请求时，给所述vue组件注入指令v-validate，通过所述指令v-validate获取所述vue组件的html元素，其中，所述指令v-validate通过vue.directive()定义；通过绑定在所述html元素上的获取数据函数，获取所述vue组件的数据信息；利用绑定在所述html元素上预先制定的vue组件验证逻辑，对所述数据信息进行验证，完成验证后展示验证结果。
优选地，还包括：利用所述vue组件的watch监听函数监听所述vue组件的数据信息变化。
优选地，所述述利用vue的watch监听函数监听所述vue组件的数据变化后包括：
当所述watch监听函数监听到所述vue组件的数据信息发生变化时，进入所述vue组件验证逻辑，对变化数据进行实时验证。
优选地，所述当所述watch监听函数监听到所述vue组件的数据信息发生变化时，进入所述vue组件验证逻辑，对变化数据进行实时验证后包括：
完成所述变化数据的验证后，将所述变化数据中的错误信息展示至用户。
优选地，所述通过绑定在所述html元素上的获取数据函数，获取所述vue组件的数据信息包括：
将所述method函数中获取数据的函数绑定至所述html元素，以便利用所述获取数据的函数获取所述vue组件的数据信息。
本发明还提供了一种界面验证vue组件的装置，包括：
接收模块，用于当接收到用户发送的验证vue组件的请求时，给所述vue组件注入指令v-validate，通过所述指令v-validate获取所述vue组件的html元素，其中，所述指令v-validate通过vue.directive()定义；
获取模块，用于通过绑定在所述html元素上的获取数据函数，获取所述vue组件的数据信息；
验证模块，用于利用绑定在所述html元素上预先制定的vue组件验证逻辑，对所述数据信息进行验证，完成验证后展示验证结果。
优选地，还包括：
监听模块，用于利用所述vue组件的watch监听函数监听所述vue组件的数据信息变化。
优选地，所述监听模块后包括：
实时验证模块，用于当所述watch监听函数监听到所述vue组件的数据信息发生变化时，进入所述vue组件验证逻辑，对变化数据进行实时验证。
本发明还提供了一种界面验证vue组件的设备，包括：
存储器，用于存储计算机程序；处理器，用于执行所述计算机程序时实现上述一种界面验证vue组件的方法的步骤。
本发明还提供了一种计算机可读存储介质，所述计算机可读存储介质上存储有计算机程序，所述计算机程序被处理器执行时实现上述一种界面验证vue组件的方法的步骤。
本发明所提供的界面验证vue组件的方法，在接收到用户发送的验证vue组件的请求后，给所述vue组件注入通过vue.directive()定义的指令v-validate，以便通过该指令获取所述vue组件的html元素。在所述html元素上绑定获取数据的函数与预先制定的vue组件验证逻辑，从而对获取到的所述vue组件的数据信息进行验证，并将验证结果中的错误信息展示给用户。本发明通过vue.directive()函数获取所述vue组件的html元素，再将获取数据函数与验证逻辑绑定在所述html元素上，从而实现了对所述vue组件数据的检验。本发明可以在vue框架中验证所述vue组件而不用去直接找html元素验证，从而大大提高了开发效率。
附图说明
为了更清楚的说明本发明实施例或现有技术的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单的介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。
图1为本发明所提供的界面验证vue组件的方法的第一种具体实施例的流程图；
图2为本发明所提供的界面验证vue组件的方法的第二种具体实施例的流程图；
图3为本发明实施例提供的一种界面验证vue组件的装置的结构框图。
具体实施方式
本发明的核心是提供一种界面验证vue组件的方法、装置、设备以及计算机可读存储介质，实现了vue组件的高效验证。
为了使本技术领域的人员更好地理解本发明方案，下面结合附图和具体实施方式对本发明作进一步的详细说明。显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。
请参考图1，图1为本发明所提供的界面验证vue组件的方法的第一种具体实施例的流程图；具体操作步骤如下：
步骤S101：当接收到用户发送的验证vue组件的请求时，给所述vue组件注入指令v-validate，通过所述指令v-validate获取所述vue组件的html元素，其中，所述指令v-validate通过vue.directive()定义；
步骤S102：通过绑定在所述html元素上的获取数据函数，获取所述vue组件的数据信息；
本实施例所提供的方法中，给所述vue组件注入通过vue.directive()定义的指令v-validate，通过该指令可以获得需要验证的所述vue组件中的html元素el。在定义指令中可以将el绑定验证逻辑和验证规则以及需要验证的vue组件的数据。
步骤S103：利用绑定在所述html元素上预先制定的vue组件验证逻辑，对所述数据信息进行验证，完成验证后展示验证结果。
在本实施例中，通过vue.directive()函数给vue组件注入指令，并且可以获得组件的html元素，方便给html元素绑定函数，主要是获取数据的函数，因为根据注入的指令获取到了组件的html元素和绑定的验证规则和方法，直接就走的验证逻辑，在验证逻辑中主要包括获取组件的数据走验证方法进行验证和错误信息的展示。
基于上述实施例，在本实施例中，还包括利用vue的watch监听函数监听所述vue组件的数据信息是否发生变化，若发生变化则利用绑定在所述vue组件源代码上的验证逻辑，对变化数据进行验证。
请参考图2，图2为本发明所提供的界面验证vue组件的方法的第二种具体实施例的流程图；具体操作步骤如下：
步骤S201：当接收到用户发送的验证vue组件的请求时，给所述vue组件注入指令v-validate，通过所述指令v-validate获取所述vue组件的html元素，其中，所述指令v-validate通过vue.directive()定义；
步骤S202：将method函数中获取数据的函数绑定至所述html元素，以便利用所述获取数据的函数获取所述vue组件的数据信息；
步骤S203：利用绑定在所述html元素上预先制定的vue组件验证逻辑，对所述数据信息进行验证，完成验证后展示验证结果；
步骤S204：利用所述vue组件的watch监听函数监听所述vue组件的数据信息变化；
步骤S205：当所述watch监听函数监听到所述vue组件的数据信息发生变化时，进入所述vue组件验证逻辑，对变化数据进行实时验证；
通过所述vue组件中的watch监听vue组件的data只要data变化就走验证逻辑进行组件的验证。
在所述vue组件的源代码中引入验证逻辑，在验证组件的过程中我们也需要进行实时的验证，尤其是组件数据变化的时候我们就需要知道数据是不是符合规则，在组件的源码中就需要走验证逻辑，因此需要将验证逻辑引入到组件源码当中。
在需要验证的所述vue组件中导入所写的验证逻辑，同时利用所述vue组件中的watch方法可以实时监听所需验证组件的数据变化。在watch函数里面监听数据，当数据变化时，进行预先导入的验证逻辑，从而实现了对实时变化数据进行验证的功能。
步骤S206：完成所述变化数据的验证后，将所述变化数据中的错误信息展示至用户。
本实施例所提供的方法，采用vue中的api：vue.directive()生成一个vue指令，在vue实例上面绑入验证方法和验证规则。然后将接受到的vue实例中的元素进行抽取进行获取组件的值并且可以进行验证。其次，是验证vue组件时机的问题，因为每个组件都会有自己的method函数，并且也会自己的data。Method当中含有获取data的函数。在每个组件的定义代码中引入验证的逻辑，并且利用vue的watch监听方法监听data的变化，只要data变化就进行验证逻辑。综上，本实施例实现了vue组件的实时验证与监听功能，解决了如何高效验证vue组件的问题。本实施例能更加方便的在vue框架中验证vue组件而不用去直接找html元素验证，从而大大提高了开发效率，此方法可能针对任何组件进行验证。
请参考图3，图3为本发明实施例提供的一种界面验证vue组件的装置的结构框图；具体装置可以包括：
接收模块100，用于当接收到用户发送的验证vue组件的请求时，给所述vue组件注入指令v-validate，通过所述指令v-validate获取所述vue组件的html元素，其中，所述指令v-validate通过vue.directive()定义；
获取模块200，用于通过绑定在所述html元素上的获取数据函数，获取所述vue组件的数据信息；
验证模块300，用于利用绑定在所述html元素上预先制定的vue组件验证逻辑，对所述数据信息进行验证，完成验证后展示验证结果。
本实施例的界面验证vue组件的装置用于实现前述的界面验证vue组件的方法，因此界面验证vue组件的装置中的具体实施方式可见前文中的界面验证vue组件的方法的实施例部分，例如，接收模块100，获取模块200，验证模块300，分别用于实现上述界面验证vue组件的方法中步骤S101，S102和S103，所以，其具体实施方式可以参照相应的各个部分实施例的描述，在此不再赘述。
本发明具体实施例还提供了一种界面验证vue组件的设备，包括：存储器，用于存储计算机程序；处理器，用于执行所述计算机程序时实现上述一种界面验证vue组件的方法的步骤。
本发明具体实施例还提供了一种计算机可读存储介质，所述计算机可读存储介质上存储有计算机程序，所述计算机程序被处理器执行时实现上述一种界面验证vue组件的方法的步骤。
本说明书中各个实施例采用递进的方式描述，每个实施例重点说明的都是与其它实施例的不同之处，各个实施例之间相同或相似部分互相参见即可。对于实施例公开的装置而言，由于其与实施例公开的方法相对应，所以描述的比较简单，相关之处参见方法部分说明即可。
专业人员还可以进一步意识到，结合本文中所公开的实施例描述的各示例的单元及算法步骤，能够以电子硬件、计算机软件或者二者的结合来实现，为了清楚地说明硬件和软件的可互换性，在上述说明中已经按照功能一般性地描述了各示例的组成及步骤。这些功能究竟以硬件还是软件方式来执行，取决于技术方案的特定应用和设计约束条件。专业技术人员可以对每个特定的应用来使用不同方法来实现所描述的功能，但是这种实现不应认为超出本发明的范围。
结合本文中所公开的实施例描述的方法或算法的步骤可以直接用硬件、处理器执行的软件模块，或者二者的结合来实施。软件模块可以置于随机存储器(RAM)、内存、只读存储器(ROM)、电可编程ROM、电可擦除可编程ROM、寄存器、硬盘、可移动磁盘、CD-ROM、或技术领域内所公知的任意其它形式的存储介质中。
以上对本发明所提供的界面验证vue组件的方法、装置、设备以及计算机可读存储介质进行了详细介绍。本文中应用了具体个例对本发明的原理及实施方式进行了阐述，以上实施例的说明只是用于帮助理解本发明的方法及其核心思想。应当指出，对于本技术领域的普通技术人员来说，在不脱离本发明原理的前提下，还可以对本发明进行若干改进和修饰，这些改进和修饰也落入本发明权利要求的保护范围内。

Claims (10)

1.一种界面验证vue组件的方法，其特征在于，包括：
当接收到用户发送的验证vue组件的请求时，给所述vue组件注入指令v-validate，通过所述指令v-validate获取所述vue组件的html元素，其中，所述指令v-validate通过vue.directive()定义；
通过绑定在所述html元素上的获取数据函数，获取所述vue组件的数据信息；
利用绑定在所述html元素上预先制定的vue组件验证逻辑，对所述数据信息进行验证，完成验证后展示验证结果。
2.如权利要求1所述的方法，其特征在于，还包括：
利用所述vue组件的watch监听函数监听所述vue组件的数据信息变化。
3.如权利要求2所述的方法，其特征在于，所述利用vue的watch监听函数监听所述vue组件的数据变化后包括：
当所述watch监听函数监听到所述vue组件的数据信息发生变化时，进入所述vue组件验证逻辑对变化数据进行实时验证。
4.如权利要求3所述的方法，其特征在于，所述当所述watch监听函数监听到所述vue组件的数据信息发生变化时，进入所述vue组件验证逻辑对变化数据进行实时验证后包括：
完成所述变化数据的验证后，将所述变化数据中的错误信息展示至用户。
5.如权利要求1所述的方法，其特征在于，所述通过绑定在所述html元素上的获取数据函数，获取所述vue组件的数据信息包括：
将所述method函数中获取数据的函数绑定至所述html元素，以便利用所述获取数据的函数获取所述vue组件的数据信息。
6.一种界面验证vue组件的装置，其特征在于，包括：
接收模块，用于当接收到用户发送的验证vue组件的请求时，给所述vue组件注入指令v-validate，通过所述指令v-validate获取所述vue组件的html元素，其中，所述指令v-validate通过vue.directive()定义；
获取模块，用于通过绑定在所述html元素上的获取数据函数，获取所述vue组件的数据信息；
验证模块，用于利用绑定在所述html元素上预先制定的vue组件验证逻辑，对所述数据信息进行验证，完成验证后展示验证结果。
7.如权利要求1所述的装置，其特征在于，还包括：
监听模块，用于利用所述vue组件的watch监听函数监听所述vue组件的数据信息变化。
8.如权利要求7所述的装置，其特征在于，所述监听模块后包括：
实时验证模块，用于当所述watch监听函数监听到所述vue组件的数据信息发生变化时，进入所述vue组件验证逻辑，对变化数据进行实时验证。
9.一种界面验证vue组件的设备，其特征在于，包括：
存储器，用于存储计算机程序；
处理器，用于执行所述计算机程序时实现如权利要求1至5任一项所述一种界面验证vue组件的方法的步骤。
10.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质上存储有计算机程序，所述计算机程序被处理器执行时实现如权利要求1至5任一项所述一种界面验证vue组件的方法的步骤。
CN201911157884.0A 2019-11-22 2019-11-22 一种界面验证vue组件的方法、装置、设备及存储介质 Active CN110908661B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201911157884.0A CN110908661B (zh) 2019-11-22 2019-11-22 一种界面验证vue组件的方法、装置、设备及存储介质

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201911157884.0A CN110908661B (zh) 2019-11-22 2019-11-22 一种界面验证vue组件的方法、装置、设备及存储介质

Publications (2)

Publication Number Publication Date
CN110908661A true CN110908661A (zh) 2020-03-24
CN110908661B CN110908661B (zh) 2022-03-22

Family

ID=69818940

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201911157884.0A Active CN110908661B (zh) 2019-11-22 2019-11-22 一种界面验证vue组件的方法、装置、设备及存储介质

Country Status (1)

Country Link
CN (1) CN110908661B (zh)

Citations (7)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20060130048A1 (en) * 2004-12-13 2006-06-15 Ebay Inc. Shared schema for software user interface designers and developers
US7941299B1 (en) * 2008-01-08 2011-05-10 The Mathworks, Inc. Verification and validation system for a graphical model
WO2015196973A1 (en) * 2014-06-25 2015-12-30 Tencent Technology (Shenzhen) Company Limited Security verification method and apparatus
CN108228753A (zh) * 2017-12-21 2018-06-29 国云科技股份有限公司 一种网页端实时数据的动态展示方法
CN108959211A (zh) * 2017-05-18 2018-12-07 北京京东尚科信息技术有限公司 表单验证的方法和装置
CN109407947A (zh) * 2018-09-30 2019-03-01 北京金山云网络技术有限公司 界面交互及其验证方法、登录请求生成及验证方法和装置
CN110348193A (zh) * 2019-05-24 2019-10-18 招银云创（深圳）信息技术有限公司 验证方法、装置、设备和存储介质

Patent Citations (7)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20060130048A1 (en) * 2004-12-13 2006-06-15 Ebay Inc. Shared schema for software user interface designers and developers
US7941299B1 (en) * 2008-01-08 2011-05-10 The Mathworks, Inc. Verification and validation system for a graphical model
WO2015196973A1 (en) * 2014-06-25 2015-12-30 Tencent Technology (Shenzhen) Company Limited Security verification method and apparatus
CN108959211A (zh) * 2017-05-18 2018-12-07 北京京东尚科信息技术有限公司 表单验证的方法和装置
CN108228753A (zh) * 2017-12-21 2018-06-29 国云科技股份有限公司 一种网页端实时数据的动态展示方法
CN109407947A (zh) * 2018-09-30 2019-03-01 北京金山云网络技术有限公司 界面交互及其验证方法、登录请求生成及验证方法和装置
CN110348193A (zh) * 2019-05-24 2019-10-18 招银云创（深圳）信息技术有限公司 验证方法、装置、设备和存储介质

Non-Patent Citations (1)

* Cited by examiner, † Cited by third party
Title
赵广利: "面向切面的数据验证组件研究与实现", 《计算机工程与设计》 *

Also Published As

Publication number Publication date
CN110908661B (zh) 2022-03-22

Similar Documents

Publication Publication Date Title
US9454467B2 (en) Method and apparatus for mining test coverage data
CN105446874B (zh) 一种资源配置文件的检测方法和装置
US20140181767A1 (en) Method, apparatus, and system for efficient pre-silicon debug
CN105045602B (zh) 一种构建Hadoop应用开发框架的方法、装置及电子装置
CN106708687B (zh) 一种基于可执行文件的芯片验证方法和装置
CN109871312B (zh) 一种接口测试方法、装置、设备及可读存储介质
CN103235759A (zh) 测试用例生成方法和装置
US9317405B2 (en) Test double generation
CN107438832B (zh) 一种数据刷新方法、装置及计算机可读存储介质
CN110674047A (zh) 软件测试方法、装置及电子设备
CN110599341A (zh) 交易调用方法及系统
CN103885873A (zh) 一种自动化集成测试的方法
CN105684027A (zh) 一种房产网的房源验证方法及系统
CN111427771A (zh) 一种代码覆盖率分析方法、设备、服务器及可读存储介质
US8140315B2 (en) Test bench, method, and computer program product for performing a test case on an integrated circuit
CN111274120B (zh) 一种接口文档的验证方法和装置
CN106557412B (zh) 一种模糊测试的方法及装置
CN110569038A (zh) 随机验证参数设计方法、装置、计算机设备及存储介质
CN110908661B (zh) 一种界面验证vue组件的方法、装置、设备及存储介质
US9436587B2 (en) Test context generation
CN113282476B (zh) 接口性能测试方法、装置和电子设备
CN106844186B (zh) 应用的脱机测试方法及终端设备
CN114185805A (zh) 一种埋点验证方法、装置、设备及存储介质
CN110908869B (zh) 一种应用程序数据监控方法、装置、设备及储存介质
CN112084278A (zh) 一种地图数据转换定制产品的检证方法及装置

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination
GR01 Patent grant
GR01 Patent grant