CN114968220A - 一种动态门户设计方法及装置 - Google Patents

Abstract

本发明涉及软件系统应用领域，具体提供了一种动态门户设计方法，实例化一个Vue对象并完成初始化后，Vue会检查el和template模板属性，以获取模板字符串，然后将得到的模板字符串编译成render函数；制定template内容，存储到数据库中，应用渲染时从数据库中读取模板字符串，vue在获取到模板字符串后，通过正则表达式对HTML模板逐字符解析，最终构建成一个完整描述HTML节点信息的AST节点树，随后编译器执行generate函数，为AST生成render函数的代码体，render函数创建虚拟节点vnode，有了vnode后，vue会根据vnode创建DOM节点，进行渲染。与现有技术相比，本发明的配置简单，维护更加轻松、准确，减少他们的工作量。

Description

一种动态门户设计方法及装置

技术领域

本发明涉及软件系统应用领域，具体提供一种动态门户设计方法及装置。

背景技术

随着互联网的发展，电脑终端迅速普及，网民快速增长，市场空间也很巨大。在此同时也出现地方门户，通常我们所说的地方门户系统是指“地方门户网站系统”，它由多个网站功能系统构成，主要有分类信息系统、社区论坛系统、地方信息资讯系统、商家企业网页系统等。并非单指地方某个行业垂直网站系统，如单一的论坛系统、单一的分类信息系统等。

门户大致可以分为如下几类：

搜索引擎式门户网站：

该类网站的主要功能是提供强大的搜索引擎和其他各种网络服务，这类网站在中国比较少。综合性门户网站该类网站以新闻信息、娱乐资讯为主网站以新闻、供求、产品、展会、行业导航、招聘为主的集成式网站。

地方生活门户：

该类网站是时下最流行的，以本地资讯为主，一般包括：本地资讯、同城网购、分类信息、征婚交友、求职招聘、团购集采、口碑商家、上网导航、生活社区等频道，网内还包含电子图册、万年历、地图频道、音乐盒、在线影视、优惠券、打折信息、旅游信息、酒店信息等非常实用的功能。

个人门户：

个人门户是一个网站，通常提供个性化的功能，为游客提供一个途径，其他内容。它被设计为使用分布式应用程序，中间件和硬件中的不同数量和类型，提供来自多个不同源的服务。此外，企业门户是专为在工作场所的共享和协作。进一步的业务驱动的要求，门户网站的内容可以在多个平台上工作，如个人电脑，个人数字助理(PDA)的，和手机/移动电话。

狭义与广义门户网站：

就意义上人们所理解的门户类网站主要是指一些综合性质的网站，也就相对于那些专业性较强、涉及内容较为单一的垂直类网站。二者的区别似乎可以形象的理解为：超级市场(supermarket)与专卖店(Exclusive Shop)之间的区别，前者品牌及商品类型众多，后者却较为单一。但是如果严格的从互联网门户概念的诞生以及门户字面意义来讲，各种类型的网站都可成为门户类网站，因为从字面上来理解，门户本身应该就是一种手段、媒介，通过这个媒介领略大千网络世界，这样理解的话所谓门户不应有内容类型以及多寡的歧视的。

无论是属于哪一种门户网络，其中所展示的内容肯定不是一成不变的，要随着热点以及用户的偏好进行调整。目前大多数门户网站只是展示固定的几个组件，例如公告资讯，子系统入口、待办事项等…很多时候只是更换组件中的数据，如果想要增加或减少部分组件，那么只能是技术人员修改代码并重新发布，灵活性较差、维护成本很高。

发明内容

本发明是针对上述现有技术的不足，提供一种实用性强的动态门户设计方法。

本发明进一步的技术任务是提供一种设计合理，安全适用的动态门户设计装置。

本发明解决其技术问题所采用的技术方案是：

一种动态门户设计方法，实例化一个Vue对象并完成初始化后，Vue会检查el和template模板属性，以获取模板字符串，然后将得到的模板字符串编译成render函数；

制定template内容，存储到数据库中，应用渲染时从数据库中读取模板字符串，vue在获取到模板字符串后，通过正则表达式对HTML模板逐字符解析，最终构建成一个完整描述HTML节点信息的AST节点树，AST节点是对HTML节点信息的描述，随后编译器执行generate函数，为AST生成render函数的代码体，render函数创建虚拟节点vnode，有了vnode后，vue会根据vnode创建DOM节点，进行渲染。

进一步的，当template未指定时，vue以所制定的el元素的outerHTML作为模板。

进一步的，template模板具体内容如下所示：

S1、进入组件配置界面，配置组件的前端代码和权限定义，定义模板字符串处理方法，将读取到的html、js和css分别校验；

S2、进入组件信息源配置界面，选择要绑定数据的组件，配置获取数据的参数；

S3、配置完成后可以进行预览，在门户网站上所展示的内容；

S4、进入门户模板定义界面，选择要展示的组件，定义排列顺序。

进一步的，在步骤S1中，首先是根据正则表达式校验语法错误，如果存在语法错误在预览和入库时会进行提示；然后，生成随机uuid，给html中的元素绑定class，uuid做scoped的样式；

对于js，需要注意关键字检测，随后将解析好的模板进行拼接，转成代码对象，根据首次渲染还是再渲染选择注入template或render，设定template优先级高于render，随后注入beforeUpdate钩子，用于子组件重绘时，清理父组件捕获的异常，通过computed注入一些变量。

进一步的，在步骤S2中，在组件渲染时，调用配置好的接口，将请求结果返回给template模板，模板根据vnode存储的内容替换相应的绑定数据，替换后进行组件重绘。

进一步的，在步骤S3中,所述预览就是进行一次渲染，如果在渲染时接口请求超时或者返回值格式不符，那么只会显示空模板，数据为空。

进一步的，在步骤S4中,门户模板是template模板的底层div，所有的组件都存在于这个div中，在div中是松散的排列方式，所以需要定义组件的排列顺序来决定各个组件的优先级；

最后组件模板和门户模板会拼接成一个模板进行展示，在次热加载开始，无论是修改组件代码还是更改接口返回数据，都会触发钩子函数，最小限度地替换模板中要更新的内容，DOM节点进行再渲染。

进一步的，AST节点是对HTML节点信息的描述，具体的解析过程是通过几个核心正则表达式分别捕获到标签名以及属性的名称和值，然后使用这些信息创建AST节点对象，vue会根据不同的对象类型生成不同的AST对象；

随后编译器执行generate函数，为AST生成render函数的代码体，render函数是创建虚拟节点vnode，而创建一个vnode，需要用到元素标签，数据对象和子元素列表三个参数，genElement作为核心的代码生成方法，会按照顺序去解析数据库中的模板字符串，生成这三部分的代码；

解析完成后，调用render函数生成多个vnode。

进一步的，有了vnode后，vue会根据vnode创建DOM节点，首次渲染，会走创建的方法，而因为数据更改导致的渲染则走更新的方法；

如果是首次渲染，那么就不存在旧的vnode，所以无需进行比较，vue直接调用createElm方法创建DOM元素；

否则，则是找到要更新的内容进行最小限度的替换，最后浏览器根据DOM进行渲染展示。

一种动态门户设计装置，包括：至少一个存储器和至少一个处理器；

所述至少一个存储器，用于存储机器可读程序；

所述至少一个处理器，用于调用所述机器可读程序，执行一种动态门户设计方法。

本发明的一种动态门户设计方法及装置和现有技术相比，具有以下突出的有益效果：

通过动态配置门户网站，解决了维护成本高以及不灵活的缺点，可以根据需求便捷的修改门户网站展示的内容，包括组件以及组件内的数据。满足了用户自定义配置门户网站的需求。配置过程数据不直接暴露，通过接口方式获取，数据安全性高。基于vue技术，适配市面绝大部分主流浏览器。用户体验较好，用户自定义门户展示内容，配置过程隔离性较好，不影响门户网站使用，配置操作简单。更新数据库内容即可修改展示内容，以保持休闲有趣的信息供用户阅读。后台配置可以协助网站管理者管理内容，维护更加轻松、准确，减少他们的工作量。动态网页实际上并不是独立存在于服务器上的网页文件，只有当用户请求时服务器才会返回一个完整的网页，对于网络攻击有较快的反应能力。

附图说明

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

附图1是一种动态门户设计方法中组件配置界面图；

附图2是一种动态门户设计方法中组件信息源配置界面图；

附图3是一种动态门户设计方法中组件预览界面图。

具体实施方式

为了使本技术领域的人员更好的理解本发明的方案，下面结合具体的实施方式对本发明作进一步的详细说明。显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例都属于本发明保护的范围。

下面给出一个最佳实施例：

如图1-3所示，本实施例中的一种动态门户设计方法，实例化一个Vue对象并完成初始化后，Vue会检查el和template模板属性，以获取模板字符串。然后将得到的模板编译成render函数。只有当template未指定时，vue才会以所制定的el元素的outerHTML作为模板。

所以本发明由后台制定template内容，存储到数据库中，应用渲染时从库中读取模板字符串。vue在获取到模板字符串后，通过正则表达式对HTML模板逐字符解析，分别解析出元素节点以及每个元素节点上所设置的指令、attribute、事件绑定等，最终构建成一个完整描述HTML节点信息的AST节点树。

AST节点是对HTML节点信息的描述。具体的解析过程是通过几个核心正则表达式分别捕获到标签名以及属性的名称和值，然后使用这些信息创建AST节点对象。vue会根据不同的对象类型生成不同的AST对象，如文本、指令…

随后编译器执行generate函数，为AST生成render函数的代码体。render函数的主要作用是创建虚拟节点vnode。而创建一个vnode，需要用到三个参数：元素标签，数据对象和子元素列表。

genElement作为核心的代码生成方法，会按照顺序去解析数据库中的模板字符串，生成这三部分的代码。解析完成后，调用render函数生成多个vnode。

有了vnode后，vue会根据vnode创建DOM节点，首次渲染，会走创建的方法，而因为数据更改导致的渲染则走更新的方法。

如果是首次渲染，那么就不存在旧的vnode，所以无需进行比较，vue直接调用createElm方法创建DOM元素；否则，则是找到要更新的内容进行最小限度的替换。最后浏览器根据DOM进行渲染展示。

template模板具体内容如下所示：

S1、进入组件配置界面，配置组件的前端代码，包括html、js、以及css代码，还有该组件的权限定义。定义模板字符串处理方法，将读取到的html、js、css分别校验。

首先是根据正则表达式校验语法错误，如果存在语法错误在预览和入库时会进行提示。然后生成随机uuid，给html中的元素绑定class，uuid主要用于做scoped的样式。对于js，需要注意关键字检测，如const等，以防导致冲突。

随后将解析好的模板进行拼接，转成代码对象，根据首次渲染还是再渲染选择注入template或render，设定template优先级高于render。随后注入beforeUpdate钩子，用于子组件重绘时，清理父组件捕获的异常。通过computed注入一些变量，比如store中的一些字段，当store中的变量发生变化时，也会引发组件重绘。

S2、进入组件信息源配置界面，选择要绑定数据的组件，配置获取数据的接口地址、请求参数等。

在组件渲染时，调用配置好的接口，将请求结果返回给template模板，模板根据vnode存储的内容替换相应的绑定数据。替换后进行组件重绘。这里之所以是重绘，是因为代码对象生成时已经进行了一次预渲染，如果在此处和数据同时渲染，那么会导致加载缓慢，遮罩存在时间较长的情况，不利于用户体验。

S3、配置完成后可以进行预览，在门户网站上所展示的内容；预览的实质就是进行一次渲染，如果在渲染时接口请求超时或者返回值格式不符，那么只会显示空模板，数据为空。预览也可认为是一种自检过程。

S4、进入门户模板定义界面，选择要展示的组件，定义排列顺序。门户模板可以认为是template模板的底层div，所有的组件都存在于这个div中，由于在div中是松散的排列方式，所以需要定义组件的排列顺序来决定各个组件的优先级。最后组件模板和门户模板会拼接成一个模板进行展示。在次热加载开始，无论是修改组件代码还是更改接口返回数据，都会触发钩子函数，最小限度地替换模板中要更新的内容，DOM节点进行再渲染。

运行上述方法的装置包括：至少一个存储器和至少一个处理器；

所述至少一个存储器，用于存储机器可读程序；

所述至少一个处理器，用于调用所述机器可读程序，执行一种动态门户设计方法。

上述具体的实施方式仅是本发明具体的个案，本发明的专利保护范围包括但不限于上述具体的实施方式，任何符合本发明的一种动态门户设计方法及装置权利要求书的且任何所述技术领域普通技术人员对其做出的适当变化或者替换，皆应落入本发明的专利保护范围。

尽管已经示出和描述了本发明的实施例，对于本领域的普通技术人员而言，可以理解在不脱离本发明的原理和精神的情况下可以对这些实施例进行多种变化、修改、替换和变型，本发明的范围由所附权利要求及其等同物限定。

Claims (10)

1.一种动态门户设计方法，其特征在于，实例化一个Vue对象并完成初始化后，Vue会检查el和template模板属性，以获取模板字符串，然后将得到的模板字符串编译成render函数；

制定template内容，存储到数据库中，应用渲染时从数据库中读取模板字符串，vue在获取到模板字符串后，通过正则表达式对HTML模板逐字符解析，最终构建成一个完整描述HTML节点信息的AST节点树，AST节点是对HTML节点信息的描述，随后编译器执行generate函数，为AST生成render函数的代码体，render函数创建虚拟节点vnode，有了vnode后，vue会根据vnode创建DOM节点，进行渲染。

2.根据权利要求1所述的一种动态门户设计方法，其特征在于，当template未指定时，vue以所制定的el元素的outerHTML作为模板。

3.根据权利要求2所述的一种动态门户设计方法，其特征在于，template模板具体内容如下所示：

S1、进入组件配置界面，配置组件的前端代码和权限定义，定义模板字符串处理方法，将读取到的html、js和css分别校验；

S2、进入组件信息源配置界面，选择要绑定数据的组件，配置获取数据的参数；

S3、配置完成后可以进行预览，在门户网站上所展示的内容；

S4、进入门户模板定义界面，选择要展示的组件，定义排列顺序。

4.根据权利要求3所述的一种动态门户设计方法，其特征在于，在步骤S1中，首先是根据正则表达式校验语法错误，如果存在语法错误在预览和入库时会进行提示；然后，生成随机uuid，给html中的元素绑定class，uuid做scoped的样式；

对于js，需要注意关键字检测，随后将解析好的模板进行拼接，转成代码对象，根据首次渲染还是再渲染选择注入template或render，设定template优先级高于render，随后注入beforeUpdate钩子，用于子组件重绘时，清理父组件捕获的异常，通过computed注入一些变量。

5.根据权利要求4所述的一种动态门户设计方法，其特征在于，在步骤S2中，在组件渲染时，调用配置好的接口，将请求结果返回给template模板，模板根据vnode存储的内容替换相应的绑定数据，替换后进行组件重绘。

6.根据权利要求5所述的一种动态门户设计方法，其特征在于，在步骤S3中,所述预览就是进行一次渲染，如果在渲染时接口请求超时或者返回值格式不符，那么只会显示空模板，数据为空。

7.根据权利要求5所述的一种动态门户设计方法，其特征在于，在步骤S4中,门户模板是template模板的底层div，所有的组件都存在于这个div中，在div中是松散的排列方式，所以需要定义组件的排列顺序来决定各个组件的优先级；

最后组件模板和门户模板会拼接成一个模板进行展示，在次热加载开始，无论是修改组件代码还是更改接口返回数据，都会触发钩子函数，最小限度地替换模板中要更新的内容，DOM节点进行再渲染。

8.根据权利要求7所述的一种动态门户设计方法，其特征在于，AST节点是对HTML节点信息的描述，具体的解析过程是通过几个核心正则表达式分别捕获到标签名以及属性的名称和值，然后使用这些信息创建AST节点对象，vue会根据不同的对象类型生成不同的AST对象；

随后编译器执行generate函数，为AST生成render函数的代码体，render函数是创建虚拟节点vnode，而创建一个vnode，需要用到元素标签，数据对象和子元素列表三个参数，genElement作为核心的代码生成方法，会按照顺序去解析数据库中的模板字符串，生成这三部分的代码；

解析完成后，调用render函数生成多个vnode。

9.根据权利要求8所述的一种动态门户设计方法，其特征在于，有了vnode后，vue会根据vnode创建DOM节点，首次渲染，会走创建的方法，而因为数据更改导致的渲染则走更新的方法；

如果是首次渲染，那么就不存在旧的vnode，所以无需进行比较，vue直接调用createElm方法创建DOM元素；

否则，则是找到要更新的内容进行最小限度的替换，最后浏览器根据DOM进行渲染展示。

10.一种动态门户设计装置，其特征在于，包括：至少一个存储器和至少一个处理器；

所述至少一个存储器，用于存储机器可读程序；

所述至少一个处理器，用于调用所述机器可读程序，执行权利要求1至9中任一所述的方法。

Images