图片列表展现方法、装置、终端设备及存储介质与流程

本发明涉及网页领域，尤其涉及一种图片列表展现方法、装置、终端设备及存储介质。

背景技术：

目前，在网页中对包含图形的信息进行大批量展示时，通常都是在列表中一行行进行展示，且每行中均包含图片和文字说明。该方案的不足之处在于：通过包含图片和文字说明的列表来进行大批量展示，其表达方式太过单一，且大段的文字说明也完全不能达到吸引用户的眼球和查看欲望的目的；同时，列表所对应的前后链接的网页可能包含有相似的需大批量展示的元素，此时，在网页跳转至链接页面之后，仍然以相似或相同的列表形式进行展示，会让用户产生是否跳转了页面的疑问，其用户体验不好。

技术实现要素：

本发明实施例提供了一种图片列表展现方法、装置、终端设备及存储介质，以解决当前在网页的页面上通过列表来区分不同的相似信息(比如人员)导致可辨识度低的问题。

第一方面，本发明案例提供一种图片列表展现方法，包括：

配置待显示页面的父组件、子组件和模板文件；其中，所述模板文件包括第一模板和第二模板；

接收页面加载指令，自数据库中调取组件数据；其中，所述组件数据包括人员标识、人脸图像、人员备注信息、查看模块、编辑模块和删除模块；

将所述组件数据填充至所述父组件，并令所述父组件将所述组件数据按照预设规则传输至所述子组件中；

根据所述父组件、所述子组件和所述模板文件加载所述待显示页面。

第二方面，本发明实例提供一种图片列表展现装置，包括：

配置模块，用于配置待显示页面的父组件、子组件和模板文件；其中，所述模板文件包括第一模板和第二模板；

调取模块，用于自数据库中调取组件数据；其中，所述组件数据包括人员标识、人脸图像、人员备注信息、查看模块、编辑模块和删除模块；

传输模块，用于将所述组件数据填充至所述父组件，并令所述父组件将所述组件数据按照预设规则传输至所述子组件中；

加载模块，用于根据所述父组件、所述子组件和所述模板文件加载所述待显示页面。

第三方面，本发明实例提供一种终端设备，包括存储器、处理器以及存储在所述存储器中并可在所述处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现所述图片列表展现方法的步骤。

第四方面，本发明实例提供一种计算机可读存储介质，所述计算机可读存储介质存储有计算机程序，所述计算机程序被处理器执行时实现所述图片列表展现方法的步骤。

本发明提供的图片列表展现方法、装置、终端设备及存储介质，在显示的页面的过程中，将显示多个相似信息(比如人员信息)的区域配置为利用图像(比如人脸图像)的不同来区分不同人员，而不是通过列表中的文字(比如名称)不同来进行区分，从而使得各相似元素的可辨识度得到提升；同时，显示页面通过图像来进行区分，在相同类型的页面跳转之后，其页面的展示内容的差别远大于文字内容的差别，可令用户对页面跳转的感知程度增强；同时，页面上更多地以图像形式进行显示，增强了用户对当前页面的操作兴趣；同时，在特定情况下，亦可切换其页面中的相似信息显示形式，以满足不同用户需求，大大提升了用户体验。

附图说明

为了更清楚地说明本发明实施例的技术方案，下面将对本发明实施例的描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动性的前提下，还可以根据这些附图获得其他的附图。

图1是本发明一实施例中图片列表展现方法的应用环境示意图；

图2是本发明一实施例中图片列表展现方法的流程图；

图3是本发明一实施例中图片列表展现方法的步骤s10的流程图；

图4是本发明一实施例中图片列表展现方法的步骤s102的流程图；

图5是本发明又一实施例中的图片列表展现方法的步骤s102的流程图；

图6是本发明另一实施例中的图片列表展现方法的流程图；

图7是本发明一实施例中的图片列表展现装置的框图；

图8是本发明一实施例中的图片列表展现装置的配置模块的框图；

图9是本发明一实施例中计算机设备的示意图。

具体实施方式

下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

本发明提供的图片列表展现方法，可应用在如图1的应用环境中，其中，客户端(计算机设备)通过网络与服务器进行通信。其中，客户端包括但不限于为各种个人计算机、笔记本电脑、智能手机、平板电脑和便携式可穿戴设备。服务器可以用独立的服务器或者是多个服务器组成的服务器集群来实现。

在一实施例中，如图2所示，提供一种图片列表展现方法，以该方法应用在图1中的服务器为例进行说明，包括如下步骤：

s10，配置待显示页面的父组件、子组件和模板文件；其中，所述模板文件包括可相互切换的第一模板和第二模板。

在一实施例中，可以通过angularjs执行该步骤中的配置过程；其中，angularjs是一个javascript(一种直译式脚本语言)框架。通过angularjs配置的待显示页面，包括至少一父组件以及与每个所述父组件通信连接的多个子组件，所述父组件与子组件之间可以双向传输数据。

所述父组件可以监听所述子组件所触发的事件(比如，用户点击一个子组件对应于的编辑、删除的图片按钮时，触发该子组件的相应事件)，并在子组件触发事件后，接收该子组件发送的更新后的组件数据(比如编辑之后的子组件的组件数据，被删除的子组件的组件信息)，并将更新后的组件数据对应存储至数据库中与该子组件对应的位置。

所述子组件可以接受所述父组件传输的数据，同时在触发所述父组件听听的事件后，将该事件中更新的组件数据(比如编辑之后的子组件的组件数据，被删除的子组件的组件信息)传输给父组件。

所述模板文件包括可相互切换的第一模板和第二模板；可理解地，所述模板文件设置了所述父组件和子组件的绑定关系以及所述子组件的显示位置、大小、形状等页面显示效果。

s20，自数据库中调取组件数据；其中，所述组件数据包括人员标识、人脸图像、人员备注信息、查看模块、编辑模块和删除模块。

可理解地，所述组件数据包括但不限定于为人员标识、人脸图像、人员备注信息、查看模块、编辑模块和删除模块等，所述查看模块包括查看界面链接及显示图片，所述编辑模块包括编辑界面链接及显示图片，所述删除模块包括删除界面链接及显示图片。且每一个子组件中的上述组件数据均与所述人脸图像所属的人员对应。

其中，所述人员标识是指对应于该人员的唯一标识，所述人员标识可以根据需求设定，比如，设定为其电话号码、邮箱、身份证号码或其他随机生成但唯一对应于该人员的号码；且通过所述人员标识，可以将所述子组件与所述数据库中该人员的相关信息的存储位置关联，从而在数据库中调取、更新或存储数据时，可以根据所述人员标识进行识别。

所述人脸图像可以为该人员的头像；所述人员备注信息可以根据需求设定，比如性别，年龄、职位、级别、履历、电话号码、邮箱、身份证号码等一切与该人员相关的信息均可。所述查看界面链接是指可以根据其跳转到查看界面的链接地址；所述查看界面显示图片是指：在所述子组件当前显示页面上与所述查看界面链接关联的按钮所显示的图片；同理，可解释编辑界面链接及显示图片和删除界面链接及显示图片，在此不再赘述。

也即，在需要加载页面时，比如，用户点击选择需要查看本页面展示的人员情况，此时，需要自数据库中调取组件数据(如上述)，所述组件数据将用于填充所述待显示页面中的父组件与子组件。可理解地，调取的所述组件数据的具体数量可以根据需求进行设定，比如，若所述模板文件中配置的所述父组件绑定的子组件的数量为n，此时可以仅在数据库中调取对应于n个子组件的n组组件数据即可。

s30，将所述组件数据填充至所述父组件，并令所述父组件将所述组件数据按照预设规则传输至所述子组件中。

也即，所述父组件与所述子组件之间进行通信，实现组件数据的绑定。在本提案中，所述父组件与所述子组件之间是双向绑定的，在所述组件数据填充至所述父组件之后，所述父组件会通过双向绑定将组件数据传输到各子组件中。可理解的，在所述组件数据传输至所述子组件中之后，所述子组件与传输给自己的组件数据(包括存储该数据的数据库中的预设位置等)之间可以通过所述人员标识进行关联。

所述父组件可以监听所述子组件所触发的事件，比如，在点击“查看”按钮在该页面中显示的图片时，会弹出下一页面(也即查看界面)，此时浏览器渲染该页，同时子组件将所述父组件传输给自己的组件数据填充至该查看界面，完成该查看界面的显示。

可理解的，所述预设规则包括以下内容：所述父组件传输组件数据的子组件的数量(也即当前页面中显示的子组件的数量)应该与所述模板文件中规定的与所述父组件中绑定的所述子组件的数量一致；每个子组件对应的组件数据的分派，可以依照与每组组件数据对应的人员标识进行排序。

s40，根据所述父组件、所述子组件和所述模板文件加载所述待显示页面。

在一实施例中，所述步骤s40具体为：确定所述页面加载指令中包含的所述模板文件为所述第一模板或所述第二模板，并根据所述父组件、所述子组件和所述模板文件加载所述待显示页面。

在所述模板文件为第一模板时，按照所述第一模板的配置加载所述待显示页面；在一个实施例中，将多个(与所述第一模板中与所述父组件绑定的子组件的数量一致)所述子组件加载在页面中按照预设间隔的多个相同大小的区域中；将所述子组件中对应于人脸图像的模块加载在所述区域中的人脸图像的目标位置；所述人脸图像目标位置的大小等根据需求进行设定，优选为设定在所述区域内最上方或中间位置，且所述人脸图像的目标位置的大小占比为所述区域的1/2至1；将所述子组件中对应于人员备注信息的模块加载在所述区域中的人脸图像的下方或上方，且其显示字体颜色比所述待显示页面中的其他字体的显示颜色浅；将所述子组件中对应于查看、编辑、删除的模块加载在所述区域中人脸图像的下方，且三者被加载为间距相等大小相同地排布在同一行。

在所述模板文件为第二模板时，按照所述第二模板的配置加载所述待显示页面；在一个实施例中，将多个(与所述第二模板中与所述父组件绑定的子组件的数量一致)所述子组件加载为以列表形式排布在页面中的预设表格中；将所述子组件中对应于人脸图像、人员备注信息、查看界面链接及显示图片、编辑界面链接及显示图片和删除界面链接及显示图片的模块均加载在所述表格中同一行。

可理解地，在加载所述待显示页面之后，需要对所述待显示页面进行显示之前，首先需要进行页面渲染，之后才显示所述待显示页面。也即，在该步骤中调用html(hypertextmarkuplanguage，超级文本标记语言)和css(cascadingstylesheets，层叠样式表)进行页面渲染之后，显示待显示页面，也即，以所述页面加载指令中包含的模板文件(第一模板或第二模板)中配置的子组件的数量、显示和排布形式，将各子组件对应的人员的组件数据(比如，该人员的人脸图像、人员备注信息和查看、编辑、删除按钮)显示在待显示页面。

本实施例的图片列表展现方法，在显示的页面的过程中，将显示多个相似信息(比如人员信息)的区域配置为利用图像(比如人脸图像)的不同来区分不同人员，而不是通过列表中的文字(比如名称)不同来进行区分，从而使得各相似元素的可辨识度得到提升；同时，显示页面通过图像来进行区分，在相同类型的页面跳转之后，其页面的展示内容的差别远大于文字内容的差别，可令用户对页面跳转的感知程度增强；同时，页面上更多地以图像形式进行显示，增强了用户对待显示页面的操作兴趣；同时，在特定情况下，亦可切换其页面中的相似信息显示形式，以满足不同用户需求，大大提升了用户体验。可理解的，本发明可应用于页面中多个的相似信息显示场景，包括人员、设备等。

在一实施例中，如图3所示，所述步骤s10，也即配置待显示页面的父组件、子组件和模板文件，包括以下步骤：

s101，通过angularjs配置所述待显示页面的所述父组件、与所述父组件通信连接的多个所述子组件；

也即，在该步骤中，通过angularjs配置父组件以及与所述父组件可以实现双向通信连接的多个子组件；该配置过程包括：确定与父组件绑定的子组件的数量，并配置所述父组件与该数量的子组件之间的绑定关系。可理解地，与所述父组件绑定的子组件的数量，在第一模板与所述第二模板中优选为一致(切换速度更快，两者显示内容保持同步)，但是亦可以根据用户需求设定为不一致(满足用户特定需求，比如用户想要在待显示页面上显示更多内容时，可以在切换页面显示形式时，调整待显示页面显示的模板文件中所对应的子组件的数量)。

s102，通过angularjs配置所述待显示页面的所述模板文件；所述模板文件包括可相互切换的所述第一模板和所述第二模板。

可理解地，所述模板文件设置了所述父组件和子组件的绑定关系以及所述子组件的显示位置、大小、形状等页面显示效果。作为优选，在所述第一模板与所述第二模板中，优选为所述父组件绑定的所述子组件的数量是一致的，以便于提升切换两种页面显示形式的切换速度。

在一实施例中，在所述模板文件为所述第一模板时，如图4所示，所述步骤s102，也即通过angularjs配置所述待显示页面的所述模板文件，包括以下步骤：

s1021，将各所述子组件配置在页面中按照预设间距间隔的多个相同大小的区域中；其中，所述子组件的数量与所述第一模板中与所述父组件绑定的子组件的数量一致；所述预设间隔可以根据页面大小、可供所有子组件显示的面积大小，需要在待显示页面显示的子组件的数量等进行合理的配置；在该实施例中，所述第一模板对应的网页显示页面中，多个所述子组件是以相同间距均匀排布在页面上的，而不是以列表的形式。

s1022，将各所述子组件中的人脸图像配置在所述区域中的人脸图像的目标位置；其中，所述人脸图像目标位置的大小等根据需求进行设定，优选为设定在所述区域内最上方或中间位置，且所述人脸图像的目标位置的大小占比为所述区域的1/2至1；也即，在本实施例中，一个所述子组件的所属区域中，将每个人员的所述人脸图像配置在最醒目的位置，比如最上方、最中间等位置；且令显示的所述人脸图像的大小占据所述区域的一半大小以上，以使得用户可以通过所述人脸图像来识别该人员。

s1023，将各所述子组件中的人员备注信息配置在所述区域中的人脸图像的下方或上方，且所述人员备注信息的字体显示颜色比所述待显示页面中的其他字体的显示颜色浅；其中，所述人员备注信息可以根据需求设定，比如性别，年龄、职位、级别、履历、电话号码、邮箱、身份证号码等一切与该人员相关的信息均可；作为优选，所说人员备注信息不超过三项或/和三行。在该步骤中，根据需求将所述子组件中的人员备注信息中的必要信息显示在人脸图像的下方或上方，以便于在该页面找到该人员之后，无需进入其他页面即可获取必要的人员备注信息(比如姓名和电话)。但是，为了凸显该人员人脸图像的显示以便于在页面中更好地辨认，该人员备注信息以弱化后的淡色字体颜色进行显示，以降低其关注度。

s1024，将各所述子组件中的查看模块、编辑模块和删除模块配置在所述区域中人脸图像的下方，且三者间距相等、大小相同且排布在同一行。

也即，所述查看、编辑、删除模块中，将分别加载对应所述查看、编辑、删除对应的按钮显示图片，同时将各显示图片与其对应的链接关联，在页面显示完毕之后，点击各显示图片，会分别进入查看界面、编辑界面、删除界面，用户可以在所述查看界面、编辑界面、删除界面对所述子组件中的组件数据进行查看、编辑与删除。比如，若通过人脸图像查找到某个人员时，若需进一步查看该人员的详细信息，可点击查看按钮进入查看界面，进入人员详情页，对该人员的详细信息进行查看。可理解地，除查看、编辑、删除模块之外，还可根据用户需求增加其他类似模块(删除亦可)，此时，仅需要在这一行中再增加一个对应模块(调整各模块之间的相等间距的距离)，并显示该模块对应的按钮显示图片，同时关联其链接即可。

本提案中的上述配置步骤均通过angularjs进行，且配置步骤的顺序并不限定于上述，且配置步骤的顺序亦可根据需求进行选取，比如，步骤s1023和s1024中对于所述第一模板的配置可在需要时进行选取，不需要则不配置亦可。

在一实施例中，在所述模板文件为所述第二模板时，如图5所示，所述步骤s102，也即通过angularjs配置所述待显示页面的所述模板文件，包括以下步骤：

s1025，将各所述子组件配置为以列表形式排布在页面中的预设表格中；其中，所述子组件与所述第二模板中与所述父组件绑定的子组件的数量一致；在该实施例中，所述第二模板对应的网页显示页面中，多个所述子组件将以列表的形式排列在页面上。

s1026，将各所述子组件中的人脸图像、人员备注信息、查看模块、编辑模块和删除模块配置在所述表格中的同一行。

由上述可知，模板文件被分别配置为第一模板和第二模板，且第一模板与第二模板分别对应于所述页面中子组件的显示和排布方式，且在接收到页面切换指令时，所述第一模板与第二模板可以切换，此时页面可以根据切换指令中包含的待切换的模板文件(比如，自第一模板切换到第二模板时，则待切换的模板文件为第二模板)更新待显示页面的显示，从而使得不同用户的不同需求均得到满足。

在一实施例中，如图6所示，所述步骤s40之后，包括以下步骤：

s50，接收页面切换指令，获取所述切换指令中包含的已配置的所述模板文件，并确定所述模板文件为第一模板或第二模板之后，根据所述父组件、所述子组件和所述模板文件加载并显示切换后页面。

也即，在点击切换按钮并发送页面切换指令之前，已经在所述模板文件中将所述父组件与所述子组件之间的绑定关系，所述子组件的显示和排布形式预先配置好，同时组件数据也已在此前填充至所述父组件之后，由所述父组件传输至子组件；因此，在点击切换按钮并发送页面切换指令之时，仅需要根据切换指令中包含的所述模板文件(第一模板或第二模板)将加载所述切换后页面即可，可理解的，所述页面切换指令中包含的所述模板文件是第一模板还是第二模板，可以根据此前接收的页面加载指令中的模板文件的种类来进行判定，也即，若此前接收的页面加载指令中的模板文件的种类为第一模板，则所述页面切换指令中包含的模板文件种类即为第二模板；同理，若此前接收的页面加载指令中的模板文件的种类为第二模板，则所述页面切换指令中包含的模板文件种类即为第一模板。

在根据所述模板文件加载所述切换后页面之后，调用html和css重新渲染切换后页面并显示切换后页面，实现与第一模板和第二模板分别对应的页面效果的切换。

应理解，上述实施例中各步骤的序号的大小并不意味着执行顺序的先后，各过程的执行顺序应以其功能和内在逻辑确定，而不应对本发明实施例的实施过程构成任何限定。

在一实施例中，如图7所示，提供一种图片列表展现装置，该图片列表展现装置与上述实施例中图片列表展现方法一一对应。该图片列表展现装置包括：

配置模块110，用于配置待显示页面的父组件、子组件和模板文件；其中，所述模板文件包括第一模板和第二模板；

调取模块120，用于自数据库中调取组件数据；其中，所述组件数据包括人员标识、人脸图像、人员备注信息、查看模块、编辑模块和删除模块；

传输模块130，用于将所述组件数据填充至所述父组件，并令所述父组件将所述组件数据按照预设规则传输至所述子组件中；

加载模块140，用于根据所述父组件、所述子组件和所述模板文件加载所述待显示页面。

在一实施例中，如图8所示，所述配置模块110包括：

第一配置子模块111，用于通过angularjs配置所述待显示页面的所述父组件、与所述父组件通信连接的多个所述子组件；

第二配置子模块112，用于通过angularjs配置所述待显示页面的所述模板文件；所述模板文件包括可相互切换的所述第一模板和所述第二模板。

关于图片列表展现装置的具体限定可以参见上文中对于图片列表展现方法的限定，在此不再赘述。上述图片列表展现装置中的各个模块可全部或部分通过软件、硬件及其组合来实现。上述各模块可以硬件形式内嵌于或独立于计算机设备中的处理器中，也可以以软件形式存储于计算机设备中的存储器中，以便于处理器调用执行以上各个模块对应的操作。

在一个实施例中，提供了一种计算机设备，该计算机设备可以是服务器，其内部结构图可以如图9所示。该计算机设备包括通过系统总线连接的处理器、存储器、网络接口和数据库。其中，该计算机设备的处理器用于提供计算和控制能力。该计算机设备的存储器包括非易失性存储介质、内存储器。该非易失性存储介质存储有操作系统、计算机程序和数据库。该内存储器为非易失性存储介质中的操作系统和计算机程序的运行提供环境。该计算机设备的网络接口用于与外部的终端通过网络连接通信。该计算机程序被处理器执行时以实现一种图片列表展现方法。

在一个实施例中，提供了一种计算机设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，处理器执行计算机程序时实现以下步骤：

配置待显示页面的父组件、子组件和模板文件；其中，所述模板文件包括第一模板和第二模板；自数据库中调取组件数据；其中，所述组件数据包括人员标识、人脸图像、人员备注信息、查看模块、编辑模块和删除模块；将所述组件数据填充至所述父组件，并令所述父组件将所述组件数据按照预设规则传输至所述子组件中；根据所述父组件、所述子组件和所述模板文件加载并显示所述待显示页面。

在一个实施例中，提供了一种计算机可读存储介质，其上存储有计算机程序，计算机程序被处理器执行时实现以下步骤：

配置待显示页面的父组件、子组件和模板文件；其中，所述模板文件包括第一模板和第二模板；自数据库中调取组件数据；其中，所述组件数据包括人员标识、人脸图像、人员备注信息、查看模块、编辑模块和删除模块；将所述组件数据填充至所述父组件，并令所述父组件将所述组件数据按照预设规则传输至所述子组件中；根据所述父组件、所述子组件和所述模板文件加载并显示所述待显示页面。

本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机程序来指令相关的硬件来完成，所述的计算机程序可存储于一非易失性计算机可读取存储介质中，该计算机程序在执行时，可包括如上述各方法的实施例的流程。其中，本发明所提供的各实施例中所使用的对存储器、存储、数据库或其它介质的任何引用，均可包括非易失性和/或易失性存储器。非易失性存储器可包括只读存储器(rom)、可编程rom(prom)、电可编程rom(eprom)、电可擦除可编程rom(eeprom)或闪存。易失性存储器可包括随机存取存储器(ram)或者外部高速缓冲存储器。作为说明而非局限，ram以多种形式可得，诸如静态ram(sram)、动态ram(dram)、同步dram(sdram)、双数据率sdram(ddrsdram)、增强型sdram(esdram)、同步链路(synchlink)dram(sldram)、存储器总线(rambus)直接ram(rdram)、直接存储器总线动态ram(drdram)、以及存储器总线动态ram(rdram)等。

所属领域的技术人员可以清楚地了解到，为了描述的方便和简洁，仅以上述各功能单元、模块的划分进行举例说明，实际应用中，可以根据需要而将上述功能分配由不同的功能单元、模块完成，即将所述装置的内部结构划分成不同的功能单元或模块，以完成以上描述的全部或者部分功能。

以上所述实施例仅说明本发明的技术方案，而非对其限制；尽管参照前述实施例对本发明进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本发明各实施例技术方案的精神和范围，均应包含在本发明的保护范围之内。