CN115712793A - 全景前端文档站点生成方法及系统 - Google Patents

Abstract

本发明提供了一种全景前端文档站点生成方法及系统，涉及文档处理技术领域，包括：站点初始化步骤：按约定方式使用npm命令初始化生成对应需求的文档站点；站点配置步骤：生成所述文档站点后，配置部署参数；打包编译步骤：配置部署参数完成后，使用npm命令打包编译所述文档站点；部署步骤：将打包编译好的文档站点部署至服务器上。本发明能够增加文档站点的支持场景，提高用户体验，解决不同环境的部署问题。

Description

全景前端文档站点生成方法及系统

技术领域

本发明涉及文档处理技术领域，具体地，涉及一种全景前端文档站点生成方法及系统。

背景技术

目前市场上文档站点生成器，如Docsify、Vuepress等都只能支持静态文档生成，功能比较单一，如果公司或者个人有需要动态发布文章或者文档的需求，则需要根据需求从零开始搭建自己的文档站点，涉及到前后端的开发，工作量大、失效慢、成本也非常高。

发明内容

针对现有技术中的缺陷，本发明提供一种全景前端文档站点生成方法及系统。

根据本发明提供的一种全景前端文档站点生成方法及系统，所述方案如下：

第一方面，提供了一种全景前端文档站点生成方法，所述方法包括：

站点初始化步骤：按约定方式使用npm命令初始化生成对应需求的文档站点；

站点配置步骤：生成所述文档站点后，配置部署参数；

打包编译步骤：配置部署参数完成后，使用npm命令打包编译所述文档站点；

部署步骤：将打包编译好的文档站点部署至服务器上。

优选地，所述站点初始化步骤包括：

步骤S1.1：全局安装文档生成器，执行命令npm i-g multipleDoc；

步骤S1.2：初始化生成文档站点，执行命令mtpdoc init，选择对应场景，生成文档站点项目工程。

优选地，所述站点配置步骤包括：进入所述文档站点项目工程根目录，打开config目录下的生产环境配置文件config.prod.js，修改对应的配置信息。

优选地，所述打包编译步骤包括：在站点配置步骤的基础上，进入所述文档站点项目工程根目录，执行命令npm run build:prod，打包编译所述文档站点。

优选地，所述部署步骤包括：

步骤S4.1：将打包编译好的文档站点，压缩上传至需要部署的服务器；

步骤S4.2：解压上传的文档站点项目工程；

步骤S4.3：解压好文档站点项目工程后，进入文档站点项目工程根目录执行pm2start app.json命令，启动文档站点；

步骤S4.4：等待服务启动成功后，即能够使用文档站点。

第二方面，提供了一种全景前端文档站点生成系统，所述系统包括：

站点初始化模块：按约定方式使用npm命令初始化生成对应需求的文档站点；

站点配置模块：生成所述文档站点后，配置部署参数；

打包编译模块：配置部署参数完成后，使用npm命令打包编译所述文档站点；

部署模块：将打包编译好的文档站点部署至服务器上。

优选地，所述站点初始化模块包括：

模块M1.1：全局安装文档生成器，执行命令npm i-g multipleDoc；

模块M1.2：初始化生成文档站点，执行命令mtpdoc init，选择对应场景，生成文档站点项目工程。

优选地，所述站点配置模块包括：进入所述文档站点项目工程根目录，打开config目录下的生产环境配置文件config.prod.js，修改对应的配置信息。

优选地，所述打包编译模块包括：在站点配置模块的基础上，进入所述文档站点项目工程根目录，执行命令npm run build:prod，打包编译所述文档站点。

优选地，所述部署模块包括：

模块M4.1：将打包编译好的文档站点，压缩上传至需要部署的服务器；

模块M4.2：解压上传的文档站点项目工程；

模块M4.3：解压好文档站点项目工程后，进入文档站点项目工程根目录执行pm2start app.json命令，启动文档站点；

模块M4.4：等待服务启动成功后，即能够使用文档站点。

与现有技术相比，本发明具有如下的有益效果：

1、本发明使用简单的npm命令来选择文档使用场景所需功能，并生成文档系统代码，开箱即用，免除了开发系统的流程和成本；

2、支持前端全景文档使用场景，包括静态文档、动态文档、交互式组件文档等功能，无需再自行开发组合，也无需像市场现有方案那样需要根据各种不同的使用场景来选择不同的解决方案，搭建部署多个不同功能场景的系统才能满足各种使用场景，本发明只需一次命令安装，一次部署即可满足不同场景的需求。

3、支持多种部署方式，支持容器化部署和Linux虚拟机部署，无需根据公司部署方式再自行开发改造，本发明只要按需选择部署方式即可。

附图说明

通过阅读参照以下附图对非限制性实施例所作的详细描述，本发明的其它特征、目的和优点将会变得更明显：

图1为文档站点生成流程图；

图2为动态文档站点实现流程图。

具体实施方式

下面结合具体实施例对本发明进行详细说明。以下实施例将有助于本领域的技术人员进一步理解本发明，但不以任何形式限制本发明。应当指出的是，对本领域的普通技术人员来说，在不脱离本发明构思的前提下，还可以做出若干变化和改进。这些都属于本发明的保护范围。

本发明实施例提供了一种全景前端文档站点生成方法，参照图1所示，该方法具体包括：

站点初始化步骤：按约定方式使用npm命令初始化生成对应需求的文档站点。

其中，站点初始化步骤具体包括：全局安装文档生成器，执行命令npm i-gmultipleDoc；并初始化生成文档站点，执行命令mtpdoc init，选择对应场景，生成文档站点项目工程。

站点配置步骤：生成文档站点后，配置部署参数，如服务端口、数据库地址等。进入文档站点项目工程根目录，打开config目录下的生产环境配置文件config.prod.js，修改对应的配置信息。

打包编译步骤：配置部署参数完成后，使用npm命令打包编译文档站点。进入文档站点项目工程根目录，执行命令npm run build:prod，打包编译文档站点。

部署步骤：将打包编译好的文档站点部署至服务器上。

具体地，部署步骤包括：

1)将打包编译好的文档站点，压缩上传至需要部署的服务器。

2)解压上传的文档站点项目工程。

3)解压好文档站点项目工程后，进入文档站点项目工程根目录执行pm2 startapp.json命令，启动文档站点。

4)等待服务启动成功后，即能够使用文档站点。

本发明实现的具体功能包括：

1、静态文档编写发布功能，该功能主要是集成了Dosify的静态文档生成器和gitlab的webhook(本实施例中的webhook是指gitlab仓库中一种web回调,由某些事件所触发，比如提交代码或者推送代码)发布，用户本地创建编辑好静态文档的markdown文件后，通过git工具commi创建的文档文件即可完成发布。(本实施例中的gitlab是一个用于仓库管理系统的开源项目，使用git作为代码管理工具，并在此基础上搭建起来的Web服务)。

2、交互式前端组件文档发布功能，该功能主要是集成了Storybook插件(Storybook是UI组件的开发环境，它允许开发者浏览组件库，查看每个组件的不同状态，以及交互地开发和测试组件)，实现了前端UI组件交互式文档的编写，支持编写React、Vue框架组件交互文档，集成的knobs(knobs插件提供一个表单控制台，用户可以通过表单控制台来改变组件相关属性，展示不同属性下的组件)插件可动态地修改组件参数来验证交互，支持用户在页面上直接查看源码，使用户可以很直观地管理和查看UI组件的文档。

3、动态文档编写发布功能，集成了markdown-it-vue模块，支持在线编写markdowm文档，并实现文档格式的实时预览，以及文档的一键部署。一键部署主要包含了文档数据的发布和存储，本发明主要采用了mysql数据库存储文档数据。

4、命令式安装功能，本发明通过脚手架的模式，让用户可以直接通过npm命令根据需求场景选择对应场景功能创建所需的文档系统。

5、多场景部署功能，支持容器化部署和Linux虚拟机部署。

本发明还提供了一种全景前端文档站点生成系统，本领域技术人员可以将本发明提供的一种全景前端文档站点生成方法，理解为全景前端文档站点生成系统的具体实施方式，即所述全景前端文档站点生成系统可以通过执行所述全景前端文档站点生成方法的步骤流程予以实现。

本发明实施例提供的动态文档站点实现核心流程，参照图2所示，具体包括：

1、用户访问部署在服务器的全景文档站点系统，系统会返回对应的文档发布页面。

2、在发布页面用户编辑好文档内容后，点击发布按钮即可进行文档发布。

3、站点系统接收到用户发布文档内容后，文档站点会将文档内容写入保存在数据库中，即完成了动态文档的发布功能。

4、当用户再次访问文档站点系统查看发布的文档时，站点系统会读取数据库中对应的文档内容，返回给用户，即完成了文档的查看功能。

本发明实施例提供的一种全景前端文档站点生成方法及系统，是一个静态文档和动态文档站点生成器，公司或个人可以使用该生成器根据自己文档站点需求场景自动生成对应的文档站点。生成的站点支持前端静态、动态等多种场景文档的编辑和发布，从而解决了目前搭建多种场景文档站点需要开发、集成、部署多个解决方案系统的问题，本方案只要一次部署即可适用多场景。

本发明支持静态文档、动态文档、组件文档等场景的文档站点生成，大大增加了文档站点的支持场景；支持使用markdown语法在线编写，实时预览，提高了用户体验；支持容器化部署、和虚拟机部署，解决了不同环境的部署问题。

本领域技术人员知道，除了以纯计算机可读程序代码方式实现本发明提供的系统及其各个装置、模块、单元以外，完全可以通过将方法步骤进行逻辑编程来使得本发明提供的系统及其各个装置、模块、单元以逻辑门、开关、专用集成电路、可编程逻辑控制器以及嵌入式微控制器等的形式来实现相同功能。所以，本发明提供的系统及其各项装置、模块、单元可以被认为是一种硬件部件，而对其内包括的用于实现各种功能的装置、模块、单元也可以视为硬件部件内的结构；也可以将用于实现各种功能的装置、模块、单元视为既可以是实现方法的软件模块又可以是硬件部件内的结构。

以上对本发明的具体实施例进行了描述。需要理解的是，本发明并不局限于上述特定实施方式，本领域技术人员可以在权利要求的范围内做出各种变化或修改，这并不影响本发明的实质内容。在不冲突的情况下，本申请的实施例和实施例中的特征可以任意相互组合。

Claims (10)

1.一种全景前端文档站点生成方法，其特征在于，包括：

站点初始化步骤：按约定方式使用npm命令初始化生成对应需求的文档站点；

站点配置步骤：生成所述文档站点后，配置部署参数；

打包编译步骤：配置部署参数完成后，使用npm命令打包编译所述文档站点；

部署步骤：将打包编译好的文档站点部署至服务器上。

2.根据权利要求1所述的全景前端文档站点生成方法，其特征在于，所述站点初始化步骤包括：

步骤S1.1：全局安装文档生成器，执行命令npm i-g multipleDoc；

步骤S1.2：初始化生成文档站点，执行命令mtpdoc init，选择对应场景，生成文档站点项目工程。

3.根据权利要求2所述的全景前端文档站点生成方法，其特征在于，所述站点配置步骤包括：进入所述文档站点项目工程根目录，打开config目录下的生产环境配置文件config.prod.js，修改对应的配置信息。

4.根据权利要求3所述的全景前端文档站点生成方法，其特征在于，所述打包编译步骤包括：在站点配置步骤的基础上，进入所述文档站点项目工程根目录，执行命令npm runbuild:prod，打包编译所述文档站点。

5.根据权利要求4所述的全景前端文档站点生成方法，其特征在于，所述部署步骤包括：

步骤S4.1：将打包编译好的文档站点，压缩上传至需要部署的服务器；

步骤S4.2：解压上传的文档站点项目工程；

步骤S4.3：解压好文档站点项目工程后，进入文档站点项目工程根目录执行pm2startapp.json命令，启动文档站点；

步骤S4.4：等待服务启动成功后，即能够使用文档站点。

6.一种全景前端文档站点生成系统，其特征在于，包括：

站点初始化模块：按约定方式使用npm命令初始化生成对应需求的文档站点；

站点配置模块：生成所述文档站点后，配置部署参数；

打包编译模块：配置部署参数完成后，使用npm命令打包编译所述文档站点；

部署模块：将打包编译好的文档站点部署至服务器上。

7.根据权利要求6所述的全景前端文档站点生成系统，其特征在于，所述站点初始化模块包括：

模块M1.1：全局安装文档生成器，执行命令npm i-g multipleDoc；

模块M1.2：初始化生成文档站点，执行命令mtpdoc init，选择对应场景，生成文档站点项目工程。

8.根据权利要求7所述的全景前端文档站点生成系统，其特征在于，所述站点配置模块包括：进入所述文档站点项目工程根目录，打开config目录下的生产环境配置文件config.prod.js，修改对应的配置信息。

9.根据权利要求8所述的全景前端文档站点生成系统，其特征在于，所述打包编译模块包括：在站点配置模块的基础上，进入所述文档站点项目工程根目录，执行命令npm runbuild:prod，打包编译所述文档站点。

10.根据权利要求9所述的全景前端文档站点生成系统，其特征在于，所述部署模块包括：

模块M4.1：将打包编译好的文档站点，压缩上传至需要部署的服务器；

模块M4.2：解压上传的文档站点项目工程；

模块M4.3：解压好文档站点项目工程后，进入文档站点项目工程根目录执行pm2startapp.json命令，启动文档站点；

模块M4.4：等待服务启动成功后，即能够使用文档站点。

Images