前端页面设计方法和系统与流程

1.本公开设计网页设计技术领域，尤其是涉及一种前端页面设计方法和系统。


背景技术：

2.当前，前端开发人员需要使用一些现有的前端页面设计器工具来创建和编辑页面，这些工具根据拖拽组件的方法来提供页面设计功能。但是，这些工具仍然存在一些缺陷，如设计出来的前端页面不能根据用户标签精准展示内容。


技术实现要素：

3.本公开提供了一种前端页面设计方法和系统，以解决发明人认识到的前端页面不能根据用户标签精准展示内容的技术问题。
4.本公开提供了一种前端页面设计方法，包括：
5.根据预先确定的用户标签，获取至少一与所述用户标签对应的前端页面组件以及与所述用户标签对应的网页内容；
6.将所述网页内容加载至所述前端网页组件，完成前端网页的设计。
7.在上述任一技术方案中，进一步地，在所述根据预先确定的用户标签，获取至少一与所述用户标签对应的前端页面组件以及与所述用户标签对应的网页内容，之前，还包括：
8.获取saas平台运营端授权的前端网页设计项目；
9.对所述前端网页设计项目进行初始化设置。
10.在上述任一技术方案中，进一步地，还包括：
11.若设计的所述前端网页产生预设事件，则基于规则引擎对所述前端网页进行规则匹配。
12.在上述任一技术方案中，进一步地，所述基于规则引擎对所述前端网页进行规则匹配，包括：
13.所述规则引擎基于前向规则快速匹配算法对所述前端网页进行规则匹配，从预设的事件规则映射关系中确定与所述预设事件对应的规则，并执行与所述预设事件对应规则的操作。
14.在上述任一技术方案中，进一步地，还包括：
15.获取用户对所述前端网页的历史浏览信息和用户的历史用户标签；
16.根据所述历史浏览信息和所述历史用户标签，基于深度学习算法训练得到用户标签推荐模型；
17.将用户对所述前端网页的浏览信息输入所述用户标签推荐模型，得到所述用户标签推荐模型输出的推荐用户标签；
18.根据所述推荐用户标签，更新所述前端网页显示的所述网页内容。
19.在上述任一技术方案中，进一步地，还包括：
20.所述前端网页设计完成后，若保存所述前端网页，则将所述前端网页对应的所述
前端网页组件以及所述前端网页与所述网页内容的对应关系存储至saas系统；若发布所述前端网页，则将所述前端网页对应的所述前端网页组件以及所述前端网页与所述网页内容的对应关系转换为代码，通过所述saas系统发布至预设服务器。
21.本公开还提供了一种前端页面设计系统，包括前端网页设计器；
22.所述前端网页设计器用于根据预先确定的用户标签，获取至少一与所述用户标签对应的前端页面组件以及与所述用户标签对应的网页内容；将所述网页内容加载至所述前端网页组件，完成前端网页的设计。
23.在上述任一技术方案中，进一步地，还包括saas平台运营端；
24.所述saas平台运营端用于创建并授权前端网页设计项目，以便所述前端网页设计器为所述前端网页设计项目设计前端网页。
25.在上述任一技术方案中，进一步地，还包括后端网页管理器；
26.所述后端网页管理器用于存储和管理与所述用户标签对应的网页内容。
27.本公开还提供了一种电子设备，包括存储器、处理器及存储在所述存储器上并可在所述处理器上运行的计算机程序，其特征在于，所述处理器执行所述程序时实现所述前端页面设计方法。
28.本公开的有益效果主要在于：
29.根据预先确定的用户标签，获取至少一与所述用户标签对应的前端页面组件以及与所述用户标签对应的网页内容；将所述网页内容加载至所述前端网页组件，完成前端网页的设计，可以根据用户标签精准展示内容，提高用户体验。
30.应当理解，前述的一般描述和接下来的具体实施方式两者均是为了举例和说明的目的并且未必限制本公开。并入并构成说明书的一部分的附图示出本公开的主题。同时，说明书和附图用来解释本公开的原理。
附图说明
31.为了更清楚地说明本公开具体实施方式或现有技术中的技术方案，下面将对具体实施方式或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图是本公开的一些实施方式，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。
32.图1为本公开实施例提供的前端页面设计方法的流程示意图之一；
33.图2为本公开实施例提供的前端页面设计方法的流程示意图之二；
34.图3为本公开实施例提供的前端页面设计方法的流程示意图之三；
35.图4为本公开实施例提供的前端页面设计系统的原理框图。
具体实施方式
36.下面将结合附图对本公开的技术方案进行清楚、完整地描述，显然，所描述的实施例是本公开一部分实施例，而不是全部的实施例。
37.基于本公开中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本公开保护的范围。
38.在本公开的描述中，需要说明的是，术语“中心”、“上”、“下”、“左”、“右”、“竖直”、“水平”、“内”、“外”等指示的方位或位置关系为基于附图所示的方位或位置关系，仅是为了便于描述本公开和简化描述，而不是指示或暗示所指的装置或元件必须具有特定的方位、以特定的方位构造和操作，因此不能理解为对本公开的限制。此外，术语“第一”、“第二”、“第三”仅用于描述目的，而不能理解为指示或暗示相对重要性。
39.在本公开的描述中，需要说明的是，除非另有明确的规定和限定，术语“安装”、“相连”、“连接”应做广义理解，例如，可以是固定连接，也可以是可拆卸连接，或一体地连接；可以是机械连接，也可以是电连接；可以是直接相连，也可以通过中间媒介间接相连，可以是两个元件内部的连通。对于本领域的普通技术人员而言，可以具体情况理解上述术语在本公开中的具体含义。
40.图1为本公开实施例提供的前端页面设计方法的流程示意图之一，如图1所示，本公开提供了一种前端页面设计方法，包括：
41.s110，根据预先确定的用户标签，获取至少一与所述用户标签对应的前端页面组件以及与所述用户标签对应的网页内容；
42.s120，将所述网页内容加载至所述前端网页组件，完成前端网页的设计。
43.前端网页的设计在可视化设计界面上进行，可使用拖拽组件的方法进行页面设计和编辑，支持对页面内容进行保存、预览、发布等管理功能，使用低无代码的编辑方式，让无开发经验的业务人员可快速创建和部署前端应用，节省了专业开发人员的时间和成本，提高了工作效率。
44.获取与所述用户标签对应的网页内容可以通过调用api接口来实现。
45.可以理解的是，本公开将所述网页内容加载至所述前端网页组件，完成前端网页的设计，可以根据用户标签精准展示内容，提高用户访问页面的准确性和效率。
46.图2为本公开实施例提供的前端页面设计方法的流程示意图之二，如图2所示，在上述任一技术方案中，进一步地，在所述根据预先确定的用户标签，获取至少一与所述用户标签对应的前端页面组件以及与所述用户标签对应的网页内容，之前，还包括：
47.s210，获取saas平台运营端授权的前端网页设计项目；
48.s220，对所述前端网页设计项目进行初始化设置。
49.saas平台提供电子商务、外部应用对接、安全服务、数据分析及报告、数据储存及备份等业务功能，为前端页面提供更加丰富的功能支持。
50.在设计前端网页之前需要saas平台运营方需要为有项目需求的业务方创建一个新的项目，并为项目进行必要参数的配置，包括但不限于项目名称、项目使用有效期、项目菜单/功能权限、并发资源上限、项目使用外部功能/api数据源能力权限、项目管理员账号配置等。部分参数决定该项目标签管理中，可以使用的标签管理功能以及外部数据源获取的范围。项目开通后，可为项目创建独立的数据仓库以及数据模型进行管理。
51.对所述前端网页设计项目进行初始化设置包括业务功能的设置，比如内部人员权限及账号、运营平台认证与授权配置，页面公共参数配置等。
52.在上述任一技术方案中，进一步地，本公开提供的前端页面设计方法还包括：
53.若设计的所述前端网页产生预设事件，则基于规则引擎对所述前端网页进行规则匹配。
54.具体的，所述基于规则引擎对所述前端网页进行规则匹配，包括：
55.所述规则引擎基于前向规则快速匹配算法对所述前端网页进行规则匹配，从预设的事件规则映射关系中确定与所述预设事件对应的规则，并执行与所述预设事件对应规则的操作。
56.规则引擎需要规定一个逻辑表达式，主要包括条件和结论两部分，通常表示为if-then形式。例如：ifaandbthen c，表示当满足a和b条件时，可以得出结论c。
57.对前端页面进行规则的匹配，通过前端页面判断一个事件的发生，触发规则引擎，比如是否点击某一前端网页组件，若是，则规则引擎会逐条匹配所有规则，找到满足条件的规则，并执行其结论。匹配规则时通常采用前向链接(forward-chaining)方法，即需要构建网状结构储存规则和事件，并建立它之间的关系，其中网状结构包含两层节点：条件节点和动作节点。
58.需要匹配规则时，采用rete算法，逐个匹配所有规则，找到所有满足条件的规则。匹配规则的过程从网络的根节点开始，按照从上到下、从左到右的顺序逐层匹配规则，并且会根据网络结构进行剪枝和缓存，避免重复匹配。匹配到规则后，rete算法会执行规则的结论部分，即根据规则的定义执行相关操作，例如发送页面弹窗、写入数据库等。如果事件满足某些规则的条件，rete算法会更新网络结构，删除不再需要的节点，并添加新的节点。这样可以避免重复匹配已匹配过的规则，提高算法效率。最后，重复以上步骤，直到所有满足条件的规则均被执行。
59.采用这种方式可提高业务流程的灵活性、可维护性、可扩展性、可测试性、可重复利用性，并设计了操作界面，用户可可视化编辑以及管理规则。
60.图3为本公开实施例提供的前端页面设计方法的流程示意图之三，如图3所示，在上述任一技术方案中，进一步地，本公开提供的前端页面设计方法还包括：
61.s310，获取用户对所述前端网页的历史浏览信息和用户的历史用户标签；
62.s320，根据所述历史浏览信息和所述历史用户标签，基于深度学习算法训练得到用户标签推荐模型；
63.s330，将用户对所述前端网页的浏览信息输入所述用户标签推荐模型，得到所述用户标签推荐模型输出的推荐用户标签；
64.s340，根据所述推荐用户标签，更新所述前端网页显示的所述网页内容。
65.本公开将基于循环神经网络(rnn)深度学习算法，对用户的历史行为和标签进行建模，它通过不断迭代同一组参数来处理序列中的每一个元素。在rnn中，每个元素会被处理为一个状态向量，这个向量包含了此前所有元素的信息，当前元素的状态向量会影响下一个元素的状态向量，在处理整个序列后，模型将会输出一个结果向量。其基本结构中，每个时间步的状态向量$h_t$依赖于上一个时间步的状态向量$h_{t-1}$和当前时间步的输入向量$x_t$:$$h_t＝f(h_{t-1},x_t)$$。从而实现页面中动态根据用户历史信息浏览、用户信息标签等方式为信息不断更新内容推荐。
66.在上述任一技术方案中，进一步地，本公开提供的前端页面设计方法还包括：
67.所述前端网页设计完成后，若保存所述前端网页，则将所述前端网页对应的所述前端网页组件以及所述前端网页与所述网页内容的对应关系存储至saas系统；若发布所述前端网页，则将所述前端网页对应的所述前端网页组件以及所述前端网页与所述网页内容的对应关系转换为代码，通过所述saas系统发布至预设服务器。
68.下面对本发明提供的前端页面设计系统进行描述，下文描述的前端页面设计系统与上文描述的前端页面设计方法可相互对应参照。
69.图4为本公开实施例提供的前端页面设计系统的原理框图，如图4所示，本公开还提供了一种前端页面设计系统，包括前端网页设计器410；
70.所述前端网页设计器410用于根据预先确定的用户标签，获取至少一与所述用户标签对应的前端页面组件以及与所述用户标签对应的网页内容；将所述网页内容加载至所述前端网页组件，完成前端网页的设计。
71.所述前端网页设计器410提供可视化界面，支持使用拖拽组件的方法进行页面设计和编辑，支持对页面内容进行保存、预览、发布等管理功能，系统使用低无代码的编辑方式，让无开发经验的业务人员可快速创建和部署前端应用，节省了专业开发人员的时间和成本，提高了工作效率。
72.本公开提供的一种前端页面设计系统还包括saas平台运营端420；所述saas平台运营端用于创建并授权前端网页设计项目，以便所述前端网页设计器为所述前端网页设计项目设计前端网页。
73.本公开提供的一种前端页面设计系统还包括后端网页管理器430；
74.所述后端网页管理器430用于存储和管理与所述用户标签对应的网页内容。后端网页管理器通过数据库或文件存储等方式来管理标签信息，即网页内容。
75.所述前端网页设计器410还用于将后端网页管理器的用户标签信息与前端页面关联，根据用户标签精准展示内容，提高用户访问页面的准确性和效率。同时，可通过循环神经网络(rnn)算法实现基于深度学习算法的标签推荐能力。
76.所述前端网页设计器410可选择用户标签进行信息查看、创建编辑、使用、更新方式等操作。
77.所述前端网页设计器410还用于提供丰富的组件库和模板库，用户可以轻松地进行组件的选择和组合，自由地进行页面设计和编辑。同时，设计器还支持使用工具自带编译器，编辑html、css、javascript等格式的代码，满足无开发经验的业务人员以及开发人员进行页面设计及轻量化前端代码编辑。
78.所述前端网页设计器410还用于使用数据源管理器中的链接选项连接到数据源，通过使用数据源和数据表中的字段进行信息展示，建立关联。支持通过采用协同过滤算法对用户标签进行筛选，实现个性化信息推荐。
79.本公开还提供了一种电子设备，包括存储器、处理器及存储在所述存储器上并可在所述处理器上运行的计算机程序，其特征在于，所述处理器执行所述程序时实现所述前端页面设计方法。
80.本公开还提供了一种电子设备，包括存储器、处理器及存储在所述存储器上并可在所述处理器上运行的计算机程序，所述处理器执行所述程序时实现所述前端页面设计方法，该方法包括：
81.根据预先确定的用户标签，获取至少一与所述用户标签对应的前端页面组件以及与所述用户标签对应的网页内容；
82.将所述网页内容加载至所述前端网页组件，完成前端网页的设计。
83.此外，上述的存储器中的逻辑指令可以通过软件功能单元的形式实现并作为独立
的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本公开的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本公开各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：u盘、移动硬盘、只读存储器(rom，read-onlymemory)、随机存取存储器(ram，randomaccessmemory)、磁碟或者光盘等各种可以存储程序代码的介质。
84.本公开还提供了一种非暂态计算机可读存储介质，其上存储有计算机程序，所述计算机程序被处理器执行时实现所述前端页面设计方法，该方法包括：
85.根据预先确定的用户标签，获取至少一与所述用户标签对应的前端页面组件以及与所述用户标签对应的网页内容；
86.将所述网页内容加载至所述前端网页组件，完成前端网页的设计。
87.又一方面，本公开还提供一种非暂态计算机可读存储介质，其上存储有计算机程序，该计算机程序被处理器执行时实现以执行上述各方法提供的所述前端页面设计方法，该方法包括：
88.根据预先确定的用户标签，获取至少一与所述用户标签对应的前端页面组件以及与所述用户标签对应的网页内容；
89.将所述网页内容加载至所述前端网页组件，完成前端网页的设计。
90.以上所描述的装置实施例仅仅是示意性的，其中所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部模块来实现本实施例方案的目的。本领域普通技术人员在不付出创造性的劳动的情况下，即可以理解并实施。
91.最后应说明的是：以上各实施例仅用以说明本公开的技术方案，而非对其限制；尽管参照前述各实施例对本公开进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分或者全部技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本公开各实施例技术方案的范围。

技术特征：
1.一种前端页面设计方法，其特征在于，包括：根据预先确定的用户标签，获取至少一与所述用户标签对应的前端页面组件以及与所述用户标签对应的网页内容；将所述网页内容加载至所述前端网页组件，完成前端网页的设计；完成前端网页设计之后，还包括：获取用户对所述前端网页的历史浏览信息和用户的历史用户标签；根据所述历史浏览信息和所述历史用户标签，基于深度学习算法训练得到用户标签推荐模型；将用户对所述前端网页的浏览信息输入所述用户标签推荐模型，得到所述用户标签推荐模型输出的推荐用户标签；根据所述推荐用户标签，更新所述前端网页显示的所述网页内容；基于深度学习算法训练得到用户标签推荐模型，包括：基于循环神经网络深度学习算法，对用户的历史行为和标签进行建模，通过不断迭代同一组参数来处理序列中的每一个元素；每个元素会被处理为一个状态向量，状态向量包含此前所有元素的信息，当前元素的状态向量会影响下一个元素的状态向量，在处理整个序列后，模型将会输出一个结果向量；其中，每个时间步的状态向量依赖于上一个时间步的状态向量和当前时间步的输入向量。2.根据权利要求1所述的前端页面设计方法，其特征在于，在所述根据预先确定的用户标签，获取至少一与所述用户标签对应的前端页面组件以及与所述用户标签对应的网页内容，之前，还包括：获取saas平台运营端授权的前端网页设计项目；对所述前端网页设计项目进行初始化设置。3.根据权利要求1所述的前端页面设计方法，其特征在于，还包括：若设计的所述前端网页产生预设事件，则基于规则引擎对所述前端网页进行规则匹配。4.根据权利要求3所述的前端页面设计方法，其特征在于，所述基于规则引擎对所述前端网页进行规则匹配，包括：所述规则引擎基于前向规则快速匹配算法对所述前端网页进行规则匹配，从预设的事件规则映射关系中确定与所述预设事件对应的规则，并执行与所述预设事件对应规则的操作。5.根据权利要求1所述的前端页面设计方法，其特征在于，还包括：所述前端网页设计完成后，若保存所述前端网页，则将所述前端网页对应的所述前端网页组件以及所述前端网页与所述网页内容的对应关系存储至saas系统；若发布所述前端网页，则将所述前端网页对应的所述前端网页组件以及所述前端网页与所述网页内容的对应关系转换为代码，通过所述saas系统发布至预设服务器。6.一种前端页面设计系统，其特征在于，包括前端网页设计器；所述前端网页设计器用于根据预先确定的用户标签，获取至少一与所述用户标签对应的前端页面组件以及与所述用户标签对应的网页内容；将所述网页内容加载至所述前端网
页组件，完成前端网页的设计；完成前端网页设计之后，还包括：获取用户对所述前端网页的历史浏览信息和用户的历史用户标签；根据所述历史浏览信息和所述历史用户标签，基于深度学习算法训练得到用户标签推荐模型；将用户对所述前端网页的浏览信息输入所述用户标签推荐模型，得到所述用户标签推荐模型输出的推荐用户标签；根据所述推荐用户标签，更新所述前端网页显示的所述网页内容；基于深度学习算法训练得到用户标签推荐模型，包括：基于循环神经网络深度学习算法，对用户的历史行为和标签进行建模，通过不断迭代同一组参数来处理序列中的每一个元素；每个元素会被处理为一个状态向量，状态向量包含此前所有元素的信息，当前元素的状态向量会影响下一个元素的状态向量，在处理整个序列后，模型将会输出一个结果向量；其中，每个时间步的状态向量依赖于上一个时间步的状态向量和当前时间步的输入向量。7.根据权利要求6所述的前端页面设计系统，其特征在于，还包括saas平台运营端；所述saas平台运营端用于创建并授权前端网页设计项目，以便所述前端网页设计器为所述前端网页设计项目设计前端网页。8.根据权利要求6所述的前端页面设计系统，其特征在于，还包括后端网页管理器；所述后端网页管理器用于存储和管理与所述用户标签对应的网页内容。9.一种电子设备，包括存储器、处理器及存储在所述存储器上并可在所述处理器上运行的计算机程序，其特征在于，所述处理器执行所述程序时实现如权利要求1至5任一项所述前端页面设计方法。

技术总结
本公开提供了一种前端页面设计方法和系统，涉及网页设计领域，包括：根据预先确定的用户标签，获取至少一与所述用户标签对应的前端页面组件以及与所述用户标签对应的网页内容；将所述网页内容加载至所述前端网页组件，完成前端网页的设计。本公开将所述网页内容加载至所述前端网页组件，完成前端网页的设计，可以根据用户标签精准展示内容，提高用户体验。提高用户体验。提高用户体验。


技术研发人员：黄嘉卓 王金聪
受保护的技术使用者：广州趣米网络科技有限公司
技术研发日：2023.07.03
技术公布日：2023/8/14