基于Vue的组件化页面混合渲染方法与流程

本发明属于页面渲染，特别是涉及基于vue的组件化页面混合渲染方法。

背景技术：

1、在开发企业应用的前端页面时，在项目需求阶段往往根据用户需求设计相应页面，在项目开发阶段，根据已定稿的需求开发相应的前端页面，程序开发完成发布后，即可呈现用户需求的前端页面。

2、如中国专利cn113703893a公开了一种页面渲染方法、装置、终端及存储介质。该方法应用于页面客户端，该页面客户端包括多个功能项目，该方法包括：在接收到页面渲染指令时，获取与页面渲染指令对应的预渲染页面，并读取预渲染页面，预渲染页面内记载有目标资源文件信息；当读取到目标资源文件信息时，确定页面客户端中是否缓存有与目标资源文件信息对应的目标资源文件，目标资源文件是多个功能项目中的至少两个功能项目在运行时需要的资源文件；如果是，则从页面客户端中获取到目标资源文件；根据目标资源文件向页面服务端进行数据请求，并根据数据请求结果进行与页面渲染指令对应的待渲染页面的渲染，可以缩短页面渲染时间。

3、但是，用户的业务是多变的、繁杂的，业务的变化往往带来前端页面的相应变化，在现有的方案中，一般会根据用户的业务需求，动态设置前端页面，以达到快速响应需要的目的，但是动态设置前端页面的方案并不兼容旧页面，若旧页面有业务需求的修改，要么使用动态设置页面方法重构页面，要么沿用原方法，手动修改。存在以下缺陷：

4、a：与既有前端代码不兼容，要么全部使用动态页面设计方案，要么沿用原方案，手动修改；

5、b：对于同类型有较小差异的用户，需要维护较多的冗余代码。

6、因此，本发明提供一种基于vue的组件化页面混合渲染方法。

技术实现思路

1、本发明的目的在于提供基于vue的组件化页面混合渲染方法，基于vue前端框架，通过自主研发的页面配置中心，进行页面设计，并存储到数据库中，基于组件化的理念，使用现有的vue前端框架，用户通过页面配置中心设计的任何页面都是组件，可以直接在其他的设计页面中直接引用，无需重复设计；解决以下技术问题：

2、1.如何实现动态修改前端页面；

3、2.如何实现兼容既有代码，可与既有代码混合渲染；

4、3.如何实现组件化页面设计，可重复使用。

5、为解决上述技术问题，本发明是通过以下技术方案实现的：

6、作为本发明提供的第一个方面，本发明为基于vue的组件化页面混合渲染方法，包括以下步骤：

7、基于vue前端框架，用户通过页面配置中心进行页面设计，将设计好的页面对应的vue代码格式化为json字符串后存储到数据库中，并在数据库中封存为独立组件；所述页面配置中心具有页面设计界面，页面设计界面包括可拖拽组件区、设计展示区、组件属性设置区；

8、在进行其他页面设计时，直接从数据库中拖拽在先的独立组件进行页面设计；页面解析器将获取到的独立组件对应的json字符串解析成vue原生代码后，再和页面现有代码通过vue渲染成实际页面，达到混合渲染的目的，实现兼容既有前端代码。

9、进一步地，通过所述页面配置中心实现页面设计的方法为：用户在页面设计界面中，在可拖拽组件区中拖拽独立组件至设计展示区；通过组件属性设置区修改独立组件的属性，进行页面设计；从可拖拽组件区将独立组件拖拽至设计展示区，即可看到实时效果，组件属性设置区，可通过修改组件属性，修改组件的大小，位置，颜色，名称等信息，修改后可在设计展示区看到实时修改效果；

10、页面设计完成后，可点击页面设计界面上的预览按钮，查看页面设计的最终效果；

11、页面设计完成后，点击页面设计界面上的保存按钮，将设计好的页面对应的vue代码格式化为json字符串，并通过vue后端的保存服务，持久化到数据库中，用户设计完成的页面，在vue前端展示时，采用标准的vue代码进行展示。

12、进一步地，从所述数据库中拖拽在先的独立组件进行页面设计的方法为：

13、基于vue前端框架，将已设计的好的页面对应的vue代码封装成独立代码，采用格式化方法将独立代码转为json字符串，存储到数据库中，在使用时，先从数据库中读取独立组件对应的json字符串，在vue前端使用页面解析器将json字符串还原成vue原生代码，与页面现有代码一起经vue框架渲染后，成为一个新的独立组件供其他页面设计使用。

14、进一步地，还包括以下步骤：

15、业务系统读取存储在数据库中的已设计好的页面(格式化json字符串)，并存入高速缓存中；

16、业务系统前端页面在渲染页面时，先从高速缓存中读取已设计好的页面(格式化json字符串)，再通过页面设计界面中嵌入的页面解析器(组件)进行格式化json字符串的解析，页面解析器(组件)将格式化json字符串解析成vue原生代码，再通过vue渲染出完整的页面。

17、进一步地，所述页面解析器对json字符串进行解析的方法为：

18、通过参数(:i s)将json字符串传入页面解析器中，页面解析器中的genetateformi tem和generatemod l e算法，将json字符串还原为vue的原生代码。

19、作为本发明提供的第二个方面，本发明为一种电子设备，包括：

20、存储器，其用于存储程序；

21、处理器，当所述程序被处理器执行时，实现如第一个方面提供的方法。

22、作为本发明提供的第三个方面，本发明为一种计算机可读存储介质，所述计算机可读存储介质上存储有计算机程序，所述计算机程序被处理器执行时，实现如第一个方面提供的方法。

23、本发明具有以下有益效果：

24、本发明通过页面配置中心进行页面设计，将设计好的页面对应的vue代码格式化为json字符串后存储到数据库中，并在数据库中封存为独立组件，通过在页面中嵌入自主研发的页面解析器，解析获取到的json字符串，将json字符串解析成vue原生代码，再和页面原有代码一起通过vue渲染页面，达到混合渲染的目的，实现兼容既有前端代码，组件化的页面设计，可在多场景重复调用。

25、当然，实施本发明的任一产品并不一定需要同时达到以上所述的所有优点。

技术特征：

1.基于vue的组件化页面混合渲染方法，其特征在于，包括以下步骤：

2.根据权利要求1所述的基于vue的组件化页面混合渲染方法，其特征在于，所述页面配置中心具有页面设计界面，所述页面设计界面包括可拖拽组件区、设计展示区、组件属性设置区。

3.根据权利要求2所述的基于vue的组件化页面混合渲染方法，其特征在于，通过所述页面配置中心实现页面设计的方法为：

4.根据权利要求3所述的基于vue的组件化页面混合渲染方法，其特征在于，通过组件属性设置区修改的属性包括独立组件的大小、位置、颜色、名称。

5.根据权利要求3所述的基于vue的组件化页面混合渲染方法，其特征在于，用户设计完成的页面在vue前端展示时，采用vue代码进行展示。

6.根据权利要求1所述的基于vue的组件化页面混合渲染方法，其特征在于，从所述数据库中拖拽在独立组件进行页面设计的方法为：

7.根据权利要求6所述的基于vue的组件化页面混合渲染方法，其特征在于，还包括以下步骤：

8.根据权利要求7所述的基于vue的组件化页面混合渲染方法，其特征在于，所述页面解析器对json字符串进行解析的方法为：

9.一种电子设备，其特征在于，包括：

10.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质上存储有计算机程序，所述计算机程序被处理器执行时，实现如权利要求1-8任意一项所述的方法。

技术总结
本发明公开了基于Vue的组件化页面混合渲染方法，涉及页面渲染技术领域。本发明包括：基于Vue前端框架，用户通过页面配置中心进行页面设计，将设计好的页面对应的Vue代码格式化为JSON字符串后存储到数据库中，并在数据库中封存为独立组件；在进行其他页面设计时，直接从数据库中拖拽独立组件进行页面设计；页面解析器将获取到的独立组件对应的JSON字符串解析成Vue原生代码后，再和页面现有代码通过Vue渲染成实际页面。本发明通过将JSON字符串解析成Vue原生代码，再和页面原有代码一起通过Vue渲染页面，达到混合渲染的目的，实现兼容既有前端代码，组件化的页面设计，可在多场景重复调用。

技术研发人员：周金
受保护的技术使用者：深圳联友科技有限公司
技术研发日：
技术公布日：2024/6/11