一种FTL模板的实时预览方法、存储介质及计算机

技术领域

本发明涉及网页领域，更具体地说，涉及一种FTL模板的实时预览方法、存储介质及计算机。

背景技术

在Web开发中，通常使用模板引擎来生成HTML页面。模板引擎可以将模板和数据合并，进而生成HTML页面。然而，现有技术中这种方式通常需要等待模板和数据合并完成才能查看生成的HTML页面，这会浪费时间和降低开发效率，因此需要一种方法来实现实时预览模板。

发明内容

本发明要解决的技术问题在于，提供一种FTL模板的实时预览方法、存储介质及计算机。

本发明解决其技术问题所采用的技术方案是：构造一种FTL模板的实时预览方法，包括：

预先存储建立网页所需的Freemarker模板文件、JSON数据集和css样式文本，在Node.js程序中建立config.js的配置文件，所述配置文件包括所述Freemarker模板文件、所述JSON数据集和所述css样式文本的路径信息及其之间的关联信息；

启动网页程序后读取所述配置文件，根据所述配置文件创建web服务器，根据所述配置文件以及所述Freemarker模板文件、所述JSON数据集和所述css样式文本生成HTML网页文件，将HTML网页文件发送至客户端进行显示；

使用监听模块监听所述Freemarker模板文件和所述JSON数据集的变化，在监测到所述Freemarker模板文件和/或所述JSON数据集的变化时发送刷新命令至所述客户端，所述客户端重新编译所述Freemarker模板文件并显示更新后的HTML网页文件。

进一步，在本发明所述的FTL模板的实时预览方法中，所述根据所述配置文件以及所述Freemarker模板文件、所述JSON数据集和所述css样式文本生成HTML网页文件包括：

加载所述配置文件关联的所述Freemarker模板文件、所述JSON数据集和所述css样式文本生后，使用Freemarker引擎进行编译，将生成的HTML网页文件保存至内存中。

进一步，在本发明所述的FTL模板的实时预览方法中，所述使用监听模块监听所述Freemarker模板文件和所述JSON数据集的变化包括：

使用Node.js程序中的fs.watch监听所述Freemarker模板文件和所述JSON数据集的变化；或者

使用Node.js程序中的fs.watchFile监听所述Freemarker模板文件和所述JSON数据集的变化。

进一步，在本发明所述的FTL模板的实时预览方法中，所述使用监听模块监听所述Freemarker模板文件和所述JSON数据集的变化包括：

使用gulp工具或grunt工具监听所述Freemarker模板文件和所述JSON数据集的变化。

进一步，在本发明所述的FTL模板的实时预览方法中，在所述将HTML网页文件发送至客户端进行显示之后还包括步骤：

在网页显示模板选择区域，所述模板选择区域显示至少两种Freemarker模板文件；

所述模板选择区域接收模板选择指令后加载选定的Freemarker模板文件以及所述Freemarker模板文件对应的JSON数据集，使用Freemarker引擎进行编译，并将生成的HTML网页文件发送至客户端进行更新显示。

进一步，在本发明所述的FTL模板的实时预览方法中，所述在网页显示模板选择区域包括：

在接收到模板选择指令后获取已存储的所有Freemarker模板文件的模板列表，在网页上渲染出模板选择区域并显示所述模板列表。

进一步，在本发明所述的FTL模板的实时预览方法中，所述在网页上渲染出模板选择区域并显示所述模板列表包括：

在网页上渲染出下拉选择框并在所述下拉选择框显示所述模板列表。

进一步，在本发明所述的FTL模板的实时预览方法中，在所述将HTML网页文件发送至客户端进行显示之后还包括步骤：

接收到模板切换指令；

读取所述模板切换指令对应的Freemarker模板文件和JSON数据集；

使用Freemarker引擎渲染所述Freemarker模板文件以生成HTML网页文件，将更新后HTML网页文件发送至客户端进行显示。

另外，本发明还提供一种计算机可读存储介质，所述计算机可读存储介质存储有计算机程序，所述计算机程序适于处理器进行加载，以执行如上述的FTL模板的实时预览方法的步骤。

另外，本发明还提供一种计算机，包括存储器和处理器，所述存储器中存储有计算机程序，所述处理器通过调用所述存储器中存储的所述计算机程序，执行如上述的FTL模板的实时预览方法的步骤。

实施本发明的一种FTL模板的实时预览方法、存储介质及计算机，具有以下有益效果：本发明通过nodejs程序实现Freemarker模板和json数据的实时预览，并支持在修改后自动刷新页面，从而节约开发时间，提高开发效率。

附图说明

下面将结合附图及实施例对本发明作进一步说明，附图中：

图1是本发明实施例提供的FTL模板的实时预览方法的程序框架图；

图2是本发明实施例提供的FTL模板的实时预览方法的流程图。

具体实施方式

为了对本发明的技术特征、目的和效果有更加清楚的理解，现对照附图详细说明本发明的具体实施方式。

在网页设计过程中，现有技术的实现方式是将所有功能都集成在一个nodejs程序中，如果要增加新的功能或修改现有功能，需要修改整个程序。因此，可以考虑将程序拆分成多个模块，以便更好地实现功能扩展和维护。

另外，现有技术的实现方式是通过配置文件来实现Freemarker模板文件、json数据和css样式的配置，但如果需要扩展新的配置项，需要修改配置文件和程序代码。因此可以考虑增加扩展性支持，以便更好地满足不同的需求。

在一个优选实施例中，参考图1，为本实施例提供FTL模板的实时预览方法的程序框架图。从图中可以看出，该框架是基于Node.js程序环境，框架包括FreeMarker和json数据文件、配置文件、Freemarker模板、下拉选择框、socket.io模块、客户端和内置web服务器，其中该框架中FreeMarker和json数据文件存储在存储空间中。该框架中配置文件包括Freemarker模板文件、JSON数据集和css样式路径等信息。下拉选择框用于选择不同模板进行渲染，socket.io模块用于向客户端发送刷新命令。客户端向内置web服务器请求网页，内置web服务器根据请求向客户端提供服务。

该框架基于Node.js程序环境进行整体控制和实现，Node.js发布于2009年5月，由Ryan Dahl开发，是一个基于Chrome V8引擎的JavaScript运行环境，使用一个事件驱动、非阻塞式I/O模型，让JavaScript运行在服务端的开发平台。Node.js具体技术可参考现有技术，在此不再赘述。

进一步，基于上述程序框架图，本实施例提供一种FTL模板的实时预览方法，该FTL模板的实时预览方法应用于网页开发。首先对FTL进行简单说明，FreeMarker是免费的，基于Apache许可证2.0版本发布，其模板编写为FreeMarker Template Language(FTL)，属于简单、专用的语言。需要准备数据在真实编程语言中来显示，比如数据库查询和业务运算，之后模板显示已经准备好的数据。

具体的，参考图2，该FTL模板的实时预览方法包括下述步骤：

步骤S1：预先存储建立网页所需的Freemarker模板文件、JSON数据集和css样式文本，在Node.js程序中建立config.js的配置文件，配置文件包括Freemarker模板文件、JSON数据集和css样式文本的路径信息及其之间的关联信息。

具体的，在设计网页前需要预先存储建立网页所需的Freemarker模板文件、JSON数据集和css样式文本，可以理解，Freemarker模板文件、JSON数据集和css样式文本可存储在相同位置，也可存储在不同位置。作为选择，为使网页设计多样化，可存储多个Freemarker模板文件、多个JSON数据集和多个css样式文本，以及设置不同Freemarker模板文件、JSON数据集和css样式文本之间的关联关系。

存储完成后，在Node.js程序中建立config.js的配置文件，配置文件包括Freemarker模板文件、JSON数据集和css样式文本的路径信息及其之间的关联信息，其中路径信息是指Freemarker模板文件、JSON数据集和css样式文本的存储路径，即生成网页时可从路径信息中获取到Freemarker模板文件、JSON数据集和css样式文本；关联信息是指Freemarker模板文件、JSON数据集和css样式文本之间的对应关系，例如选择某一Freemarker模板文件后，可根据关联信息获取与该Freemarker模板文件对应的JSON数据集和css样式文本。

可以理解，不同网页建立过程中可能会涉及其他信息，所以配置文件除了包括Freemarker模板文件、JSON数据集和css样式文本的路径信息及其之间的关联信息之外，还可在配置文件中进行设置其他网页建立需要的信息，本领域技术人员在本实施例的技术构思上进行适应性设置即可。

步骤S2：启动网页程序后读取配置文件，根据配置文件创建web服务器，根据配置文件以及Freemarker模板文件、JSON数据集和css样式文本生成HTML网页文件，将HTML网页文件发送至客户端进行显示。

具体的，启动网页程序后自动读取设置好的配置文件，根据配置文件创建web服务器。进而根据配置文件中的路径信息读取对应的Freemarker模板文件、JSON数据集和css样式文本，以及根据配置文件的关联信息将同一网页的Freemarker模板文件、JSON数据集和css样式文本生成HTML网页文件，将HTML网页文件保存到内存(缓存)中，并进一步将HTML网页文件发送至客户端进行显示。作为选择，客户端为浏览器。

需要说明的是，FreeMarker是一款模板引擎：即一种基于模板和要改变的数据，并用来生成输出文本(HTML网页、电子邮件、配置文件、源代码等)的通用工具。FreeMarker的具体技术可参考现有技术，在此不再赘述。

JSON数据集是一种独立于编程语言和平台的轻量级数据交换方式，因JSON数据集只是一种数据交换方式，与编程语言没有依赖关系，所以各种支持JSON数据集的编程语言，都会有对其进行解析的方法。JSON数据集的具体技术可参考现有技术，在此不再赘述。

css样式文本，即层叠样式表(英文全称：Cascading Style Sheets，css)是一种用来表现HTML或XML等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。css样式文本的具体技术可参考现有技术，在此不再赘述。

作为选择，当前的实现方式是直接读取文件，存在文件安全性问题。因此，可以考虑增加安全性支持，例如限制访问文件的路径或者使用加密算法对文件进行加密等。

步骤S3：使用监听模块监听Freemarker模板文件和JSON数据集的变化，在监测到Freemarker模板文件和/或JSON数据集的变化时发送刷新命令至客户端，客户端重新编译Freemarker模板文件并显示更新后的HTML网页文件。

具体的，在渲染Freemarker模板文件并显示后，Freemarker模板文件和JSON数据集在网页设计过程中可能发生变化，因此使用监听模块监听Freemarker模板文件和JSON数据集的变化。在监测到Freemarker模板文件变化时，或监测到JSON数据集的变化时，或监测到Freemarker模板文件和JSON数据集同时变化时，发送刷新命令至客户端，客户端重新编译Freemarker模板文件并显示更新后的HTML网页文件。

本实施例通过nodejs程序实现Freemarker模板和json数据的实时预览，并支持在修改后自动刷新页面，从而节约开发时间，提高开发效率。

在一些实施例的FTL模板的实时预览方法中，根据配置文件以及Freemarker模板文件、JSON数据集和css样式文本生成HTML网页文件包括：加载配置文件关联的Freemarker模板文件、JSON数据集和css样式文本生后，使用Freemarker引擎进行编译，将生成的HTML网页文件保存至内存中。本实施例使用Freemarker引擎进行编译，提高程序的效率和稳定性。

在一些实施例的FTL模板的实时预览方法中，使用监听模块监听Freemarker模板文件和JSON数据集的变化包括：使用Node.js程序中的fs.watch监听Freemarker模板文件和JSON数据集的变化。Node.js程序中的fs.watch具体监听参数设置，可参考现有技术。

在一些实施例的FTL模板的实时预览方法中，使用监听模块监听Freemarker模板文件和JSON数据集的变化包括：使用Node.js程序中的fs.watchFile监听Freemarker模板文件和JSON数据集的变化。Node.js程序中的fs.watchFile具体监听参数设置，可参考现有技术。

在一些实施例的FTL模板的实时预览方法中，使用监听模块监听Freemarker模板文件和JSON数据集的变化包括：使用gulp工具或grunt工具监听Freemarker模板文件和JSON数据集的变化。gulp工具和grunt工具也能实现自动刷新网页的功能，这些构建工具可以监控文件变化，自动编译、压缩和刷新网页，提高开发效率。

在一些实施例的FTL模板的实时预览方法中，网页设计中会有多个Freemarker模板文件，为方便显示Freemarker模板文件供用户选择，本实施例在将HTML网页文件发送至客户端进行显示之后还包括步骤：

在网页显示模板选择区域，模板选择区域显示至少两种Freemarker模板文件，可以理解，这里所说的显示至少两种Freemarker模板文件是指显示至少两种Freemarker模板文件的文件名称。具体的，在网页显示模板选择区域时，首先在接收到模板选择指令后获取已存储的所有Freemarker模板文件的模板列表，然后在网页上渲染出模板选择区域并显示模板列表，模板列表包括所有Freemarker模板文件的文件名称。可以理解，模板列表中每个Freemarker模板文件的文件名称均与Freemarker模板文件进行关联，在选择模板列表中的文件名称后，能够读取到与之对应的Freemarker模板文件。

优选的，模板选择区域以下拉选择框的形式显示，在网页上渲染出下拉选择框并在下拉选择框显示模板列表。

进一步，模板选择区域接收模板选择指令后加载选定的Freemarker模板文件以及Freemarker模板文件对应的JSON数据集，使用Freemarker引擎进行编译，并将生成的HTML网页文件发送至客户端进行更新显示。

本实施例使用下拉显示框显示模板列表，网页设计人员可在下拉显示框中快速选择和切换模板，提高程序的可用性和用户体验。

在一些实施例的FTL模板的实时预览方法中，在将HTML网页文件发送至客户端进行显示之后还包括步骤：

接收到模板切换指令，模板切换指令用于切换不同的Freemarker模板文件。读取模板切换指令对应的Freemarker模板文件和JSON数据集，使用Freemarker引擎渲染Freemarker模板文件以生成HTML网页文件，将更新后HTML网页文件发送至客户端进行显示。

本实施例能够根据网页设计者的模板切换指令快速切换模板并完成渲染显示，大大提高开发效率。

在一个优选实施例中，本实施例的计算机可读存储介质存储有计算机程序，计算机程序适于处理器进行加载，以执行如上述实施例的FTL模板的实时预览方法的步骤。

在一个优选实施例中，本实施例的计算机包括存储器和处理器，存储器中存储有计算机程序，处理器通过调用存储器中存储的计算机程序，执行如上述实施例的FTL模板的实时预览方法的步骤。

作为选择，除了在本地搭建开发环境，还可以使用云服务，例如AWS、Azure、GoogleCloud等，来实现在线开发和部署。这些云服务提供了丰富的工具和服务，能够快速构建和部署网站，同时也具有高度的可扩展性和安全性。在云服务上设计网页的过程为上述本地设计相似，本实施例不再赘述。

综上实施例所述，传统的网站制作方式通常需要手动编写HTML、CSS和JavaScript代码，工作量较大，容易出现错误。而本发明方法可以通过模板和数据自动生成网页，大大提高生产效率。同时传统的网站制作方式需要具备一定的前端开发和设计能力，对于非专业人士来说较难上手。而本发明方法可以通过配置文件和模板引擎，降低门槛成本，使更多人可以轻松制作网站。再者，传统的网站制作方式容易出现代码冗余、结构混乱、样式不一致等问题，影响了网站的质量和用户体验。

本发明方法支持通过配置文件配置不同模板和数据对应的路径和样式，同时支持动态加载CSS和JavaScript，支持缓存机制等，使得用户可以根据不同需求进行灵活配置和定制。通过模板和数据自动生成网页，可以大大提高生产效率，降低制作网页的成本。通过模板和数据生成规范化、结构清晰、样式一致的网页，可以提高网站的质量和用户体验，减少出现代码冗余、结构混乱、样式不一致等问题的可能性。

总之，与传统模板实时渲染相比，本发明方法可以通过自动生成网页和实时预览，在提高生产效率和方便性，降低门槛成本等方面同时，通过配置文件和模板引擎等技术手段，提高网站质量和灵活性。因此，本发明方法具有较高的实用价值，可以满足不同用户的需求，同时也可以促进互联网的发展和进步。

本说明书中各个实施例采用递进的方式描述，每个实施例重点说明的都是与其他实施例的不同之处，各个实施例之间相同相似部分互相参见即可。对于实施例公开的装置而言，由于其与实施例公开的方法相对应，所以描述的比较简单，相关之处参见方法部分说明即可。

专业人员还可以进一步意识到，结合本文中所公开的实施例描述的各示例的单元及算法步骤，能够以电子硬件、计算机软件或者二者的结合来实现，为了清楚地说明硬件和软件的可互换性，在上述说明中已经按照功能一般性地描述了各示例的组成及步骤。这些功能究竟以硬件还是软件方式来执行，取决于技术方案的特定应用和设计约束条件。专业技术人员可以对每个特定的应用来使用不同方法来实现所描述的功能，但是这种实现不应认为超出本发明的范围。

结合本文中所公开的实施例描述的方法或算法的步骤可以直接用硬件、处理器执行的软件模块，或者二者的结合来实施。软件模块可以置于随机存储器(RAM)、内存、只读存储器(ROM)、电可编程ROM、电可擦除可编程ROM、寄存器、硬盘、可移动磁盘、CD-ROM、或技术领域内所公知的任意其它形式的存储介质中。

以上实施例只为说明本发明的技术构思及特点，其目的在于让熟悉此项技术的人士能够了解本发明的内容并据此实施，并不能限制本发明的保护范围。凡跟本发明权利要求范围所做的均等变化与修饰，均应属于本发明权利要求的涵盖范围。