(19)国家知识产权局 (12)发明 专利 (10)授权公告 号 (45)授权公告日 (21)申请 号 202210152046.X (22)申请日 2022.02.18 (65)同一申请的已公布的文献号 申请公布号 CN 114489623 A (43)申请公布日 2022.05.13 (73)专利权人 北京立达政通科技 集团有限公司 地址 101312 北京市顺 义区天竺镇天竺家 园17号17幢2层279 2室 (72)发明人 娄元杰　马亮　赵岩　安静　 (74)专利代理 机构 北京市鼎立 东审知识产权代 理有限公司 1 1751 专利代理师 朱慧娟 (51)Int.Cl. G06F 8/34(2018.01) G06F 8/38(2018.01)G06F 3/0486(2013.01) G06F 9/451(2018.01) (56)对比文件 CN 111930370 A,2020.1 1.13 CN 113448569 A,2021.09.28 CN 112015501 A,2020.12.01 CN 111443911 A,2020.07.24 CN 112540763 A,2021.0 3.23 CN 112650966 A,2021.04.13 US 202017480 0 A1,2020.0 6.04 审查员 李婧 (54)发明名称 基于拖拽式生成前端页面的方法、 装置、 设 备和存储介质 (57)摘要 本公开提供了一种基于拖拽式生成前端页 面的方法、 装置、 设备和存储介质， 该方法包括： 在生成前端页面前， 先获取当前要生成前端页面 的属性信息， 该属性信息包括页面类型； 再根据 前端页面的属性信息加载并推送设计界面， 其 中， 推送的设计界面中包括设计区域和生成所述 页面类型的前端页面所需要的功能组件。 这样， 在生成前端页面时， 便可以在与前端页面的页面 类型相匹配的设计界面中， 高效地完成所需功能 组件的筛选和拖拽操作， 生成前端页面， 从而提 高前端页面的生成效率。 权利要求书2页 说明书11页 附图8页 CN 114489623 B 2022.11.04 CN 114489623 B 1.一种基于拖拽式生成前端页面的方法， 其特 征在于， 包括： 获取当前要生成的前端页面的属性信息； 所述属性信息包括页面类型； 根据所述属性信 息加载并推送设计界面； 所述设计界面中包括设计区域和生成所述页 面类型的前端页面所需要的功能组件； 监测当前被拖拽到所述设计区域的功能组件， 获取当前被触发的功能组件的拖拽信 息， 并基于所述 拖拽信息在所述设计区域 渲染当前被 触发的功能组件； 根据当前已被渲染到所述设计区域内的各功能组件， 生成相应的所述前端页面； 所述属性信息还 包括所述前端页面的显示终端； 在根据所述属性信息加载并推送设计界面时， 还 包括： 按照预先设置的与 所述显示终端相匹配的设计区划分规则， 对所述设计界面中的设计 区域进行划分， 其中， 与所述显示终端相匹配的设计区划分规则包括与所述显示终端分辨 率相匹配的设计区域的宽度、 设计区域中的子区域、 槽和边距的数量及宽度； 所述拖拽信息包括组件释放 位置； 在基于所述拖拽信 息在所述设计区域渲染当前被触发的功能组件时， 基于所述组件释 放位置以及根据所述设计区域划分规则在所述设计区域中划分出的子区域实现。 2.根据权利要求1所述的方法， 其特征在于， 所述页面类型包括首页、 列表页和表单页 中的至少一种。 3.根据权利要求1所述的方法， 其特征在于， 所述属性信 息基于触发的设计页面指令所 推送并显示的属性配置界面进行配置 。 4.根据权利要求1所述的方法， 其特征在于， 在基于所述组件释放位置以及根据 所述设 计区域划分规则在所述设计区域中划分出的子区域实现在所述设计区域渲染当前被触发 的功能组件时， 包括： 判断所述组件释放位置在所述设计区域中所位于的子区域内是否加载有所述功能组 件： 在未加载所述功能组件的情况下， 以所述子区域的最高点作为渲染起点； 在已加载所 述功能组件的情况下， 根据所述子区域的最高点以及已加载的所述功能组件的属性信息确 定渲染起 点； 基于所述渲染起点以及获取的当前被触发的功能组件的属性信 息， 在所述设计区域渲 染当前被 触发的功能组件。 5.根据权利要求1至4任一项所述的方法， 其特征在于， 在基于所述拖拽信息在所述设 计区域渲染当前被 触发的功能组件时， 还 包括： 在触发属性修改指令时， 推送并显示属性修改界面， 并基于所述属性修改界面， 获取当 前正在渲染的功能组件的属性 修改信息； 根据所述属性 修改信息调整当前被 触发的功能组件的渲染效果。 6.根据权利要求1所述的方法， 其特征在于， 所述属性信息还包括页面布局， 所述页面 布局包括响应式页面和非响应式页面中的至少一种； 所述页面布局与所述显示终端相关联。 7.一种基于拖拽式生成前端页面的装置， 其特 征在于， 包括： 属性信息获取模块， 用于获取当前要生成的前端页面的属性信息； 所述属性信息包括权　利　要　求　书 1/2 页 2 CN 114489623 B 2页面类型； 设计界面加载模块， 用于根据所述属性信息加载并推送设计界面； 所述设计界面中包 括设计区域和生成所述页面类型的前端页面所需要的功能组件； 功能组件渲染模块， 用于监测当前被拖拽到所述设计区域的功能组件， 获取当前被触 发的功能组件的拖拽信息， 并基于所述拖拽信息在所述设计区域渲 染当前被触发的功能组 件； 前端页面生成模块， 用于根据当前已被渲染到所述设计区域内的各功能组件， 生成相 应的所述前端页面； 所述属性信息还 包括所述前端页面的显示终端； 所述设计界面加载模块， 在根据所述属性信息加载并推送设计界面时， 还用于： 按照预先设置的与 所述显示终端相匹配的设计区划分规则， 对所述设计界面中的设计 区域进行划分， 其中， 与所述显示终端相匹配的设计区划分规则包括与所述显示终端分辨 率相匹配的设计区域的宽度、 设计区域中的子区域、 槽和边距的数量及宽度； 所述拖拽信息包括组件释放 位置； 所述功能组件渲染模块， 在基于所述拖拽信 息在所述设计区域渲染当前被触发的功能 组件时， 基于所述组件释放位置以及根据所述设计区域划分规则 在所述设计区域中划分出 的子区域实现。 8.一种基于拖拽式生成前端页面的设备， 其特 征在于， 包括： 处理器； 用于存储处理器可执行指令的存 储器； 其中， 所述处理器被配置为执行所述可执行指令时实现权利要求1至6中任意一项所述 的方法。 9.一种非易失性计算机可读存储介质， 其上存储有计算机程序指令， 其特征在于， 所述 计算机程序指令被处 理器执行时实现权利要求1至 6中任意一项所述的方法。权　利　要　求　书 2/2 页 3 CN 114489623 B 3