WO2020024385A1 - 图片列表展现方法、装置、终端设备及存储介质 - Google Patents

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

Info

Publication number
WO2020024385A1
WO2020024385A1 PCT/CN2018/106221 CN2018106221W WO2020024385A1 WO 2020024385 A1 WO2020024385 A1 WO 2020024385A1 CN 2018106221 W CN2018106221 W CN 2018106221W WO 2020024385 A1 WO2020024385 A1 WO 2020024385A1
Authority
WO
WIPO (PCT)
Prior art keywords
page
template
component
template file
displayed
Prior art date
Application number
PCT/CN2018/106221
Other languages
English (en)
French (fr)
Inventor
范凯益
陈凯强
Original Assignee
平安科技（深圳）有限公司
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 平安科技（深圳）有限公司 filed Critical 平安科技（深圳）有限公司
Publication of WO2020024385A1 publication Critical patent/WO2020024385A1/zh

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00—Arrangements for program control, e.g. control units
    • G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44—Arrangements for executing specific programs
    • G06F9/451—Execution arrangements for user interfaces

Definitions

  • the parent component can listen to the event triggered by the child component (for example, when the user clicks the edit or delete picture button corresponding to a child component, the corresponding event of the child component is triggered), and after the child component triggers the event, Receive the updated component data (such as the component data of the edited subcomponent, the component information of the deleted subcomponent) sent by the subcomponent, and store the updated component data in the database corresponding to the subcomponent position.
  • the updated component data such as the component data of the edited subcomponent, the component information of the deleted subcomponent
  • the template file includes a first template and a second template that can be switched with each other; understandably, the template file sets a binding relationship between the parent component and a child component, and a display position, size, shape, and the like of the child component Page display effect.
  • S1022 arranging the face image in each of the sub-components at a target position of the face image in the area; wherein the size of the target position of the face image and the like are set according to requirements, and preferably set at The uppermost or middle position in the area, and the target position of the face image accounts for 1/2 to 1 of the area; that is, in this embodiment, the belonging of one of the sub-components In the area, the face image of each person is arranged at the most prominent position, such as the uppermost position, the middle position, and the like; and the size of the displayed face image occupies more than half the size of the area, so that This allows the user to identify the person through the face image.
  • the loading module 140 is further configured to determine that the template file included in the page loading instruction is the first template or the second template, and according to the parent component, the child The component and the template file load the page to be displayed.

Landscapes

  • Engineering & Computer Science (AREA)
  • Software Systems (AREA)
  • Theoretical Computer Science (AREA)
  • Human Computer Interaction (AREA)
  • Physics & Mathematics (AREA)
  • General Engineering & Computer Science (AREA)
  • General Physics & Mathematics (AREA)
  • User Interface Of Digital Computer (AREA)
  • Information Transfer Between Computers (AREA)

Abstract

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

Description

图片列表展现方法、装置、终端设备及存储介质
本申请以2018年8月1日提交的申请号为201810861628.9，名称为“图片列表展现方法、装置、终端设备及存储介质”的中国发明专利申请为基础，并要求其优先权。
技术领域
本申请涉及网页领域，尤其涉及一种图片列表展现方法、装置、终端设备及存储介质。
背景技术
目前，在网页中对包含图形的信息进行大批量展示时，通常都是在列表中一行行进行展示，且每行中均包含图片和文字说明。该方案的不足之处在于：通过包含图片和文字说明的列表来进行大批量展示，其表达方式太过单一，且大段的文字说明也完全不能达到吸引用户的眼球和查看欲望的目的；同时，列表所对应的前后链接的网页可能包含有相似的需大批量展示的元素，此时，在网页跳转至链接页面之后，仍然以相似或相同的列表形式进行展示，会让用户产生是否跳转了页面的疑问，其用户体验不好。
发明内容
本申请实施例提供了一种图片列表展现方法、装置、终端设备及存储介质，以解决当前在网页的页面上通过列表来区分不同的相似信息(比如人员)导致可辨识度低的问题。
第一方面，本申请案例提供一种图片列表展现方法，包括：
配置待显示页面的父组件、子组件和模板文件；其中，所述模板文件包括第一模板和第二模板；
接收页面加载指令，自数据库中调取组件数据；其中，所述组件数据包括人员标识、人脸图像、人员备注信息、查看模块、编辑模块和删除模块；
将所述组件数据填充至所述父组件，并令所述父组件将所述组件数据按照预设规则传输至所述子组件中；
根据所述父组件、所述子组件和所述模板文件加载所述待显示页面。
第二方面，本申请实例提供一种图片列表展现装置，包括：
配置模块，用于配置待显示页面的父组件、子组件和模板文件；其中，所述模板文件包括第一模板和第二模板；
调取模块，用于自数据库中调取组件数据；其中，所述组件数据包括人员标识、人脸图像、人员备注信息、查看模块、编辑模块和删除模块；
传输模块，用于将所述组件数据填充至所述父组件，并令所述父组件将所述组件数据按照预设规则传输至所述子组件中；
加载模块，用于根据所述父组件、所述子组件和所述模板文件加载所述待显示页面。
第三方面，本申请实例提供一种终端设备，包括存储器、处理器以及存储在所述存储器中并可在所述处理器上运行的计算机可读指令，所述处理器执行所述计算机可读指令时实现如下步骤：
配置待显示页面的父组件、子组件和模板文件；其中，所述模板文件包括第一模板和第二模板；
自数据库中调取组件数据；其中，所述组件数据包括人员标识、人脸图像、人员备注信息、查看模块、编辑模块和删除模块；
将所述组件数据填充至所述父组件，并令所述父组件将所述组件数据按照预设规则传输至所述子组件中；
根据所述父组件、所述子组件和所述模板文件加载并显示所述待显示页面。
第四方面，本申请实例提供一个或多个存储有计算机可读指令的非易失性可读存储介质，其特征在于，所述计算机可读指令被一个或多个处理器执行时，使得所述一个或多个处理器执行如下步骤：
配置待显示页面的父组件、子组件和模板文件；其中，所述模板文件包括第一模板和第二模板；
自数据库中调取组件数据；其中，所述组件数据包括人员标识、人脸图像、人员备注信息、查看模块、编辑模块和删除模块；
将所述组件数据填充至所述父组件，并令所述父组件将所述组件数据按照预设规则传输至所述子组件中；
根据所述父组件、所述子组件和所述模板文件加载并显示所述待显示页面。
本申请的一个或多个实施例的细节在下面的附图和描述中提出，本申请的其他特征和优点将从说明书、附图以及权利要求变得明显。
附图说明
为了更清楚地说明本申请实施例的技术方案，下面将对本申请实施例的描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本申请的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动性的前提下，还可以根据这些附图获得其他的附图。
图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(Hyper Text Markup Language，超级文本标记语言)和CSS(Cascading Style Sheets，层叠样式表)进行页面渲染之后，显示待显示页面，也即，以所述页面加载指令中包含的模板文件(第一模板或第二模板)中配置的子组件的数量、显示和排布形式，将各子组件对应的人员的组件数据(比如，该人员的人脸图像、人员备注信息和查看、编辑、删除按钮)显示在待显示页面。
本实施例的图片列表展现方法，在显示的页面的过程中，将显示多个相似信息(比如人员信息)的区域配置为利用图像(比如人脸图像)的不同来区分不同人员，而不是通过列表中的文字(比如名称)不同来进行区分，从而使得各相似元素的可辨识度得到提升；同时，显示页面通过图像来进行区分，在相同类型的页面跳转之后，其页面的展示内容的差别远大于文字内容的差别，可令用户对页面跳转的感知程度增强；同时，页面上更多地以图像形式进行显示，增强了用户对待显示页面的操作兴趣；同时，在特定情况下，亦可切换其页面中的相似信息显示形式，以满足不同用户需求，大大提升了用户体验。可理解的，本申请可应用于页面中多个的相似信息显示场景，包括人员、设备等。
在一实施例中，如图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配置所述待显示页面的所述模板文件；所述模板文件包括可相互切换的所述第一模板和所述第二模板。
在一实施例中，在所述模板文件为所述第一模板时，所述第二配置子模块112还用于将各所述子组件配置在页面中按照预设间距间隔的多个相同大小的区域中；将各所述子组件中的人脸图像配置在所述区域中的人脸图像的目标位置；将各所述子组件中的人员备注信息配置在所述区域中的人脸图像的下方或上方，且所述人员备注信息的字体显示颜色比所述待显示页面中的其他字体的显示颜色浅；将各所述子组件中的查看模块、编辑模块和删除模块配置在所述区域中人脸图像的下方，且三者间距相等、大小相同且排布在同一行。
在一实施例中，在所述模板文件为所述第二模板时，所述第二配置子模块112还用于将各所述子组件配置为以列表形式排布在页面中的预设表格中；将各所述子组件中的人脸图像、人员备注信息、查看模块、编辑模块和删除模块配置在所述表格中的同一行。
在一实施例中，所述加载模块140还用于确定所述页面加载指令中包含的所述模板文件为所述第一模板或所述第二模板，并根据所述父组件、所述子组件和所述模板文件加载所述待显示页面。
在一实施例中，所述装置还用于接收页面切换指令，获取所述切换指令中包含的已配置的所述模板文件，并确定所述模板文件为所述第一模板或所述第二模板之后，根据所述父组件、所述子组件和所述模板文件加载并显示切换后页面。
关于图片列表展现装置的具体限定可以参见上文中对于图片列表展现方法的限定，在此不再赘述。上述图片列表展现装置中的各个模块可全部或部分通过软件、硬件及其组合来实现。上述各模块可以硬件形式内嵌于或独立于终端设备中的处理器中，也可以以软件形式存储于终端设备中的存储器中，以便于处理器调用执行以上各个模块对应的操作。
在一个实施例中，提供了一种终端设备(计算机设备)，该终端设备可以是服务器，其内部结构图可以如图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)等。
所属领域的技术人员可以清楚地了解到，为了描述的方便和简洁，仅以上述各功能单元、模块的划分进行举例说明，实际应用中，可以根据需要而将上述功能分配由不同的功能单元、模块完成，即将所述装置的内部结构划分成不同的功能单元或模块，以完成以上描述的全部或者部分功能。
以上所述实施例仅说明本申请的技术方案，而非对其限制；尽管参照前述实施例对本申请进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本申请各实施例技术方案的精神和范围，均应包含在本申请的保护范围之内。

Claims (20)

  1. 一种图片列表展现方法，其特征在于，包括：
    配置待显示页面的父组件、子组件和模板文件；其中，所述模板文件包括第一模板和第二模板；
    自数据库中调取组件数据；其中，所述组件数据包括人员标识、人脸图像、人员备注信息、查看模块、编辑模块和删除模块；
    将所述组件数据填充至所述父组件，并令所述父组件将所述组件数据按照预设规则传输至所述子组件中；
    根据所述父组件、所述子组件和所述模板文件加载并显示所述待显示页面。
  2. 如权利要求1所述的图片列表展现方法，其特征在于，所述配置待显示页面的父组件、子组件和模板文件，包括：
    通过angularJS配置所述待显示页面的所述父组件、与所述父组件通信连接的多个所述子组件；
    通过angularJS配置所述待显示页面的所述模板文件；所述模板文件包括可相互切换的所述第一模板和所述第二模板。
  3. 如权利要求2所述的图片列表展现方法，其特征在于，在所述模板文件为所述第一模板时，所述通过angularJS配置所述待显示页面的所述模板文件，包括：
    将各所述子组件配置在页面中按照预设间距间隔的多个相同大小的区域中；
    将各所述子组件中的人脸图像配置在所述区域中的人脸图像的目标位置；
    将各所述子组件中的人员备注信息配置在所述区域中的人脸图像的下方或上方，且所述人员备注信息的字体显示颜色比所述待显示页面中的其他字体的显示颜色浅；
    将各所述子组件中的查看模块、编辑模块和删除模块配置在所述区域中人脸图像的下方，且三者间距相等、大小相同且排布在同一行。
  4. 如权利要求2所述的图片列表展现方法，其特征在于，在所述模板文件为所述第二模板时，所述通过angularJS配置所述待显示页面的所述模板文件，包括：
    将各所述子组件配置为以列表形式排布在页面中的预设表格中；
    将各所述子组件中的人脸图像、人员备注信息、查看模块、编辑模块和删除模块配置在所述表格中的同一行。
  5. 如权利要求1所述的图片列表展现方法，其特征在于，所述根据所述父组件、所述 子组件和所述模板文件加载并显示所述待显示页面，包括：
    确定所述页面加载指令中包含的所述模板文件为所述第一模板或所述第二模板，并根据所述父组件、所述子组件和所述模板文件加载所述待显示页面。
  6. 如权利要求1所述的图片列表展现方法，其特征在于，所述根据所述父组件、所述子组件和所述模板文件加载并显示所述待显示页面之后，包括：
    接收页面切换指令，获取所述切换指令中包含的已配置的所述模板文件，并确定所述模板文件为所述第一模板或所述第二模板之后，根据所述父组件、所述子组件和所述模板文件加载并显示切换后页面。
  7. 一种图片列表展现装置，其特征在于，包括：
    配置模块，用于配置待显示页面的父组件、子组件和模板文件；其中，所述模板文件包括第一模板和第二模板；
    调取模块，用于自数据库中调取组件数据；其中，所述组件数据包括人员标识、人脸图像、人员备注信息、查看模块、编辑模块和删除模块；
    传输模块，用于将所述组件数据填充至所述父组件，并令所述父组件将所述组件数据按照预设规则传输至所述子组件中；
    加载模块，用于根据所述父组件、所述子组件和所述模板文件加载所述待显示页面。
  8. 如权利7所述的图片列表展现装置，其特征在于，所述配置模块包括：
    第一配置子模块，用于通过angularJS配置所述待显示页面的所述父组件、与所述父组件通信连接的多个所述子组件；
    第二配置子模块，用于通过angularJS配置所述待显示页面的所述模板文件；所述模板文件包括可相互切换的所述第一模板和所述第二模板。
  9. 如权利8所述的图片列表展现装置，其特征在于，在所述模板文件为所述第一模板时，所述第二配置子模块还用于将各所述子组件配置在页面中按照预设间距间隔的多个相同大小的区域中；将各所述子组件中的人脸图像配置在所述区域中的人脸图像的目标位置；将各所述子组件中的人员备注信息配置在所述区域中的人脸图像的下方或上方，且所述人员备注信息的字体显示颜色比所述待显示页面中的其他字体的显示颜色浅；将各所述子组件中的查看模块、编辑模块和删除模块配置在所述区域中人脸图像的下方，且三者间距相等、大小相同且排布在同一行。
  10. 如权利8所述的图片列表展现装置，其特征在于，在所述模板文件为所述第二模板时，所述第二配置子模块还用于将各所述子组件配置为以列表形式排布在页面中的预设 表格中；将各所述子组件中的人脸图像、人员备注信息、查看模块、编辑模块和删除模块配置在所述表格中的同一行。
  11. 如权利7所述的图片列表展现装置，其特征在于，所述加载模块还用于确定所述页面加载指令中包含的所述模板文件为所述第一模板或所述第二模板，并根据所述父组件、所述子组件和所述模板文件加载所述待显示页面。
  12. 如权利7所述的图片列表展现装置，其特征在于，所述装置还用于接收页面切换指令，获取所述切换指令中包含的已配置的所述模板文件，并确定所述模板文件为所述第一模板或所述第二模板之后，根据所述父组件、所述子组件和所述模板文件加载并显示切换后页面。
  13. 一种终端设备，包括存储器、处理器以及存储在所述存储器中并可在所述处理器上运行的计算机可读指令，其特征在于，所述处理器执行所述计算机可读指令时实现如下步骤：
    配置待显示页面的父组件、子组件和模板文件；其中，所述模板文件包括第一模板和第二模板；
    自数据库中调取组件数据；其中，所述组件数据包括人员标识、人脸图像、人员备注信息、查看模块、编辑模块和删除模块；
    将所述组件数据填充至所述父组件，并令所述父组件将所述组件数据按照预设规则传输至所述子组件中；
    根据所述父组件、所述子组件和所述模板文件加载并显示所述待显示页面。
  14. 如权利要求13所述的终端设备，其特征在于，所述配置待显示页面的父组件、子组件和模板文件，包括：
    通过angularJS配置所述待显示页面的所述父组件、与所述父组件通信连接的多个所述子组件；
    通过angularJS配置所述待显示页面的所述模板文件；所述模板文件包括可相互切换的所述第一模板和所述第二模板。
  15. 如权利要求14所述的终端设备，其特征在于，在所述模板文件为所述第一模板时，所述通过angularJS配置所述待显示页面的所述模板文件，包括：
    将各所述子组件配置在页面中按照预设间距间隔的多个相同大小的区域中；
    将各所述子组件中的人脸图像配置在所述区域中的人脸图像的目标位置；
    将各所述子组件中的人员备注信息配置在所述区域中的人脸图像的下方或上方，且所 述人员备注信息的字体显示颜色比所述待显示页面中的其他字体的显示颜色浅；
    将各所述子组件中的查看模块、编辑模块和删除模块配置在所述区域中人脸图像的下方，且三者间距相等、大小相同且排布在同一行。
  16. 如权利要求14所述的终端设备，其特征在于，所述根据所述父组件、所述子组件和所述模板文件加载并显示所述待显示页面，包括：
    确定所述页面加载指令中包含的所述模板文件为所述第一模板或所述第二模板，并根据所述父组件、所述子组件和所述模板文件加载所述待显示页面。
  17. 一个或多个存储有计算机可读指令的非易失性可读存储介质，其特征在于，所述计算机可读指令被一个或多个处理器执行时，使得所述一个或多个处理器执行如下步骤：
    配置待显示页面的父组件、子组件和模板文件；其中，所述模板文件包括第一模板和第二模板；
    自数据库中调取组件数据；其中，所述组件数据包括人员标识、人脸图像、人员备注信息、查看模块、编辑模块和删除模块；
    将所述组件数据填充至所述父组件，并令所述父组件将所述组件数据按照预设规则传输至所述子组件中；
    根据所述父组件、所述子组件和所述模板文件加载并显示所述待显示页面。
  18. 如权利要求17所述的非易失性可读存储介质，其特征在于，所述配置待显示页面的父组件、子组件和模板文件，包括：
    通过angularJS配置所述待显示页面的所述父组件、与所述父组件通信连接的多个所述子组件；
    通过angularJS配置所述待显示页面的所述模板文件；所述模板文件包括可相互切换的所述第一模板和所述第二模板。
  19. 如权利要求18所述的非易失性可读存储介质，其特征在于，在所述模板文件为所述第一模板时，所述通过angularJS配置所述待显示页面的所述模板文件，包括：
    将各所述子组件配置在页面中按照预设间距间隔的多个相同大小的区域中；
    将各所述子组件中的人脸图像配置在所述区域中的人脸图像的目标位置；
    将各所述子组件中的人员备注信息配置在所述区域中的人脸图像的下方或上方，且所述人员备注信息的字体显示颜色比所述待显示页面中的其他字体的显示颜色浅；
    将各所述子组件中的查看模块、编辑模块和删除模块配置在所述区域中人脸图像的下方，且三者间距相等、大小相同且排布在同一行。
  20. 如权利要求18所述的非易失性可读存储介质，其特征在于，在所述模板文件为所述第二模板时，所述通过angularJS配置所述待显示页面的所述模板文件，包括：
    将各所述子组件配置为以列表形式排布在页面中的预设表格中；
    将各所述子组件中的人脸图像、人员备注信息、查看模块、编辑模块和删除模块配置在所述表格中的同一行。
PCT/CN2018/106221 2018-08-01 2018-09-18 图片列表展现方法、装置、终端设备及存储介质 WO2020024385A1 (zh)

Applications Claiming Priority (2)

Application Number Priority Date Filing Date Title
CN201810861628.9 2018-08-01
CN201810861628.9A CN109343915A (zh) 2018-08-01 2018-08-01 图片列表展现方法、装置、终端设备及存储介质

Publications (1)

Publication Number Publication Date
WO2020024385A1 true WO2020024385A1 (zh) 2020-02-06

Family

ID=65291493

Family Applications (1)

Application Number Title Priority Date Filing Date
PCT/CN2018/106221 WO2020024385A1 (zh) 2018-08-01 2018-09-18 图片列表展现方法、装置、终端设备及存储介质

Country Status (2)

Country Link
CN (1) CN109343915A (zh)
WO (1) WO2020024385A1 (zh)

Families Citing this family (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN113761830A (zh) * 2020-06-02 2021-12-07 青岛奥利普自动化控制系统有限公司 数据展示方法、装置、系统和存储介质
CN113687872B (zh) * 2021-07-19 2024-03-29 三六零数字安全科技集团有限公司 选择组件控制方法、设备、存储介质及装置

Citations (7)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20120047199A1 (en) * 2010-08-19 2012-02-23 Zakir Patrawala Systems, computer program products, and methods for generating custom web pages for mobile devices
CN103365855A (zh) * 2012-03-28 2013-10-23 腾讯科技（深圳）有限公司 生成网页的方法及服务器
CN104424266A (zh) * 2013-08-29 2015-03-18 北大方正集团有限公司 网页发布方法及系统
CN105740219A (zh) * 2016-01-29 2016-07-06 浪潮软件集团有限公司 一种报表的自定义方法及装置
CN106126683A (zh) * 2016-06-29 2016-11-16 青岛海信传媒网络技术有限公司 页面显示方法及终端设备
CN106302008A (zh) * 2016-08-05 2017-01-04 腾讯科技（深圳）有限公司 数据更新方法和装置
CN107608686A (zh) * 2016-07-11 2018-01-19 北京京东尚科信息技术有限公司 一种更新组件列表数据的方法和系统

Family Cites Families (8)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN102479224A (zh) * 2010-11-23 2012-05-30 腾讯科技（深圳）有限公司 一种编辑应用网页的方法及应用网页编辑装置
KR101921201B1 (ko) * 2012-05-17 2018-11-22 삼성전자 주식회사 단말기의 기능 연동 방법 및 이를 지원하는 단말기
CN104267951B (zh) * 2014-09-25 2018-01-12 福建星网视易信息系统有限公司 一种用于实现自定义图形用户界面的方法及装置
CN106919410A (zh) * 2015-12-25 2017-07-04 阿里巴巴集团控股有限公司 组件的布局模板的扩展方法和装置
CN106354496A (zh) * 2016-08-25 2017-01-25 成都索贝数码科技股份有限公司 一种应用于融合媒体行业数据新闻的快速编辑系统和编辑方法
CN108108194B (zh) * 2016-11-24 2020-12-04 腾讯科技（深圳）有限公司 用户界面编辑方法以及用户界面编辑器
CN107894887B (zh) * 2017-06-25 2021-02-09 平安科技（深圳）有限公司 页面组件化方法、装置及计算机可读存储介质
CN107678745B (zh) * 2017-09-25 2021-04-13 南京中新赛克科技有限责任公司 基于页面组件化的系统和方法

Patent Citations (7)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20120047199A1 (en) * 2010-08-19 2012-02-23 Zakir Patrawala Systems, computer program products, and methods for generating custom web pages for mobile devices
CN103365855A (zh) * 2012-03-28 2013-10-23 腾讯科技（深圳）有限公司 生成网页的方法及服务器
CN104424266A (zh) * 2013-08-29 2015-03-18 北大方正集团有限公司 网页发布方法及系统
CN105740219A (zh) * 2016-01-29 2016-07-06 浪潮软件集团有限公司 一种报表的自定义方法及装置
CN106126683A (zh) * 2016-06-29 2016-11-16 青岛海信传媒网络技术有限公司 页面显示方法及终端设备
CN107608686A (zh) * 2016-07-11 2018-01-19 北京京东尚科信息技术有限公司 一种更新组件列表数据的方法和系统
CN106302008A (zh) * 2016-08-05 2017-01-04 腾讯科技（深圳）有限公司 数据更新方法和装置

Also Published As

Publication number Publication date
CN109343915A (zh) 2019-02-15

Similar Documents

Publication Publication Date Title
AU2020230268B2 (en) Systems and methods of generating a design based on a design template and another design
AU2013352236B2 (en) System and method for displaying multiple applications
US10068364B2 (en) Method and apparatus for making personalized dynamic emoticon
US10108326B2 (en) Modular responsive screen grid, authoring and displaying system
US9612730B2 (en) Viewing different window content with different attendees in desktop sharing
US20200195980A1 (en) Video information processing method, computer equipment and storage medium
US9418388B1 (en) Techniques for displaying third party content
US9002808B1 (en) Using a web application as the default handler of local content
US9881002B1 (en) Content localization
WO2020024385A1 (zh) 图片列表展现方法、装置、终端设备及存储介质
CN113253880A (zh) 互动场景的页面的处理方法、装置及存储介质
CN113076499A (zh) 一种页面互动方法、装置、设备、介质及程序产品
US9100340B2 (en) Robust filters for social networking environments
US10762275B2 (en) Information processing apparatus, method, and storage medium
US20230050263A1 (en) Systems and Methods of Generating a Website
KR20180057619A (ko) 휴대 단말에 푸시 통지를 행하기 위한 통지 방법 및 통지 서버
US10587674B1 (en) Systems and methods for controlling in which order elements of a set of displayable content are transferred via an online connection
CN112199090A (zh) 信息流处理方法、装置以及计算机可读存储介质
US10114805B1 (en) Inline address commands for content customization
CN110971632A (zh) 图片处理方法、系统、介质和计算机系统
KR102181579B1 (ko) 환자정보 스티커 서비스 제공방법 및 이를 위한 치과용 보험청구 시스템
US10776448B2 (en) Cell-based computing and website development platform
US20230325591A1 (en) Bundled and customizable documentation-viewer for application for increased asccessiblity
CN116263861A (zh) 信息处理方法及相关产品
CN116796712A (zh) 文档内容的显示方法、装置、设备、存储介质及程序产品

Legal Events

Date Code Title Description
NENP Non-entry into the national phase

Ref country code: DE

122 Ep: pct application non-entry in european phase

Ref document number: 18928576

Country of ref document: EP

Kind code of ref document: A1