图片列表展现方法、装置、终端设备及存储介质制造方法及图纸

本发明专利技术公开了一种图片列表展现方法、装置、终端设备及存储介质。所述方法包括：配置待显示页面的父组件、子组件和模板文件；其中，模板文件包括第一模板和第二模板；自数据库中调取组件数据；将组件数据填充至父组件，并令父组件将组件数据按照预设规则传输至子组件中；根据所述父组件、所述子组件和所述模板文件加载并显示所述待显示页面。本发明专利技术通过图像来区分页面中显示的多个相似信息，提升了各相似信息的辨识度，增强了页面跳转的感知度和对当前页面的操作兴趣；同时页面中的相似信息显示形式可以进行切换以满足不同需求，大大提升了用户体验。

【技术实现步骤摘要】
图片列表展现方法、装置、终端设备及存储介质
本专利技术涉及网页领域，尤其涉及一种图片列表展现方法、装置、终端设备及存储介质。
技术介绍
目前，在网页中对包含图形的信息进行大批量展示时，通常都是在列表中一行行进行展示，且每行中均包含图片和文字说明。该方案的不足之处在于：通过包含图片和文字说明的列表来进行大批量展示，其表达方式太过单一，且大段的文字说明也完全不能达到吸引用户的眼球和查看欲望的目的；同时，列表所对应的前后链接的网页可能包含有相似的需大批量展示的元素，此时，在网页跳转至链接页面之后，仍然以相似或相同的列表形式进行展示，会让用户产生是否跳转了页面的疑问，其用户体验不好。
技术实现思路
本专利技术实施例提供了一种图片列表展现方法、装置、终端设备及存储介质，以解决当前在网页的页面上通过列表来区分不同的相似信息(比如人员)导致可辨识度低的问题。第一方面，本专利技术案例提供一种图片列表展现方法，包括：配置待显示页面的父组件、子组件和模板文件；其中，所述模板文件包括第一模板和第二模板；接收页面加载指令，自数据库中调取组件数据；其中，所述组件数据包括人员标识、人脸图像、人员备注信息、查看模块、编辑模块和删除模块；将所述组件数据填充至所述父组件，并令所述父组件将所述组件数据按照预设规则传输至所述子组件中；根据所述父组件、所述子组件和所述模板文件加载所述待显示页面。第二方面，本专利技术实例提供一种图片列表展现装置，包括：配置模块，用于配置待显示页面的父组件、子组件和模板文件；其中，所述模板文件包括第一模板和第二模板；调取模块，用于自数据库中调取组件数据；其中，所述组件数据包括人员标识、人脸图像、人员备注信息、查看模块、编辑模块和删除模块；传输模块，用于将所述组件数据填充至所述父组件，并令所述父组件将所述组件数据按照预设规则传输至所述子组件中；加载模块，用于根据所述父组件、所述子组件和所述模板文件加载所述待显示页面。第三方面，本专利技术实例提供一种终端设备，包括存储器、处理器以及存储在所述存储器中并可在所述处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现所述图片列表展现方法的步骤。第四方面，本专利技术实例提供一种计算机可读存储介质，所述计算机可读存储介质存储有计算机程序，所述计算机程序被处理器执行时实现所述图片列表展现方法的步骤。本专利技术提供的图片列表展现方法、装置、终端设备及存储介质，在显示的页面的过程中，将显示多个相似信息(比如人员信息)的区域配置为利用图像(比如人脸图像)的不同来区分不同人员，而不是通过列表中的文字(比如名称)不同来进行区分，从而使得各相似元素的可辨识度得到提升；同时，显示页面通过图像来进行区分，在相同类型的页面跳转之后，其页面的展示内容的差别远大于文字内容的差别，可令用户对页面跳转的感知程度增强；同时，页面上更多地以图像形式进行显示，增强了用户对当前页面的操作兴趣；同时，在特定情况下，亦可切换其页面中的相似信息显示形式，以满足不同用户需求，大大提升了用户体验。附图说明为了更清楚地说明本专利技术实施例的技术方案，下面将对本专利技术实施例的描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本专利技术的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动性的前提下，还可以根据这些附图获得其他的附图。图1是本专利技术一实施例中图片列表展现方法的应用环境示意图；图2是本专利技术一实施例中图片列表展现方法的流程图；图3是本专利技术一实施例中图片列表展现方法的步骤S10的流程图；图4是本专利技术一实施例中图片列表展现方法的步骤S102的流程图；图5是本专利技术又一实施例中的图片列表展现方法的步骤S102的流程图；图6是本专利技术另一实施例中的图片列表展现方法的流程图；图7是本专利技术一实施例中的图片列表展现装置的框图；图8是本专利技术一实施例中的图片列表展现装置的配置模块的框图；图9是本专利技术一实施例中计算机设备的示意图。具体实施方式下面将结合本专利技术实施例中的附图，对本专利技术实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本专利技术一部分实施例，而不是全部的实施例。基于本专利技术中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本专利技术保护的范围。本专利技术提供的图片列表展现方法，可应用在如图1的应用环境中，其中，客户端(计算机设备)通过网络与服务器进行通信。其中，客户端包括但不限于为各种个人计算机、笔记本电脑、智能手机、平板电脑和便携式可穿戴设备。服务器可以用独立的服务器或者是多个服务器组成的服务器集群来实现。在一实施例中，如图2所示，提供一种图片列表展现方法，以该方法应用在图1中的服务器为例进行说明，包括如下步骤：S10，配置待显示页面的父组件、子组件和模板文件；其中，所述模板文件包括可相互切换的第一模板和第二模板。在一实施例中，可以通过angularJS执行该步骤中的配置过程；其中，angularJS是一个JavaScript(一种直译式脚本语言)框架。通过angularJS配置的待显示页面，包括至少一父组件以及与每个所述父组件通信连接的多个子组件，所述父组件与子组件之间可以双向传输数据。所述父组件可以监听所述子组件所触发的事件(比如，用户点击一个子组件对应于的编辑、删除的图片按钮时，触发该子组件的相应事件)，并在子组件触发事件后，接收该子组件发送的更新后的组件数据(比如编辑之后的子组件的组件数据，被删除的子组件的组件信息)，并将更新后的组件数据对应存储至数据库中与该子组件对应的位置。所述子组件可以接受所述父组件传输的数据，同时在触发所述父组件听听的事件后，将该事件中更新的组件数据(比如编辑之后的子组件的组件数据，被删除的子组件的组件信息)传输给父组件。所述模板文件包括可相互切换的第一模板和第二模板；可理解地，所述模板文件设置了所述父组件和子组件的绑定关系以及所述子组件的显示位置、大小、形状等页面显示效果。S20，自数据库中调取组件数据；其中，所述组件数据包括人员标识、人脸图像、人员备注信息、查看模块、编辑模块和删除模块。可理解地，所述组件数据包括但不限定于为人员标识、人脸图像、人员备注信息、查看模块、编辑模块和删除模块等，所述查看模块包括查看界面链接及显示图片，所述编辑模块包括编辑界面链接及显示图片，所述删除模块包括删除界面链接及显示图片。且每一个子组件中的上述组件数据均与所述人脸图像所属的人员对应。其中，所述人员标识是指对应于该人员的唯一标识，所述人员标识可以根据需求设定，比如，设定为其电话号码、邮箱、身份证号码或其他随机生成但唯一对应于该人员的号码；且通过所述人员标识，可以将所述子组件与所述数据库中该人员的相关信息的存储位置关联，从而在数据库中调取、更新或存储数据时，可以根据所述人员标识进行识别。所述人脸图像可以为该人员的头像；所述人员备注信息可以根据需求设定，比如性别，年龄、职位、级别、履历、电话号码、邮箱、身份证号码等一切与该人员相关的信息均可。所述查看界面链接是指可以根据其跳转到查看界面的链接地址；所述查看界面显示图片是指：在所述子组件当前显示页面上与所述查看界面链接关联的按钮所显示的图片；同理，可解释编辑界面链接及显示图片和删除界面链接及显示图片，在此不再赘述。也即，在需要本文档来自技高网...

【技术保护点】
1.一种图片列表展现方法，其特征在于，包括：配置待显示页面的父组件、子组件和模板文件；其中，所述模板文件包括第一模板和第二模板；自数据库中调取组件数据；其中，所述组件数据包括人员标识、人脸图像、人员备注信息、查看模块、编辑模块和删除模块；将所述组件数据填充至所述父组件，并令所述父组件将所述组件数据按照预设规则传输至所述子组件中；根据所述父组件、所述子组件和所述模板文件加载并显示所述待显示页面。

【技术特征摘要】
1.一种图片列表展现方法，其特征在于，包括：配置待显示页面的父组件、子组件和模板文件；其中，所述模板文件包括第一模板和第二模板；自数据库中调取组件数据；其中，所述组件数据包括人员标识、人脸图像、人员备注信息、查看模块、编辑模块和删除模块；将所述组件数据填充至所述父组件，并令所述父组件将所述组件数据按照预设规则传输至所述子组件中；根据所述父组件、所述子组件和所述模板文件加载并显示所述待显示页面。2.如权利要求1所述的图片列表展现方法，其特征在于，所述配置待显示页面的父组件、子组件和模板文件，包括：通过angularJS配置所述待显示页面的所述父组件、与所述父组件通信连接的多个所述子组件；通过angularJS配置所述待显示页面的所述模板文件；所述模板文件包括可相互切换的所述第一模板和所述第二模板。3.如权利要求2所述的图片列表展现方法，其特征在于，在所述模板文件为所述第一模板时，所述通过angularJS配置所述待显示页面的所述模板文件，包括：将各所述子组件配置在页面中按照预设间距间隔的多个相同大小的区域中；将各所述子组件中的人脸图像配置在所述区域中的人脸图像的目标位置；将各所述子组件中的人员备注信息配置在所述区域中的人脸图像的下方或上方，且所述人员备注信息的字体显示颜色比所述待显示页面中的其他字体的显示颜色浅；将各所述子组件中的查看模块、编辑模块和删除模块配置在所述区域中人脸图像的下方，且三者间距相等、大小相同且排布在同一行。4.如权利要求2所述的图片列表展现方法，其特征在于，在所述模板文件为所述第二模板时，所述通过angularJS配置所述待显示页面的所述模板文件，包括：将各所述子组件配置为以列表形式排布在页面中的预设表格中；将各所述子组件中的人脸图像、人员备注信息、查看模块、编辑模块和删除模块配置在所述表格中的同一行。5.如权利要求1所述的图片列表展现方法，其特征在于，所述根据所述父...

【专利技术属性】
技术研发人员：范凯益，陈凯强，
申请(专利权)人：平安科技深圳有限公司，
类型：发明
国别省市：广东,44