一种项目预览组件的实现方法及系统技术方案

本发明专利技术涉及前端Angular框架技术领域，具体提供了一种项目预览组件的实现方法，所述组件包括数据处理模块、渲染模块以及交互模块，数据处理模块根据用户对项目的配置，从后台获取项目的数据，将数据处理后分为项目结构数据和项目源码数据；渲染模块封装NG

【技术实现步骤摘要】
一种项目预览组件的实现方法及系统


[0001]本专利技术涉及前端Angular框架
，具体提供一种项目预览组件的实现方法及系统。

技术介绍

[0002]在开发者工具项目中存在实现项目预览功能的需求，即需在多个页面中添加项目预览功能组件。若在开发各页面时分别添加预览组件，不仅会给前端开发人员带来许多重复的工作、造成研发效率的下降，也较难适应需求的多变性、使得维护成本变高。

技术实现思路

[0003]本专利技术是针对上述现有技术的不足，提供一种实用性强的项目预览组件的实现方法。
[0004]本专利技术进一步的技术任务是提供一种设计合理，安全适用的项目预览组件实现装置。
[0005]本专利技术解决其技术问题所采用的技术方案是：
[0006]一种项目预览组件的实现方法，所述组件进行数据处理、渲染以及交互，
[0007]数据处理时根据用户对项目的配置，从后台获取项目的数据，将数据处理后分为项目结构数据和项目源码数据；
[0008]进行渲染时封装NG
‑
ZORROR的树形控件及CodeMirror组件，采用所述树形控件渲染项目结构数据内容，区分文件夹及单个文件的页面渲染，采用CodeMirror组件实现单个文件源码的展示；
[0009]对用户在项目结构的单机、双击做出交互处理，以查看项目目录及源码，在用户下载单个文件源码时，下载选中的文件。
[0010]进一步的，数据处理时，采用ngOnChanges监听父组件传参变化，在传参后调用后台方法加载目录及源码详情数据，所述加载目录及源码详情数据处理成树形控件能渲染的数据结构，NG
‑
ZORROR的树形控件的数据结构是在Array中存放不限个数的Object对象，每一个Object对象对应一个树节点。
[0011]进一步的，所述每一个Object对象对应一个树节点，叶子节点的Object对象中属性为title和key，其中，title用于显示树节点，key为该节点的id。
[0012]进一步的，如果当前判断的节点下存在子节点，则为非叶子节点，需要children属性，children属性的数据类型为Array类型，当中可存放不限个数的Object对象，children下的Object对象除了title和key属性外，还需要isLeaf属性，用于判断当前节点是否为叶子节点。
[0013]进一步的，若节点为非叶子节点，则采用文件夹icon，如果为叶子节点，在自定义目录结构的icon中则采用文件icon。
[0014]进一步的，对项目结构的渲染采用NG
‑
ZORROR组件库中的树组件，使用
nzTreeTemplate实现自定义目录结构，提供自动展开根节点数据功能，根据文件类型提供不同icon以区分文件类型及文件夹类型的节点。
[0015]进一步的，项目源码的渲染采用CodeMirror组件，渲染模式中通过对Codemirror的配置进行项目源码渲染。
[0016]进一步的，在进行交互时，初始化页面的时候，用户未选择待查看的文件，则要设置默认选中的节点，并展示选中的源码，其中，默认选中的文件是项目中必然存在且重要的文件。
[0017]进一步的，默认选中的操作也需要在数据处理中给相应树节点设置isSelected属性，当用户单击节点时，需要增加点击事件，如果节点为单个可见文件，则在项目源码渲染区域显示该文件的源码；
[0018]当用户双击文件夹节点时，需要增加双击事件，打开文件夹，展示一下子节点，此外，当用户点击下载单个文件源码的按钮时，需要进行处理，以下载选中的文件。
[0019]一种项目预览组件的实现系统，所述组件包括数据处理模块、渲染模块以及交互模块，
[0020]所述数据处理模块用于根据用户对项目的配置，从后台获取项目的数据，将数据处理后分为项目结构数据和项目源码数据；
[0021]所述渲染模块用于封装NG
‑
ZORROR的树形控件及CodeMirror组件，采用所述树形控件渲染项目结构数据内容，区分文件夹及单个文件的页面渲染，采用CodeMirror组件实现单个文件源码的展示；
[0022]所述交互模块用于对用户在项目结构的单机、双击做出交互处理，以查看项目目录及源码，在用户下载单个文件源码时，下载选中的文件。
[0023]本专利技术的一种项目预览组件的实现方法及系统和现有技术相比，具有以下突出的有益效果：
[0024]本专利技术采用Angular实现项目结构在线预览功能、文件详情预览功能及文件源码下载功能，方便用户使用开发者工具构建项目。
[0025]采用ngOnChanges监听父组件传参变化，仅在传参后调用后台方法加载目录及源码详情数据，减少不必要的数据处理。结合树组件及后台返回数据的结构特征，采用合适的算法处理数据，提供数据处理效率。
[0026]提供美观界面及动效交互。良好的动效交互直观、简洁明了，本专利技术通过对目录树节点的初始化、单击、双击操作进行监听，触发相应的交互动效，提供层级分明、美观实用的在线预览目录结构的功能。采用Codemirror组件实现源码详情的显示，关键词高亮显示，提高用户可读性。
[0027]提供一个公用组件，减少了开发中大量冗余代码，且引用方式简单，方便开发人员使用。
附图说明
[0028]为了更清楚地说明本专利技术实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图是本专利技术的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据
这些附图获得其他的附图。
[0029]附图1是一种项目预览组件的实现方法的流程示意图。
具体实施方式
[0030]为了使本
的人员更好的理解本专利技术的方案，下面结合具体的实施方式对本专利技术作进一步的详细说明。显然，所描述的实施例仅仅是本专利技术一部分实施例，而不是全部的实施例。基于本专利技术中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例都属于本专利技术保护的范围。
[0031]下面给出一个最佳实施例：
[0032]如图1所示，本实施例中的所述组件进行数据处理、渲染以及交互，
[0033]数据处理时根据用户对项目的配置，从后台获取项目的数据，将数据处理后分为项目结构数据和项目源码数据；
[0034]进行渲染时封装NG
‑
ZORROR的树形控件及CodeMirror组件，采用所述树形控件渲染项目结构数据内容，区分文件夹及单个文件的页面渲染，采用CodeMirror组件实现单个文件源码的展示；
[0035]对用户在项目结构的单机、双击做出交互处理，以查看项目目录及源码，在用户下载单个文件源码时，下载选中的文件。
[0036]在数据处理时，具体的做法为：
[0037]采用n本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种项目预览组件的实现方法，其特征在于，所述组件进行数据处理、渲染以及交互，数据处理时根据用户对项目的配置，从后台获取项目的数据，将数据处理后分为项目结构数据和项目源码数据；进行渲染时封装NG
‑
ZORROR的树形控件及CodeMirror组件，采用所述树形控件渲染项目结构数据内容，区分文件夹及单个文件的页面渲染，采用CodeMirror组件实现单个文件源码的展示；对用户在项目结构的单机、双击做出交互处理，以查看项目目录及源码，在用户下载单个文件源码时，下载选中的文件。2.根据权利要求1所述的一种项目预览组件的实现方法，其特征在于，数据处理时，采用ngOnChanges监听父组件传参变化，在传参后调用后台方法加载目录及源码详情数据，所述加载目录及源码详情数据处理成树形控件能渲染的数据结构，NG
‑
ZORROR的树形控件的数据结构是在Array中存放不限个数的Object对象，每一个Object对象对应一个树节点。3.根据权利要求2所述的一种项目预览组件的实现方法，其特征在于，所述每一个Object对象对应一个树节点，叶子节点的Object对象中属性为title和key，其中，title用于显示树节点，key为该节点的id。4.根据权利要求3所述的一种项目预览组件的实现方法，其特征在于，如果当前判断的节点下存在子节点，则为非叶子节点，需要children属性，children属性的数据类型为Array类型，当中可存放不限个数的Object对象，children下的Object对象除了title和key属性外，还需要isLeaf属性，用于判断当前节点是否为叶子节点。5.根据权利要求4所述的一种项目预览组件的实现方法，其特征在于，若节点为非叶子节点，则采用文件夹icon，如果为叶子节点，在自定义目录结构的icon中则采用文件icon。6.根据...

【专利技术属性】
技术研发人员：翟文莉，玄德，肖传楠，杨旭，李明强，
申请(专利权)人：浪潮云信息技术股份公司，
类型：发明
国别省市：