CN115167856A - 基于node.js环境的vue项目约定式路由配置方法及系统 - Google Patents

Abstract

本发明提供基于node.js环境的vue项目约定式路由配置方法及系统，涉及前端开发技术领域，包括S1、执行脚本文件的调用入口，开启脚本文件内置的子进程和父进程；S2、通过所述子进程启动目标vue项目；S3、所述父进程监听所述目标vue项目中的视图层文件变化及处理：S4、所述目标vue项目生成路由表并将项目配置文件引入所述路由表；S5、浏览器按照路由表渲染前端界面。本发明在启动项目时，可实时对视图层文件夹下所有文件进行监视，自动生成目标路由文件，以供目标vue项目使用。

Description

基于node.js环境的vue项目约定式路由配置方法及系统

技术领域

本发明涉及前端开发技术领域，具体涉及基于node.js环境的vue项目约定式路由配置方法及系统、计算机介质。

背景技术

随着vue这种渐进式框架的兴起，大部分前端开发者都会选择利用它来完成客户端静态界面的开发。同时它深度集成了vue-router，一种可以让vue.js构建单页应用变得轻而易举的插件。

现有技术使用vue-router须维护router.js配置文件，以保证配置文件能够供vue项目使用，每个界面的正确展示都离不开router.js中的配置文件，用户在进行增删操作视图层文件时都需要手动重新维护router.js，对配置文件内容进行修改、核对，且需要高频率、大量的重复上述维护工作，因此，这种配置的方式的工作效果是繁琐而低效的。

发明内容

针对现有技术的不足，本发明提供了基于node.js环境的vue项目约定式路由配置方法，解决了目前router.js配置文件工作繁琐、效率低下的问题。

为实现以上目的，本发明通过以下技术方案予以实现：

基于node.js环境的vue项目约定式路由配置方法，该方法包括以下步骤：

S1、执行脚本文件的调用入口，开启脚本文件内置的子进程和父进程；

S2、通过所述子进程启动目标vue项目；

S3、所述父进程监听所述目标vue项目中的视图层文件变化及处理：

S3.1、利用node递归读取文件函数，判断视图层文件夹是否被修改，并将判断信息实时推送至父进程：

是，则视图层文件夹被修改，进入S3.2；

否，则视图层文件夹未被修改，进入S4；

S3.2、父进程触发回调函数，回调函数不间断获取被修改视图层文件夹的具体文件信息，同时将具体文件信息扁平化存储在内存中；

S3.3、利用handlebar.js解释器对所述具体文件信息进行编译处理，生成目标路由文件；

S3.4、所述目标路由文件推送至父进程，再通过所述父进程写入所述目标vue项目的router.js中；

S4、所述目标vue项目的vue.js生成路由表并将项目配置文件引入所述路由表；

S5、浏览器按照路由表渲染前端界面。

进一步的，在S2中，通过所述子进程启动目标vue项目，具体包括：

利用node.js的child_progress模块启动所述子进程；

子进程运行目标vue项目启动脚本`npm run serve`；

子进程的正确输出和错误输出流利用stdout和sterr异步导入到父进程。

进一步的，在S3中，父进程通过watch监听文件函数实现监听。

进一步的，在S3.1中，利用node递归读取文件函数，判断视图层文件夹是否被修改，具体的包括：

node递归读取文件函数通过node.js发布订阅模式读取文件，并将读取结果、文件描述符传输至父程序的watch监听文件函数；

watch监听文件函数将读取结果与文件描述符作对比，即可判断文件变更状态。

进一步的，在S3.2中，父进程触发回调函数，回调函数不间断获取被修改视图层文件夹的具体文件信息，同时将具体文件信息扁平化存储在内存中，具体的包括：

回调函数利用递归算法，在内存空间中创建一个变量扁平化区；

node递归读取文件函数不间断获取被修改视图层文件夹的具体文件信息，并将具体文件信息传输至回调函数，

回调函数依据目标vue项目约定，正则过滤掉具体文件信息中不符合生成路由规则或需要特殊处理的内容，并将余下的具体文件信息存储在变量扁平化区。

进一步的，所述具体信息包括：名称、相对路径、是否为文件夹标识以及父元素特征值。

进一步的，在S3.3中，利用handlebar.js解释器对所述具体文件信息进行编译处理，生成目标路由文件，具体的包括：

将具体文件信息放入handlebar.js解释器中；handlebar.js解释器内置有第一函数、第二函数以及第三函数；第一函数基于registerPartial注册，第一函数用以设置动态代码片段，生成动态路由；第二函数、第三函数基于registerHelper注册，第二函数用以将相对路径修改为绝对路径，第三函数用以为动态路由提供备份可选动态路由；

具体文件信息依次经过第二函数、第一函数、第三函数处理，输出目标路由文件，目标路由文件包括：变量数据、目标文件路径、模板文件路径。

本发明提供了基于node.js环境的vue项目约定式路由配置方法。与现有技术相比，具备以下有益效果：

本发明所提供的配置方法，在启动项目时，可实时对视图层文件夹下所有文件进行监视，自动生成目标路由文件，以供目标vue项目使用。

附图说明

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

图1示出了本发明的基于node.js环境的vue项目约定式路由配置方法示意图。

具体实施方式

为使本发明实施例的目的、技术方案和优点更加清楚，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

实施例1

为解决背景技术中，传统router.js配置路由工作繁琐、效率低下的问题，给出如下的基于node.js环境的vue项目约定式路由配置方法：

如图1所示，该方法包括如下步骤：

S1、执行脚本文件的调用入口，开启脚本文件内置的子进程和父进程；

S2、通过所述子进程启动目标vue项目；

S3、所述父进程监听所述目标vue项目中的视图层文件变化及处理：

S3.1、利用node递归读取文件函数，判断视图层文件夹是否被修改，并将判断信息实时推送至父进程：

是，则视图层文件夹被修改，进入S3.2；

否，则视图层文件夹未被修改，进入S4；

S3.2、父进程触发回调函数，回调函数不间断获取被修改视图层文件夹的具体文件信息，同时将具体文件信息扁平化存储在内存中；

S3.3、利用handlebar.js解释器对所述具体文件信息进行编译处理，生成目标路由文件；

S3.4、所述目标路由文件推送至父进程，再通过所述父进程写入所述目标vue项目的router.js中；

S4、所述目标vue项目的vue.js生成路由表并将项目配置文件引入所述路由表；

S5、浏览器按照路由表渲染前端界面。

通过上述配置方法，可以根据文件路径对其进行匹配评估，在启动项目时，可实时对视图层文件夹下所有文件进行监视，自动生成目标路由文件，以供目标vue项目使用。

上述S3.1-3.4的内容具有如下技术效果：使用node.js的watch监听包，实现实时文件监听，自动路径匹配，并生成路由文件，同时利用父子进程无差别启动项目。

为进一步阐述上述S2的工作过程，本实施例给出如下的实施方式：

通过所述子进程启动目标vue项目，具体包括：

利用node.js的child_progress模块启动所述子进程；

子进程运行目标vue项目启动脚本`npm run serve`；

子进程的正确输出和错误输出流利用stdout和sterr异步导入到父进程。

一个特定实施方式中，在S3中，父进程通过watch监听文件函数实现监听。

为进一步阐述S3.1的工作过程，本实施例给出如下的实施方式：

利用node递归读取文件函数，判断视图层文件夹是否被修改，具体的包括：

node递归读取文件函数通过node.js发布订阅模式读取文件，并将读取结果、文件描述符传输至父程序的watch监听文件函数；

watch监听文件函数将读取结果与文件描述符作对比，即可判断文件变更状态。

为进一步阐述S3.2的工作过程，本实施例给出如下的实施方式：

父进程触发回调函数，回调函数不间断获取被修改视图层文件夹的具体文件信息，同时将具体文件信息扁平化存储在内存中，具体的包括：

回调函数利用递归算法，在内存空间中创建一个变量扁平化区；

node递归读取文件函数不间断获取被修改视图层文件夹的具体文件信息，并将具体文件信息传输至回调函数，

回调函数依据目标vue项目约定，正则过滤掉具体文件信息中不符合生成路由规则或需要特殊处理的内容，并将余下的具体文件信息存储在变量扁平化区。

上述S3.2的具体实施内容具有如下技术效果：将视图层文件转换为扁平数组进行存储，减少复杂度。

一个实施方式中，所述具体信息包括：名称、相对路径、是否为文件夹标识以及父元素特征值。

为进一步阐述S3.3的工作过程，本实施例给出如下的实施方式：

利用handlebar.js解释器对所述具体文件信息进行编译处理，生成目标路由文件，具体的包括：

将具体文件信息放入handlebar.js解释器中；handlebar.js解释器内置有第一函数、第二函数以及第三函数；第一函数基于registerPartial注册，第一函数用以设置动态代码片段，生成动态路由；第二函数、第三函数基于registerHelper注册，第二函数用以将相对路径修改为绝对路径，第三函数用以为动态路由提供备份可选动态路由；

具体文件信息依次经过第二函数、第一函数、第三函数处理，输出目标路由文件，目标路由文件包括：变量数据、目标文件路径、模板文件路径。

第一函数用以解决嵌套路由无法动态生成的问题；第二函数、第三函数为两个助手，第二函数为路径处理函数，用以将相对路径修改为绝对路径供目标文件使用，第三函数为动态路由和可选动态路由的处理函数，防止最终生成文件中因为包含特殊字符导致路径错误等问题。

一个实施方式中，模板文件路径为目标项目template/router.js.hbs和template/router_item.js.hbs，该文件设置默认模板，同时使用者可以根据实际情况修改两个文件，达到自定义路由选项的功能。

上述S3.3的具体实施内容具有如下的技术效果：使用handlebarsJs注册两个api,registerPartial和registerHelper实现嵌套路由以及路径转换等功能，完成模板编译。

综上，本实施例提供的基于node.js环境的vue项目约定式路由配置方法使得前端开发工程师使用vue开发静态页面时，更多的专注于视图层界面绘制，更少的书写配置文件。同时在支持嵌套路由，动态路由，可选路由等功能的前提下，还支持模板自定义。同时基于约定式路由规范，项目会更清晰明了，大大提升了前端工程的可维护性。无论是全界面布局或是单页面布局，都可以利用约定快速生成模板，加快开发。再就是由于其可扩展，可插拔的特点，可以发布更多约定，从而实现权限路由等更多个性化功能。

实施例2

作为实施例1的另一种具体实施方式：

步骤A实施方式：

利用npm初始化项目，在package.json文件中添加bin属性，使得系统根据环境变量可以得知入口文件地址，从而启动服务；

利用nodejs的child_progress模块启动子进程，子进程运行目标项目启动脚本`npm run serve`，同时将子进程的正确输出和错误输出流利用stdout和sterr异步导入到父进程，注意需在脚本中判断属于linux系统或windows系统，防止启动脚本报错；

书写watch监听文件函数，并将此监听函数放在父进程。

步骤B实施方式：

监听函数中，结合nodejs发布订阅模式的读取文件方法，结合文件描述符，快速得知文件变更状态；

当父进程发现所监听的视图层文件夹发生变更时，立即进入下述回调；

在内存中创建一个变量，利用递归算法，在内存空间中创建一个变量扁平化储存包含该文件夹所有文件信息，具体信息为名称、相对路径、是否为文件夹标识、以及父元素特征值；

依据约定，利用正则过滤不符合生成路由规则或需要特殊处理的的文件夹和文件；

将此变量放入编译方法中，输出为“变量数据”、“目标文件路径”、“模板文件路径”；

模板文件路径为目标项目template/router.js.hbs和template/router_item.js.hbs，该文件设置默认模板，同时使用者可以根据实际情况修改两个文件，达到自定义路由选项的功能；

用handlebarJs的registerPartial，注册一个设置动态代码片段的函数，用以解决嵌套路由无法动态生成的问题；使用registerHelper，注册两个助手，一个为路径处理函数，用以将相对路径修改为绝对路径供目标文件使用，一个为动态路由和可选动态路由的处理函数，防止最终生成文件中因为包含特殊字符导致路径错误等问题；

完成编译。

步骤C实施方式：

将编译后的文件由父进程写入目标项目的router.js中；

router.js引入该路由表文件；

实时编译路由表，同时无差别启动项目，浏览器按照路由渲染前端界面。

实施例3

基于node.js环境的vue项目约定式路由配置系统，包括：

存储器，用于存储计算机可执行程序；

数据处理装置，用于读取所述存储器中的计算机可执行程序，以执行实施例1的路由配置方法。

实施例4

计算机可读介质，用于存储计算机可读程序，所述计算机可读程序用于执行实施例1的路由配置方法。

需要说明的是，在本文中，诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。

以上实施例仅用以说明本发明的技术方案，而非对其限制；尽管参照前述实施例对本发明进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本发明各实施例技术方案的精神和范围。

Claims (9)

1.基于node.js环境的vue项目约定式路由配置方法，其特征在于：该方法包括以下步骤：

S1、执行脚本文件的调用入口，开启脚本文件内置的子进程和父进程；

S2、通过所述子进程启动目标vue项目；

S3、所述父进程监听所述目标vue项目中的视图层文件变化及处理：

S3.1、利用node递归读取文件函数，判断视图层文件夹是否被修改，并将判断信息实时推送至父进程：

是，进入S3.2；

否，进入S4；

S3.2、父进程触发回调函数，回调函数不间断获取被修改视图层文件夹的具体文件信息，同时将具体文件信息扁平化存储在内存中；

S3.3、利用handlebar.js解释器对所述具体文件信息进行编译处理，生成目标路由文件；

S3.4、所述目标路由文件推送至父进程，再通过所述父进程写入所述目标vue项目的router.js中；

S4、所述目标vue项目的vue.js生成路由表并将项目配置文件引入所述路由表；

S5、浏览器按照路由表渲染前端界面。

2.根据权利要求1所述的基于node.js环境的vue项目约定式路由配置方法，其特征在于：在S2中，通过所述子进程启动目标vue项目，具体包括：

利用node.js的child_progress模块启动所述子进程；

子进程运行目标vue项目启动脚本`npm run serve`；

子进程的正确输出和错误输出流利用stdout和sterr异步导入到父进程。

3.根据权利要求1所述的基于node.js环境的vue项目约定式路由配置方法，其特征在于：在S3中，父进程通过watch监听文件函数实现监听。

4.根据权利要求1所述的基于node.js环境的vue项目约定式路由配置方法，其特征在于：在S3.1中，利用node递归读取文件函数，判断视图层文件夹是否被修改，具体的包括：

node递归读取文件函数通过node.js发布订阅模式读取文件，并将读取结果、文件描述符传输至父程序的watch监听文件函数；

watch监听文件函数将读取结果与文件描述符作对比，即可判断文件变更状态。

5.根据权利要求1所述的基于node.js环境的vue项目约定式路由配置方法，其特征在于：在S3.2中，父进程触发回调函数，回调函数不间断获取被修改视图层文件夹的具体文件信息，同时将具体文件信息扁平化存储在内存中，具体的包括：

回调函数利用递归算法，在内存空间中创建一个变量扁平化区；

node递归读取文件函数不间断获取被修改视图层文件夹的具体文件信息，并将具体文件信息传输至回调函数，

回调函数依据目标vue项目约定，正则过滤掉具体文件信息中不符合生成路由规则或需要特殊处理的内容，并将余下的具体文件信息存储在变量扁平化区。

6.根据权利要求5所述的基于node.js环境的vue项目约定式路由配置方法，其特征在于：所述具体信息包括：名称、相对路径、是否为文件夹标识以及父元素特征值。

7.根据权利要求5或6所述的基于node.js环境的vue项目约定式路由配置方法，其特征在于：在S3.3中，利用handlebar.js解释器对所述具体文件信息进行编译处理，生成目标路由文件，具体的包括：

将具体文件信息放入handlebar.js解释器中；handlebar.js解释器内置有第一函数、第二函数以及第三函数；第一函数基于registerPartial注册，第一函数用以设置动态代码片段，生成动态路由；第二函数、第三函数基于registerHelper注册，第二函数用以将相对路径修改为绝对路径，第三函数用以为动态路由提供备份可选动态路由；

具体文件信息依次经过第二函数、第一函数、第三函数处理，输出目标路由文件，目标路由文件包括：变量数据、目标文件路径、模板文件路径。

8.基于node.js环境的vue项目约定式路由配置系统，其特征在于，包括：

存储器，用于存储计算机可执行程序；

数据处理装置，用于读取所述存储器中的计算机可执行程序，以执行权利要求1至7中任一项所述的路由配置方法。

9.计算机可读介质，用于存储计算机可读程序，其特征在于，所述计算机可读程序用于执行权利要求1至7中任一项所述的路由配置方法。

Images