CN109739495A - 一种构建树结构的方法、装置、设备以及存储介质 - Google Patents
一种构建树结构的方法、装置、设备以及存储介质 Download PDFInfo
- Publication number
- CN109739495A CN109739495A CN201811613622.6A CN201811613622A CN109739495A CN 109739495 A CN109739495 A CN 109739495A CN 201811613622 A CN201811613622 A CN 201811613622A CN 109739495 A CN109739495 A CN 109739495A
- Authority
- CN
- China
- Prior art keywords
- tree
- component
- goal
- building
- node
- 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.)
- Pending
Links
Landscapes
- Management, Administration, Business Operations System, And Electronic Commerce (AREA)
Abstract
本发明公开了一种构建树结构的方法、装置、设备以及计算机可读存储介质，包括：调用预先依据Element UI基础组件构建的树组件，利用所述树组件获取目标树的节点数据；利用所述树组件将所述节点数据输入至所述目标树的预选树型结构的各个节点内，完成所述目标树的构建，从而向用户展示所述目标树。利用本发明所提供的方法、装置、设备以及计算机可读存储介质，减少了开发人员的重复编码工作，降低了工作量，提高了工作效率。
Description
技术领域
本发明涉及互联网网页设备领域，特别是涉及一种构建树结构的方法、装置、设备以及计算机可读存储介质。
背景技术
目前互联网上的网页的样式越来越美观，用户也更偏爱设计风格新颖的网站，因此网站的前端设计越来越受重视，于是便出现了Vue这样的前端开发的框架，帮助开发者更加便捷快速的开发前端网页，也出现了Element UI这样的界面设计框架，使开发者可以开发更加美观、用户体验更好的网页。
而现有技术中，开发人员利用基于Element UI框架提供的基础树组件去编写一颗树时，需要进行数据获取，数据缓存，组织数据，编写许多重复的代码等大量繁琐的工作，需要大量的时间，大大降低了开发人员的工作效率。
综上所述可以看出，如何提高开发人员构建树的效率是目前有待解决的问题。
发明内容
本发明的目的是提供一种构建树结构的方法、装置、设备以及计算机可读存储介质，以解决现有技术中工作人员基于Element UI基础树组件构建树工作效率低的问题。
为解决上述技术问题，本发明提供一种构建树结构的方法，应用于Element UI树组件，包括：调用预先依据Element UI基础组件构建的树组件，利用所述树组件获取目标树的节点数据；利用所述树组件将所述节点数据输入至所述目标树的预选树型结构的各个节点内，完成所述目标树的构建，从而向用户展示所述目标树。
优选地，所述调用预先依据Element UI基础组件构建的树组件，获取目标树的节点数据包括：
调用预先依据Element UI基础组件构建的树组件，利用所述树组件从服务器后台接口获取所述目标树的节点数据。
优选地，所述完成所述目标树的构建，从而向用户展示所述目标树包括：
完成所述目标树的构建后，利用所述树组件启动懒加载功能，以便于所述树组件通过所述服务器后台接口获取并向用户展示所述目标树的根节点数据；
当接收到所述用户发送的请求所述根节点的下级子节点数据时，调用所述树组件从所述服务器后台接口获取所述根节点的下级子节点数据后，向所述用户展示所述下级子节点数据。
优选地，所述调用预先依据Element UI基础组件构建的树组件，获取目标树的节点数据包括：
调用预先依据Element UI基础组件构建的树组件，利用所述树组件从前端json文件获取所述目标树的节点数据。
优选地，所述利用所述树组件将所述节点数据输入至所述目标树的预选树型结构的各个节点内，完成所述目标树的构建，从而向用户展示所述目标树后还包括：
调用所述树组件，依据所述用户输入至检索框内的节点名称，在所述目标树内查找与所述节点名称对应的目标节点数据，并将所述目标节点数据展示给所述用户。
本发明还提供了一种构建树结构的装置，包括：
调用模块，用于调用预先依据Element UI基础组件构建的树组件，利用所述树组件获取目标树的节点数据；
构建模块，用于利用所述树组件将所述节点数据输入至所述目标树的预选树型结构的各个节点内，完成所述目标树的构建，从而向用户展示所述目标树。
优选地，所述调用模块具体用于：
调用预先依据Element UI基础组件构建的树组件，利用所述树组件从服务器后台接口获取所述目标树的节点数据。
优选地，所述构建模块后还包括：
展示模块，用于完成所述目标树的构建后，利用所述树组件启动懒加载功能，以便于所述树组件通过所述服务器后台接口获取并向用户展示所述目标树的根节点数据；
当接收到所述用户发送的请求所述根节点的下级子节点数据时，调用所述树组件从所述服务器后台接口获取所述根节点的下级子节点数据后，向所述用户展示所述下级子节点数据。
本发明还提供了一种构建树结构的设备，包括：
存储器，用于存储计算机程序；处理器，用于执行所述计算机程序时实现上述一种构建树结构的方法的步骤。
本发明还提供了一种计算机可读存储介质，所述计算机可读存储介质上存储有计算机程序，所述计算机程序被处理器执行时实现上述一种构建树结构的方法的步骤。
本发明所提供的构建树结构的方法，基于Element UI提供的基础组件，开发了一个通用的树组件。利用所述树组件可以获取需要构建的目标树的节点数据；并将所述节点数据输入至预先选择的树型结构的各个节点中，完成所述目标树的构建。当需要构建一颗树时，调用所述树组件获取目标树的节点数据；并利用所述树组件将所述节点数据输入至预选的树结构内，生成所述目标树，并将所述目标树展示给用户。利用发明所提供的方法在构建一颗树时，只需要预选确定树的类型，即可调用所述树组件获取所述目标树的节点数据，并组织所述节点数据，生成一颗美观的树。本发明所提供的方法减少了开发人员的重复编码工作，降低了工作量，提高了工作效率。
相对应的，本发明所提供的构建树结构的装置、设备以及计算机可读存储介质均具有上述有益效果。
附图说明
为了更清楚的说明本发明实施例或现有技术的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单的介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。
图1为本发明所提供的构建树结构的方法的第一种具体实施例的流程图；
图2为本发明所提供的构建树结构的方法的第二种具体实施例的流程图；
图3为本发明实施例提供的一种构建树结构的装置的结构框图。
具体实施方式
本发明的核心是提供一种构建树结构的方法、装置、设备以及计算机可读存储介质，减少了开发人员的重复编码工作，降低了工作量，提高了工作效率。
为了使本技术领域的人员更好地理解本发明方案，下面结合附图和具体实施方式对本发明作进一步的详细说明。显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。
请参考图1，图1为本发明所提供的构建树结构的方法的第一种具体实施例的流程图；具体操作步骤如下：
步骤S101：调用预先依据Element UI基础组件构建的树组件，利用所述树组件获取目标树的节点数据；
步骤S102：利用所述树组件将所述节点数据输入至所述目标树的预选树型结构的各个节点内，完成所述目标树的构建，从而向用户展示所述目标树。
本实施例解决了现有技术中当开发人员需要展示一棵树时，需要进行数据获取，数据缓存，组织数据等大量繁琐的工作，效率低的问题。在本实施例中，利用基于ElementUI的基本组件生成的树组件，使开发人员只需通过简单的配置，即可实现一棵具有树节点数据缓存、获取树节点数据，检索树节点功能的树，从而尽可能地减少开发人员的重复编码工作，降低工作量。
基于上述实施例，在本实施例中，所述树组件可以通过服务器后台接口获取所述目标树的节点数据；也可以通过前端json文件获取所述目标树的节点数据。在本实施例，以开发人员预先选择通过服务器后台接口为例对本发明所提供的构建树结构的方法进行进一步解释说明。请参考图2，图2为本发明所提供的构建树结构的方法的第二种具体实施例的流程图。具体操作步骤如下：
步骤S201：调用预先依据Element UI基础组件构建的树组件，利用所述树组件从服务器后台接口获取所述目标树的节点数据；
若所述开发人员需选择通过所述服务器后台接口获取构建目标树的数据时，所述开发人员需要编写后台提供数据的接口。
步骤S202：利用所述树组件将所述节点数据输入至所述目标树的预选树型结构的各个节点内，完成所述目标树的构建；
步骤S203：完成所述目标树的构建后，利用所述树组件启动懒加载功能，以便于所述树组件通过所述服务器后台接口获取并向用户展示所述目标树的根节点数据；
在本实施例中，为了减轻服务器后台的压力，开启所述树组件提供的懒加载功能，当启用所述懒加载功能时，所述树组件通过所述服务器后台接口获取并向用户展示所述目标树的根节点数据。若未启用所述懒加载功能，则向用户展示所述目标树全部节点数据，会造成所述服务器后台产生巨大压力。
步骤S204：当接收到所述用户发送的请求所述根节点的下级子节点数据时，调用所述树组件从所述服务器后台接口获取所述根节点的下级子节点数据后，向所述用户展示所述下级子节点数据；
在启用所述懒加载功能时，若用户需要查看所述目标树的根节点的下级节点数据时，只需要点击所述根节点，便可以调用所述树组件从所述服务器后台接口获取并展示所述根节点的下级子节点数据。
步骤S205：当所述用户在检索框内的输入一节点名称时，调用所述树组件在所述目标树内查找与所述节点名称对应的目标节点数据，并将所述目标节点数据展示给所述用户。
所述ElementUI是一个基于Vue的用于前端开发的界面框架，提供一些已有的基础组件，开发者可使用这些基础组件编写自己的功能性组件。所述Vue是一个用于前端开发的基础框架，允许开发者使用其编写自己的组件。所述组件为封装好的一个功能模块，许多组件相互协同，构成一个完整的前端项目。
在本实施例中，基于ElementUI、Vue前端框架，开发了一个通用的树组件。所述树组件会根据所述开发人员的选择从所述前端json文件或服务器后台接口获取用于构建目标树的数据，从而组织获取到的数据生成所述目标树。当所述开发人员选择通过所述服务器后接口获取数据，并开启懒加载功能，所述树组件会从所述服务器后台接口获取所述目标树的根节点数据，并向所述用户展示所述根节点数据。当所述用户点击所述根节点时才会请求其下级子节点数据，展示其下级子节点，此种做法可以减轻服务器后台的压力。
在本实施例中，所述树组件还可以提供检索功能，所述检索功能可以支持懒加载模式和非懒加载模式。当所述用户在检索框中输入节点的名称时，所述树组件会根据开发人员的选择从前端json文件或服务器后台接口检索对应的节点并展示给用户。
请参考图3，图3为本发明实施例提供的一种构建树结构的装置的结构框图。本实施例所提供的构建树结构的装置应用于ElementUI树组件，具体装置可以包括：
调用模块100，用于调用预先依据Element UI基础组件构建的树组件，利用所述树组件获取目标树的节点数据；
构建模块200，用于利用所述树组件将所述节点数据输入至所述目标树的预选树型结构的各个节点内，完成所述目标树的构建，从而向用户展示所述目标树。
本实施例的构建树结构的装置用于实现前述的构建树结构的方法，因此构建树结构的装置中的具体实施方式可见前文中的构建树结构的方法的实施例部分，例如，调用模块100，构建模块200，分别用于实现上述构建树结构的方法中步骤S101和S102，所以，其具体实施方式可以参照相应的各个部分实施例的描述，在此不再赘述。
本发明具体实施例还提供了一种构建树结构的设备，包括：存储器，用于存储计算机程序；处理器，用于执行所述计算机程序时实现上述一种构建树结构的方法的步骤。
本发明具体实施例还提供了一种计算机可读存储介质，所述计算机可读存储介质上存储有计算机程序，所述计算机程序被处理器执行时实现上述一种构建树结构的方法的步骤。
本说明书中各个实施例采用递进的方式描述，每个实施例重点说明的都是与其它实施例的不同之处，各个实施例之间相同或相似部分互相参见即可。对于实施例公开的装置而言，由于其与实施例公开的方法相对应，所以描述的比较简单，相关之处参见方法部分说明即可。
专业人员还可以进一步意识到，结合本文中所公开的实施例描述的各示例的单元及算法步骤，能够以电子硬件、计算机软件或者二者的结合来实现，为了清楚地说明硬件和软件的可互换性，在上述说明中已经按照功能一般性地描述了各示例的组成及步骤。这些功能究竟以硬件还是软件方式来执行，取决于技术方案的特定应用和设计约束条件。专业技术人员可以对每个特定的应用来使用不同方法来实现所描述的功能，但是这种实现不应认为超出本发明的范围。
结合本文中所公开的实施例描述的方法或算法的步骤可以直接用硬件、处理器执行的软件模块，或者二者的结合来实施。软件模块可以置于随机存储器(RAM)、内存、只读存储器(ROM)、电可编程ROM、电可擦除可编程ROM、寄存器、硬盘、可移动磁盘、CD-ROM、或技术领域内所公知的任意其它形式的存储介质中。
以上对本发明所提供的构建树结构的方法以及装置进行了详细介绍。本文中应用了具体个例对本发明的原理及实施方式进行了阐述，以上实施例的说明只是用于帮助理解本发明的方法及其核心思想。应当指出，对于本技术领域的普通技术人员来说，在不脱离本发明原理的前提下，还可以对本发明进行若干改进和修饰，这些改进和修饰也落入本发明权利要求的保护范围内。
Claims (10)
1.一种构建树结构的方法，其特征在于，包括：
调用预先依据Element UI基础组件构建的树组件，利用所述树组件获取目标树的节点数据；
利用所述树组件将所述节点数据输入至所述目标树的预选树型结构的各个节点内，完成所述目标树的构建，从而向用户展示所述目标树。
2.如权利要求1所述的方法，其特征在于，所述调用预先依据Element UI基础组件构建的树组件，获取目标树的节点数据包括：
调用预先依据Element UI基础组件构建的树组件，利用所述树组件从服务器后台接口获取所述目标树的节点数据。
3.如权利要求2所述的方法，其特征在于，所述完成所述目标树的构建，从而向用户展示所述目标树包括：
完成所述目标树的构建后，利用所述树组件启动懒加载功能，以便于所述树组件通过所述服务器后台接口获取并向用户展示所述目标树的根节点数据；
当接收到所述用户发送的请求所述根节点的下级子节点数据时，调用所述树组件从所述服务器后台接口获取所述根节点的下级子节点数据后，向所述用户展示所述下级子节点数据。
4.如权利要求1所述的方法，其特征在于，所述调用预先依据Element UI基础组件构建的树组件，获取目标树的节点数据包括：
调用预先依据Element UI基础组件构建的树组件，利用所述树组件从前端json文件获取所述目标树的节点数据。
5.如权利要求1至4任一项所述的方法，其特征在于，所述利用所述树组件将所述节点数据输入至所述目标树的预选树型结构的各个节点内，完成所述目标树的构建，从而向用户展示所述目标树后还包括：
调用所述树组件，依据所述用户输入至检索框内的节点名称，在所述目标树内查找与所述节点名称对应的目标节点数据，并将所述目标节点数据展示给所述用户。
6.一种构建树结构的装置，其特征在于，包括：
调用模块，用于调用预先依据Element UI基础组件构建的树组件，利用所述树组件获取目标树的节点数据；
构建模块，用于利用所述树组件将所述节点数据输入至所述目标树的预选树型结构的各个节点内，完成所述目标树的构建，从而向用户展示所述目标树。
7.如权利要求6所述的装置，其特征在于，所述调用模块具体用于：
调用预先依据Element UI基础组件构建的树组件，利用所述树组件从服务器后台接口获取所述目标树的节点数据。
8.如权利要求6所述的装置，其特征在于，所述构建模块后还包括：
展示模块，用于完成所述目标树的构建后，利用所述树组件启动懒加载功能，以便于所述树组件通过所述服务器后台接口获取并向用户展示所述目标树的根节点数据；
当接收到所述用户发送的请求所述根节点的下级子节点数据时，调用所述树组件从所述服务器后台接口获取所述根节点的下级子节点数据后，向所述用户展示所述下级子节点数据。
9.一种构建树结构的设备，其特征在于，包括：
存储器，用于存储计算机程序；
处理器，用于执行所述计算机程序时实现如权利要求1至5任一项所述一种构建树结构的方法的步骤。
10.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质上存储有计算机程序，所述计算机程序被处理器执行时实现如权利要求1至5任一项所述一种构建树结构的方法的步骤。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201811613622.6A CN109739495A (zh) | 2018-12-27 | 2018-12-27 | 一种构建树结构的方法、装置、设备以及存储介质 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201811613622.6A CN109739495A (zh) | 2018-12-27 | 2018-12-27 | 一种构建树结构的方法、装置、设备以及存储介质 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN109739495A true CN109739495A (zh) | 2019-05-10 |
Family
ID=66360208
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201811613622.6A Pending CN109739495A (zh) | 2018-12-27 | 2018-12-27 | 一种构建树结构的方法、装置、设备以及存储介质 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN109739495A (zh) |
Cited By (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN111752540A (zh) * | 2020-06-28 | 2020-10-09 | 北京百度网讯科技有限公司 | 树组件生成方法、装置、设备和计算机存储介质 |
| CN112346713A (zh) * | 2020-09-29 | 2021-02-09 | 上海微亿智造科技有限公司 | 基于Vue+Element-UI的el-table的二次封装方法、系统及电子设备 |
| CN112464039A (zh) * | 2020-11-11 | 2021-03-09 | 新奥数能科技有限公司 | 树形结构的数据显示方法、装置、电子设备和介质 |
Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20060184892A1 (en) * | 2005-02-17 | 2006-08-17 | Morris Robert P | Method and system providing for the compact navigation of a tree structure |
| CN103020092A (zh) * | 2011-09-28 | 2013-04-03 | 深圳市金蝶中间件有限公司 | 懒加载树中定位节点的方法和系统 |
| CN106341469A (zh) * | 2016-08-31 | 2017-01-18 | 东软集团股份有限公司 | 树节点数据的加载方法和装置 |
| CN106598591A (zh) * | 2016-12-12 | 2017-04-26 | 深圳竹信科技有限公司 | 一种网页动态菜单生成方法及装置 |
| CN108052365A (zh) * | 2017-12-19 | 2018-05-18 | 深圳市四格互联信息技术有限公司 | 用户界面的组件生成方法及装置 |
-
2018
- 2018-12-27 CN CN201811613622.6A patent/CN109739495A/zh active Pending
Patent Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20060184892A1 (en) * | 2005-02-17 | 2006-08-17 | Morris Robert P | Method and system providing for the compact navigation of a tree structure |
| CN103020092A (zh) * | 2011-09-28 | 2013-04-03 | 深圳市金蝶中间件有限公司 | 懒加载树中定位节点的方法和系统 |
| CN106341469A (zh) * | 2016-08-31 | 2017-01-18 | 东软集团股份有限公司 | 树节点数据的加载方法和装置 |
| CN106598591A (zh) * | 2016-12-12 | 2017-04-26 | 深圳竹信科技有限公司 | 一种网页动态菜单生成方法及装置 |
| CN108052365A (zh) * | 2017-12-19 | 2018-05-18 | 深圳市四格互联信息技术有限公司 | 用户界面的组件生成方法及装置 |
Cited By (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN111752540A (zh) * | 2020-06-28 | 2020-10-09 | 北京百度网讯科技有限公司 | 树组件生成方法、装置、设备和计算机存储介质 |
| CN111752540B (zh) * | 2020-06-28 | 2023-06-20 | 北京百度网讯科技有限公司 | 树组件生成方法、装置、设备和计算机存储介质 |
| CN112346713A (zh) * | 2020-09-29 | 2021-02-09 | 上海微亿智造科技有限公司 | 基于Vue+Element-UI的el-table的二次封装方法、系统及电子设备 |
| CN112464039A (zh) * | 2020-11-11 | 2021-03-09 | 新奥数能科技有限公司 | 树形结构的数据显示方法、装置、电子设备和介质 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN109739495A (zh) | 一种构建树结构的方法、装置、设备以及存储介质 | |
| JP6137505B2 (ja) | ウェブアプリケーションのための軽量フレームワーク | |
| US8839186B2 (en) | Entity morphing in metamodel-based tools | |
| US20110307856A1 (en) | Workflow visualization | |
| US20120174068A1 (en) | Testing Software Code | |
| US9361139B1 (en) | System and method for visualizing virtual system components | |
| CN107436738B (zh) | 一种数据存储方法及系统 | |
| CN103309650B (zh) | 持久层代码的生成方法和装置 | |
| JP5677319B2 (ja) | ウェブに基づくダイアグラム視覚性の拡張性 | |
| CN103744680A (zh) | 一种业务流程处理方法及装置 | |
| US20190303481A1 (en) | Supporting a join operation against multiple nosql databases | |
| CN108647304A (zh) | 报表显示系统、方法、计算机设备及存储介质 | |
| AU2015203316A1 (en) | Intelligent application back stack management | |
| CN104573110B (zh) | 一种浏览器中图形的动态展示方法及装置 | |
| CN112015468A (zh) | 一种接口文档处理方法、装置、电子设备以及存储介质 | |
| CN106201461A (zh) | 一种界面的生成方法、系统及后台服务器 | |
| Petriu et al. | Consistent behaviour representation in activity and sequence diagrams | |
| CN104750470A (zh) | 客户端与应用的通讯方法及装置 | |
| CN103488794A (zh) | 一种任意属性的数据库操作的Web实现方法 | |
| Qin et al. | UML based grid workflow modeling under ASKALON | |
| US20130346845A1 (en) | Interactive multi device in memory form generation | |
| CN110515599A (zh) | 一种基于配置的数据开放接口实现方法和系统 | |
| CN110489070A (zh) | 一种定制内容的显示处理方法及装置 | |
| CN105975286B (zh) | 生成用于人机交互的界面的方法及系统 | |
| CN106066828B (zh) | 一种生成Protobuf格式测试数据的方法及装置 |
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 | ||
| RJ01 | Rejection of invention patent application after publication | ||
| RJ01 | Rejection of invention patent application after publication |
Application publication date: 20190510 |