一次生成专题网页模板、自动发布专题网页的方法

摘要

本发明提供一种一次生成专题网页模板、自动发布专题网页的方法，包括：将专题网页内容元素拆分存储到数据库表中，其中网页正文字段存储嵌入业务数据的自定义HTML5模板代码段；使用网站管理后台的富文本编辑器、浏览器开发者工具及其他网页设计工具制作自定义的网页模板；编写后端定时器程序，定时自动查询数据库，将业务数据嵌入网页正文自定义HTML5模板，并存储数据库；编写前端程序，拼接生成完整的符合HTML5规范的网页代码，实现网页初始化时自动加载最新专题网页。本发明不限制前后端程序的编程语言及关系数据库类型，可完美地适配PC电脑进行显示，并且能够适配Android及IOS智能手机和常见Pad屏幕展示。

说明书

技术领域

本发明涉及网页(web)相关技术领域，具体涉及一种一次生成专题网页模板、自动发布专题网页的方法，即采用专题网页定期发布一定周期内的业务数据是众多门户网站必不可少的一种业务诉求。

背景技术

目前，很多政府、企事业单位的门户网站设置专栏，专栏下设置各种分类专题，定期向社会大众公布过去一定周期内(如每周、每日)的业务数据。目前比较常见的专题网页制作方式有以下两种：

1.人工搜集数据，制作专题。

人工收集数据成本高，收集速度慢，而且容易出错；人工制作专题，往往需要通过一些网页制作工具嵌入数据后制作静态网页，调整样式后发布新网页。这种方式下，搜集数据和制作网页的过程均属于低效的重复工作。

2.数据自动收集，人工制作网页。

数据自动收集之后，人工将数据嵌入网页编辑器，制作网页。这种方式的优点是数据收集快，但网页制作也是重复工作，效率不高；不同的操作者进行同一专题制作，很难生成风格统一、美观大方的内容网页。

发明内容

本发明的技术任务是解决现有技术的不足，提供一种一次生成专题网页模板、自动发布专题网页的方法。

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

1、本发明提供一种生成专题网页的自定义模板、自动发布网页的方法，实现步骤如下：

步骤1、将专题网页内容元素拆分存储到数据库表中，其中网页正文字段存储嵌入业务数据的自定义HTML5模板代码段；其他网页内容元素在数据库表字段中只保留文字；

步骤2、使用网站管理后台的富文本编辑器、浏览器开发者工具及其他网页设计工具Dreamweaver制作自定义的网页模板；

步骤3、编写后端定时器程序，定时自动查询数据库，将业务数据嵌入网页正文自定义HTML5模板，并存储数据库；

步骤4、编写前端程序，拼接生成完整的符合HTML5规范的网页代码，实现网页初始化时自动加载最新专题网页。

进一步地，步骤1中其他网页内容元素包括专栏类型、专题类型、网页标题、内容来源、发布人、发布时间、删除标记。

进一步地，步骤2具体实现方式如下：

步骤2.1使用网站内容管理后台的富文本编辑器来生成专题测试网页；

步骤2.2使用网站后台富文本编辑器、PC电脑浏览器开发者工具及Dreamweaver网页设计工具进行专题测试网页的样式调优；

步骤2.3使用浏览器上的开发者工具提取网页正文的自定义HTML5模板代码段。

进一步地，步骤3具体实现方式如下：

步骤3.1从自定义HTML5模板代码中提取出嵌入业务数据的标签代码片段，掐头去尾得到模板组成部分Part1、Part2、Part3；

步骤3.2Part2代表这段标签代码，Part1代表标签之前的所有代码，Part3代表标签之后的所有代码；

步骤3.3后端定时器程序查询执行周期内的所有业务数据count条，针对每条记录生成一个标签；

步骤3.4所有的count组标签代码拼接起来，生成新的Part2，命名为NewPart2；

步骤3.5拼接Part1、NewPart2、Part3组成新的网页正文HTML5代码段，保存到数据库中。

进一步地，所述代码段Part2为标签代码段、

标签代码段或

标签代码段。

进一步地，步骤4中编写前端程序，拼接生成完整的符合HTML5规范的网页代码，具体实现方式如下：

步骤4.1查询数据表中网页标题、内容来源、发布时间等其他网页内容元素字段，插入各自的HTML标签页中；

步骤4.2查询数据表中的网页正文字段，将内容动态设置到

标签中。

进一步地，步骤4中网页初始化时自动加载最新专题网页，具体实现方式如下：

步骤4.3专栏下某个专题网页初始化时，自动调用后端接口查询专题列表；

步骤4.4接口返回数据按照发布时间倒序排列，最新的一条专题会显示在列表最上方，如此实现专题网页的自动发布。

进一步地，步骤3中后端定时器程序编程语言的类型为Java、Node.js或PHP。

进一步地，步骤4中网页前端编程语言为VueJS、JavaScript、AngularJS或ReactJS。

进一步地，所述业务数据库的类型为常见的MySQL、Oracle、SqlServer关系型数据库以及人大金仓、达梦、瀚高、金蝶、优炫国产数据库。

本发明的一次生成专题网页模板、自动发布专题网页的方法与现有技术相比所产生的有益效果是：

本发明将专题网页内容元素拆分存储到数据库表中，可生成专题网页正文的自定义模板，可定时自动获取业务数据存储到数据库中，前端程序拼接生成规范的HTML5代码，并且实现自动发布专题网页。

本发明的使用者，不限制前后端程序的编程语言及关系数据库类型。本发明中自定义网页模板生成的专题网页，可完美地适配PC电脑进行显示，并且能够适配Android及IOS智能手机和常见Pad屏幕展示。

附图说明

为了更清楚地描述本发明一次生成专题网页模板、自动发布专题网页的方法的工作原理，下面将附上简图作进一步说明。

图1示出了本发明中专栏和专题的关系，一个专栏可包含一个或多个专题；

图2示出了本发明创建专题内容存储数据表，生成专题网页正文模板，定时自动生成专题网页并存储数据库，自动发布网页的流程。

具体实施方式

结合附图1、2，本发明提供一种生成专题网页的自定义模板、自动发布网页的方法，实现步骤如下：

步骤1.将专题网页内容元素拆分存储到数据库表中，具体实现方法包括：

1.1建立一张内容管理表Table1，字段包括：专栏类型、专题名称、网页标题、网页正文、内容来源、发布人、发布时间、删除标记。

将网页内容元素进行拆分，字段网页正文存储HTML5代码片段，其它内容字段如专栏类型、专题类型、网页标题、内容来源、发布人只保存文字。

1.2一个专栏下可以展示多个专题。例如图1，某门户网站下设置公告专栏，专栏下设每日办事进度、每周业务量统计等多个专题。本发明中，以专题每日办事进度统计表格网页举例，以下简称该专题为Topic1。

取出步骤1.1Table1表中网页标题、网页正文、内容来源、发布时间等几个字段，可通过本方法拼接为适配PC机及智能手机屏幕显示的完整的HTML5规范代码。

1.3针对专题Topic1,对应Table1表的字段网页正文存储HTML5代码段，包含css样式，并且已嵌入真实业务数据。这段HTML5代码采用富文本编辑器和浏览器的开发者工具制作。

步骤2.使用网站管理后台的富文本编辑器、PC电脑浏览器开发者工具及其他网页设计工具生成自定义网页正文模板，具体实现方法包括：

2.1门户网站应该已配备一个内容管理后台，并且内容编辑页面已集成富文本编辑器。

富文本编辑器可选择百度UEditor、CKEditor、wangEditor等，带插入表格功能即可。

2.2网站的专题管理页面包含添加专题、撤回专题、删除专题、专题草稿箱等功能。

添加专题时如果保存草稿或者撤回已发布专题后，会在专题草稿箱中找到对应专题。

添加专题编辑页面包含专栏类型选择框、专题名称、网页标题、内容来源、网页正文富文本编辑器、以及取消、保存草稿和发布三个按钮。

打开专题管理页面，选择专栏类型，点击添加专题Topic1，输入专题名称、网页标题、内容来源。在富文本编辑器内插入表格，输入行数和列数，如2行、4列。第一行为参数标题，第二行为业务数据，输入参数标题序号、业务分类、受理编号、办理进度和第二行数据data1、data2、data3、data4，点击发布按钮，这条专题会保存进数据表Table1中。其中，字段发布人可取值为当前管理后台登陆人账号，字段发布时间可取值为当前系统时间，字段删除标记取值为未删除。

2.3使用PC电脑浏览器(如Chrome浏览器)打开步骤2.2中发布的网页，查看页面显示效果。如果显示效果不佳，可以选择按F12键打开开发者工具，打开Elements页签，调整右侧栏目style样式参数进行页面效果调优。或者结合以下方式：在管理后台专题管理页面上，撤回该专题；然后进入专题草稿列表页面，找到该专题，使用富文本编辑器调整专题内容及样式后，点击发布按钮重新发布。

该步骤中的网页样式调优还可使用Dreamweaver等网页设计工具，浏览器还可以使用Firefox、360浏览器等；打开开发者工具的另外一种方式：如Google浏览器，点击右上角

2.4如果有必要，可重复执行步骤2.3，调整页面显示效果，直到专题网页显示效果满足要求为止。

在浏览器重新打开步骤2.2中发布网页，打开开发者工具，在Elements标签下会展示完整的HTML5代码；开发者工具上点击

步骤3.编写后端定时器程序，定时自动查询数据库，将业务数据嵌入网页正文自定义HTML5模板，并存储数据库，具体实现方法包括：

3.1针对专题Topic1，编写一个后端定时器程序，根据步骤2.4中自定义网页模板Model,定时自动获取业务数据、生成网页正文HTML5代码(对应数据表Table1网页正文字段)，并存储到数据库。在后端代码定义一个字符串类型参数content表示该字段，content由三部分Part1、Part2、Part3拼接而成：

(1)步骤2.4模板Model中，

开始至标签下第一组结束的所有代码为第一部分Part1；

(2)包含count组

标签的代码段Part2。其中，假设定时器执行周期内办理的业务条数为count；将步骤2.4模板Model中标签中第二组标签的代码拷贝出来，将Model中的业务数据值data1、data2、data3、data4替换为变量par1、par2、par3、par4；定时器程序查询出当前周期内所有业务数据，遍历这count条记录，针对每一条业务数据，给变量par1、par2、par3、par4赋值，生成一段标签代码，将这些拼接起来即生成第二部分Part2。

(3)步骤2.4模板Model中

标签下最后一个之后(不包含该)至结束的所有代码为第三部分Part3。Part1、Part2、Part3示例HTML5代码如下：

3.2将步骤3.1中的网页正文content保存数据表Table1中。其中，字段网页标题赋值为****年**月**日的办事进度(取当前日期)，字段内容来源赋值为**部门，字段删除标记赋值为未删除。

步骤4.编写前端程序，拼接生成完整的符合HTML5规范的网页代码，以便HTML5规范能够解析并加载网页。本部分以智能手机端VueJS前端编程语言举例说明。

编写专题详情页Vue文件。其中，在部分嵌套内外两层

标签，内层

标签中再添加三部分内容：

(1)

标签中设置网页标题contentTitle；

(2)

标签，再添加一层

，设置内容来源contentSource、发布时间releaseTime；

(3)

标签中以v-html形式动态设置网页正文contentTxt。

智能手机前端程序VueJS关键示例代码如下：

步骤5.网页初始化时自动加载最新专题网页，具体实现方式如下：

用户访问网站专栏时，网页初始化即调用后端接口查询该专栏下专题列表，接口返回数据按照发布时间倒序排列，最新的一条专题会显示在列表最上方。

根据本发明提供的方案，后端定时器程序并未限制编程语言的类型，可以是Java、Node.js、PHP等。同样，网页前端编程语言不限于VueJS，也可使用JavaScript、AngularJS、ReactJS等。本发明提出方案的使用者，可以根据自己的技术栈，灵活选择自己熟悉的编程语言。

根据本发明提供的方案，业务数据库并未限制数据库的类型，可以使用常见的关系型数据库如MySQL、Oracle、SqlServer、Db2以及国产数据库如人大金仓、达梦、瀚高、金蝶、优炫等。

根据本发明提供的方案，专题网页正文模板也不限制于网页表格的

标签代码，我们也可以如法炮制地生成如

、

等其他形式的HTML5代码。

根据本发明提供的方案，专题网页模板生成的网页，既适用于PC电脑端浏览器显示，也能适配Android及IOS智能手机和PAD的屏幕进行展示。

显然，本领域的技术人员可以对本发明进行各种改动和变型而不脱离本发明的精神和范围。这样，倘若本发明的这些修改和变型属于本发明权利要求及其同等技术的范围之内，则本发明也意图包含这些改动和变型在内。