CN112130819A - 页面处理方法、页面处理装置、电子设备和计算机可读介质 - Google Patents

页面处理方法、页面处理装置、电子设备和计算机可读介质 Download PDF

Info

Publication number
CN112130819A
CN112130819A CN202010972963.3A CN202010972963A CN112130819A CN 112130819 A CN112130819 A CN 112130819A CN 202010972963 A CN202010972963 A CN 202010972963A CN 112130819 A CN112130819 A CN 112130819A
Authority
CN
China
Prior art keywords
file
html
directory
page processing
processing method
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Pending
Application number
CN202010972963.3A
Other languages
English (en)
Inventor
刘明
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Beijing Zhidemai Technology Co ltd
Original Assignee
Beijing Zhidemai Technology Co ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Beijing Zhidemai Technology Co ltd filed Critical Beijing Zhidemai Technology Co ltd
Priority to CN202010972963.3A priority Critical patent/CN112130819A/zh
Publication of CN112130819A publication Critical patent/CN112130819A/zh
Pending legal-status Critical Current

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/20—Software design
    • G06F8/24—Object-oriented
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90—Details of database functions independent of the retrieved data types
    • G06F16/95—Retrieval from the web
    • G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F40/00—Handling natural language data
    • G06F40/10—Text processing
    • G06F40/12—Use of codes for handling textual entities
    • G06F40/151—Transformation
    • G06F40/154—Tree transformation for tree-structured or markup documents, e.g. XSLT, XSL-FO or stylesheets
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F40/00—Handling natural language data
    • G06F40/10—Text processing
    • G06F40/166—Editing, e.g. inserting or deleting
    • G06F40/186—Templates

Abstract

本发明公开一种页面处理方法，包括：输入markdown文本文件；选择后台服务脚本，进行基础http服务搭建；收集有效的.md文件组成文件夹或目录；配置config文件，以确定配置.md文件和服务路由规则关系，根据配置创建路由，解析对应的.md文件生成.html；把对应的.html文件生成到指定的目录下，根据生成的.html目录产生新的站点进行服务器配置。本发明还公开页面处理装置、电子设备和计算机可读介质。

Description

页面处理方法、页面处理装置、电子设备和计算机可读介质
技术领域
本发明涉及计算机网络技术，具体属于数据处理技术领域。
背景技术
随着业务需求的变化和扩展，网站内容越来越多的页面需要运营人员来维护和编辑。但是运营人员对于网页制作和开发都是一窍不通，学习的话又需要很高的成本。通常运营使用后台传统的文本编辑器只能完成类似单个页面文章的提交和修改。对于一个新类型的需求文档说明网站或者合作资料文档网站，后台和前端开发人员需要设计开发各种类型的目录和配置结构才能满足一个新站的需求。迭代速度慢，而且人员成本很高。
部分运营和客服人员在现有已经成型的后台和前台界面下，通过文本编辑器文本入库，然后前端再根据接口进行数据渲染。新站点产品收集需求出产品原型，运营和客服人员整理组织文本文档，开发人员根据普通的文档编写html页面。
上述方式中，过度依赖各个开发工种，开发周期过长。运营需要新建站点文档，并且修改文章也需要不同开发人员进行介入。如果是后台编辑器，也有很大的样式兼容问题，需要多次调整和修改，很不灵活。
申请人发现：目前还没有通过其它文本文件就能直接解析成html，并且最终落地建成网站的解决方案。如何根据markdown文本文件生成html页面，并且最终能够让运营人员不学习代码技术，技术人员不编辑运营的文本文章就能展示出漂亮的网站，是本领域技术人员亟待解决的问题。
发明内容
本发明能够根据运营和客服人员给出的markdown文本文件，生成html页面，进行快速建站。
运营或客服人员可通过任意第三方markdown文本编辑器，编写文章或文案即可，运营或客服人员不需要了解html语言，也不需要过多的开发人员，运营人员仅仅需要把编辑好的makrdown文档编辑整理好，保存成.md后缀的文本文件，统一放到一个文件夹，打包发给开发人员，开发人员根据文件夹的目录结构和代码基础配置，就可以输出生成一个html页面站点。
markdown文档建站，其流程包括:
第一步：运营人员用markdown文本工具把文档保存成.md文件，打包发给开发人员；
第二步：开发人员用nodejs+koa进行http服务搭建，把运营人员给的文档放到项目/docs目录下；
第三步：开发人员根据/docs的.md文件，进行文件和路由的匹配关系，编写config.js配置文件；
第四步：nodejs读取config.js文件，根据配置创建对应的路由，解析对应的.md文件生成.html；
第五步：把对应的.html文件生成到/dist目录下；
第六步：根据生成的.html目录产生新的站点进行服务器配置。
附图说明
为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图做简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据提供的附图获得其他的附图。
图1为本发明的http服务搭建流程图；
图2为本发明的.md转化成.html流程图；
图3为本发明的读取config配置对于路由对应html文档流程图；
图4为本发明运营人员编辑的markdown文档文件截图；
图5为本发明图4中markdown文档转换为html页面的效果截图；
图6为本发明get请求接收的实现；
图7为本发明路由基本代码；
图8为本发明路由基本代码；
图9为本发明定义Markdown和HTML标签文档的对应关系；
图10为本发明marked部分代码截图；
图11为本发明marked部分代码截图；
图12为本发明marked部分代码截图；
图13为本发明marked部分代码截图；
图14为本发明marked部分代码截图；
图15为本发明配置config文件；
图16为本发明解析对应的.md文件生成.html；
图17为本发明把对应的.html文件生成到指定的目录下；和
图18为本发明把对应的.html文件生成到指定的目录下。
具体实施方式
下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清除、完整的描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。
参照附图详细说明根据本发明的一个实施例。
参照图1所示，详细说明本发明的http服务搭建流程图。
选择nodejs作为基础服务语言，然后选择KOA2作为开发框架，进行开发环境配置；
然后组织动态路由生成配置，设置静态资源模板和主题存放规则、.html读取静态资源规则、路由匹配静态文件.html规则；
进行测试/生成环境配置，设置服务日志生成规则，最后完成服务端口进程管理。
参照图2所示，详细说明本发明的.md转化成.html流程图。
根据配置读取.md文件，整理markdown元素，编写markdown元素转换成.html元素的规则；
正则匹配markdown元素，套.html标签；编写.html全局CSS样式；
根据配置输出.html到指定目录。
参照附图3所示，详细说明读取config配置对于路由对应html文档流程图。
读取config分解路由；Fs读取路由匹配的.md文件；如果有文件，则读取.md生成html到路由规范的目录下，Fs读取文件目录，Fs读取html目录再跟config路由配置做对应关系；
如果无文件，则报错写入日志；
如果.md文件解析失败，则报错写入日志。
参照图4所示，详细说明运营人员编辑的markdown文档文件截图。
运营人员需要向客户展示如何开通抖音分享商品功能，仅需要编辑的markdown文档文件。
运营人员在markdown文档文件中输入如下类似文字：
一、要成为抖音淘客，商品分享功能先开通
在[我]的页面里点[设置]，点击[商品分享功能]立即开通。
关于商品分享开通，需要做到几件事：
1.该功能对于粉丝量没有要求，所以各位老铁不用担心；
2.已发布的视频必须≥10条；
3.账号实名认证。
一般说来，申请商品分享功能，当天就能审核通过。
二、如何在个人主页[商品橱窗]添加商品？
步骤：点击[商品橱窗]，添加商品，点击[商品橱窗管理]，选择[添加商品]。
三、如何在视频中添加商品？
在10天内为橱窗添加至少10件商品，才可以开通视频电商功能
解锁商品橱窗后，即可成功解锁视频电商功能，所获权益，可为视频添加商品
解锁完成之后，就可以在视频中添加购物车商品了。
参照图5，图5为本发明图4中markdown文档转换为html页面的效果截图；
如图5所示，图4中markdown文档中的文字已经转换为html页面中不同部分中的内容。
根据本申请的一个实施例，处理端的工作步骤如下：
步骤一：选择Nodejs作为后台服务脚本，Node.js应用程序运行于单个进程中，无需为每个请求创建新的线程。Node.js在其标准库中提供了一组异步的I/O原生功能(用以防止JavaScript代码被阻塞)，并且Node.js中的库通常是使用非阻塞的范式编写的(从而使阻塞行为成为例外而不是规范)。当Node.js执行I/O操作时(例如从网络读取、访问数据库或文件系统)，Node.js会在响应返回时恢复操作，而不是阻塞线程并浪费CPU循环等待。这使Node.js可以在一台服务器上处理数千个并发连接，而无需引入管理线程并发的负担。
选择KOA2作为开发框架：
1 get请求接收的实现
参照附图6，详细描述了本发明get请求接收的实现；
2原生post请求接收的实现
2.1获取Post请求的步骤：
2.1.1解析上下文ctx中的原生nodex.js对象req。
2.1.2将POST表单数据解析成query string-字符串.(例如:user＝jspang&age＝18)
2.1.3将字符串转换成JSON格式。
2.2配置ctx.request和ctx.req
2.2.1 ctx.request:是Koa2中context经过封装的请求对象，它用起来更直观和简单。
2.2.2 ctx.req:是context提供的node.js原生HTTP请求对象。这个虽然不那么直观，但是可以得到更多的内容，适合我们深度编程。
2.2.3、ctx.method得到请求类型
Koa2提供ctx.method属性，可以轻松的得到请求的类型，然后根据请求类型编写不同的相应方法，这在工作中非常常用。
3原生路由的实现
3.1在根目录下，新建页面文件夹
3.2基本代码
图7显示本发明路由基本代码；图8显示本发明路由基本代码；
4使用cookie
4.1 api
4.1.1 ctx.cookies.get(name,[optins])：读取上下文请求中的cookie。
4.1.2 ctx.cookies.set(name,value,[options])：在上下文中写入cookie。
4.2 cookie配置对象选项
5 html模板
使用html模板，将html从js中分离出去，有助于项目开发和管理。而且，html模板在koa2中，必须通过中间件来实现。
6操作静态资源
6.1静态资源在开发中的地位
静态资源环境在服务端是十分常用的一种服务，在后台开发中不仅有需要代码处理的业务逻辑请求，也会有很多的静态资源请求。
比如请求js，css，jpg，png这些静态资源请求也非常的多，有些时候还会访问静态资源路径。
6.2koa-static实现静态资源操作
步骤二：把.md文件解析输出成.html文件；
1)定义Markdown和HTML标签文档的对应关系
参见附图9，图9为本发明定义Markdown和HTML标签文档的对应关系；
2)编写marked依赖方法，做标签转化
参见附图10-14；图9为本发明定义Markdown和HTML标签文档的对应关系；图10为本发明marked部分代码截图；图11为本发明marked部分代码截图；图12为本发明marked部分代码截图；图13为本发明marked部分代码截图；图14为本发明marked部分代码截图；
步骤三：配置config文件，配置.md文件和服务路由规则关系；
参见附图15；图15为本发明配置config文件。
步骤四：读取config文件，根据配置创建路由，解析对应的.md文件生成.html；
docs/.vuepress:用于存放全局的配置、组件、静态资源等。
docs/.vuepress/components:该目录中的Vue组件将会被自动注册为全局组件。
docs/.vuepress/theme:用于存放本地主题。
docs/.vuepress/styles:用于存放样式相关的文件。
docs/.vuepress/styles/index.styl:将会被自动应用的全局样式文件，会生成在最终的CSS文件结尾，具有比默认样式更高的优先级。
docs/.vuepress/styles/palette.styl:用于重写默认颜色常量，或者设置新的stylus颜色常量。
docs/.vuepress/public:静态资源目录。
docs/.vuepress/templates:存储HTML模板文件。
docs/.vuepress/templates/dev.html:用于开发环境的HTML模板文件。
docs/.vuepress/templates/ssr.html:构建时基于Vue SSR的HTML模板文件。
docs/.vuepress/config.js:配置文件的入口文件，也可以是YML或toml。
docs/.vuepress/enhanceApp.js:客户端应用的增强。
参见附图16；图16为本发明解析对应的.md文件生成.html；
步骤五：把对应的.html文件生成到指定的目录下；
参见附图17-18；图17为本发明把对应的.html文件生成到指定的目录下；和图18为本发明把对应的.html文件生成到指定的目录下。
有益效果
1)简洁至上：以markdown文本文件为中心的项目结构，以最少的配置生成网站。
2)技术驱动：享受快速敏捷的建站体验，可以开发自定义主题，一行指令生成网站；
3)高性能：会为每个markdown文件，预渲染生成静态的HTML，同时，每个页面被加载的时候，将作为SPA运行。
4)高效的人员成本：让运营更专注文案本身，开发更关注产品开发。不在需要各个业务模块高成本的沟通和排期才能进行的网站开发。
最后，还需要说明的是，在本文中，诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。
本说明书中各个实施例采用递进的方式描述，每个实施例重点说明的都是与其他实施例的不同之处，各个实施例之间相同相似部分互相参见即可。对于实施例公开的装置而言，由于其与实施例公开的方法相对应，所以描述的比较简单，相关之处参见方法部分说明即可。
对所公开的实施例的上述说明，使本领域专业技术人员能够实现或使用本发明。对这些实施例的多种修改对本领域的专业技术人员来说将是显而易见的，本文中所定义的一般原理可以在不脱离本发明的精神或范围的情况下，在其它实施例中实现。因此，本发明将不会被限制于本文所示的这些实施例，而是要符合与本文所公开的原理和新颖特点相一致的最宽的范围。

Claims (10)

1.一种页面处理方法，包括：
输入markdown文本文件；
选择后台服务脚本，进行基础http服务搭建；
收集有效的.md文件组成文件夹或目录；
配置config文件，以确定配置.md文件和服务路由规则关系，根据配置创建路由，解析对应的.md文件生成.html；
把对应的.html文件生成到指定的目录下，根据生成的.html目录产生新的站点进行服务器配置。
2.根据权利要求1所述的页面处理方法，其中，选择nodejs作为基础服务语言。
3.根据权利要求1所述的页面处理方法，其中，选择KOA2作为开发框架。
4.根据权利要求1所述的页面处理方法，其中，正则匹配markdown元素，配套.html标签，编写.html全局css样式，并且根据配置输出.html到指定目录。
5.根据权利要求1所述的页面处理方法，其中，还包括：
组织动态路由生成配置，静态资源模板和主题存放规则；
.html读取静态资源规则。
6.根据权利要求1所述的页面处理方法，其中，读取config分解路由包括：读取路由匹配的.md文件，如果有文件，则读取.md生成html到路由规范的目录下；读取文件目录；读取html目录再跟config路由配置做对应关系。
7.根据权利要求1所述的页面处理方法，其中，选择KOA2作为开发框架包括获取Post请求的步骤：解析上下文ctx中的原生nodex.js对象req；将POST表单数据解析成querystring-字符串；将字符串转换成JSON格式。
8.一种页面处理装置，包括：
文本输入模块，用于输入markdown文本文件；
脚本选择模块，用于选择后台服务脚本，进行基础http服务搭建；
收集模块，用于收集有效的.md文件组成文件夹或目录；
配置模块，用于配置config文件，以确定配置.md文件和服务路由规则关系，根据配置创建路由，解析对应的.md文件生成.html；
输出模块，用于把对应的.html文件生成到指定的目录下，根据生成的.html目录产生新的站点进行服务器配置。
9.一种电子设备，包括：
一个或多个处理器；
存储装置，其上存储有一个或多个程序，当所述一个或多个程序被所述一个或多个处理器执行，使得所述一个或多个处理器实现根据权利要求1-7任意一项所述的页面处理方法；
一个或多个I/O接口，连接在所述处理器与存储器之间，配置为实现所述处理器与存储器的信息交互。
10.一种计算机可读介质，其上存储有计算机程序，所述程序被处理器执行时实现根据权利要求1-7任意一项所述的页面处理方法。
CN202010972963.3A 2020-09-16 2020-09-16 页面处理方法、页面处理装置、电子设备和计算机可读介质 Pending CN112130819A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202010972963.3A CN112130819A (zh) 2020-09-16 2020-09-16 页面处理方法、页面处理装置、电子设备和计算机可读介质

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202010972963.3A CN112130819A (zh) 2020-09-16 2020-09-16 页面处理方法、页面处理装置、电子设备和计算机可读介质

Publications (1)

Publication Number Publication Date
CN112130819A true CN112130819A (zh) 2020-12-25

Family

ID=73846893

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202010972963.3A Pending CN112130819A (zh) 2020-09-16 2020-09-16 页面处理方法、页面处理装置、电子设备和计算机可读介质

Country Status (1)

Country Link
CN (1) CN112130819A (zh)

Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN108376127A (zh) * 2018-03-15 2018-08-07 武汉斗鱼网络科技有限公司 一种文档生成的方法、装置及计算机可读存储介质
CN109669684A (zh) * 2018-12-29 2019-04-23 深圳点猫科技有限公司 用于Python编辑器的技术文档内置实现方法及装置
WO2019214539A1 (zh) * 2018-05-08 2019-11-14 阿里巴巴集团控股有限公司 一种文档展示方法和装置
CN110532525A (zh) * 2019-07-18 2019-12-03 深圳点猫科技有限公司 一种基于web技术自动生成讲义的方法及装置

Patent Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN108376127A (zh) * 2018-03-15 2018-08-07 武汉斗鱼网络科技有限公司 一种文档生成的方法、装置及计算机可读存储介质
WO2019214539A1 (zh) * 2018-05-08 2019-11-14 阿里巴巴集团控股有限公司 一种文档展示方法和装置
CN109669684A (zh) * 2018-12-29 2019-04-23 深圳点猫科技有限公司 用于Python编辑器的技术文档内置实现方法及装置
CN110532525A (zh) * 2019-07-18 2019-12-03 深圳点猫科技有限公司 一种基于web技术自动生成讲义的方法及装置

Non-Patent Citations (3)

* Cited by examiner, † Cited by third party
Title
DRAGON: "VuePress搭建个人技术文档网站教程", pages 1 - 27, Retrieved from the Internet <URL:https://segmentfault.com/a/1190000017055963> *
WEIXIN_30466953: "koa2 接收post参数", pages 1 - 3, Retrieved from the Internet <URL:https://blog.csdn.net/weixin_30466953/article/details/96873724> *
李嘉明: "基于Node.js多人博客系统的设计与实现", 电脑知识与技术, no. 09, pages 1 - 3 *

Similar Documents

Publication Publication Date Title
CN111241454B (zh) 一种生成网页代码的方法、系统和装置
US9021442B2 (en) Dynamic scenario testing of web application
US20090254881A1 (en) Code generation techniques for administrative tasks
US8930881B1 (en) Dual programming interface
JPWO2005071609A1 (ja) 制約条件解決方法、制約条件解決装置、及び制約条件解決システム
Gu et al. From UML to LQN by XML algebra-based model transformations
US10572278B2 (en) Smart controls for user interface design and implementation
US10885087B2 (en) Cognitive automation tool
US20020066074A1 (en) Method and system for developing and executing software applications at an abstract design level
CN115639980A (zh) 一种低代码平台可拖拽的前端逻辑编排方法及装置
US20210117313A1 (en) Language agnostic automation scripting tool
US20220067271A1 (en) Orchestration of crud operations for a hierarchical web service data model in a spreadsheet
CN114594927A (zh) 低代码开发方法、装置、系统、服务器及存储介质
KR101552914B1 (ko) 웹 서버 어플리케이션 프레임워크 장치와 프레임워크를 이용한 웹 어플리케이션 처리 방법 및 이를 구현할 수 있는 컴퓨터로 읽을 수 있는 기록 매체
KR101330559B1 (ko) 자바스크립트기반 웹-클라이언트 어플리케이션 프레임워크 장치와 상기 프레임워크 장치를 이용한 웹 컨텐츠 처리 방법 및 이를 구현할 수 있는 컴퓨터로 읽을 수 있는 기록 매체
Bibartiu et al. Clams: a cloud application modeling solution
CN111126008A (zh) 基于xsd的代码生成方法、装置、计算机设备及存储介质
Schlenoff et al. Process specification language (psl): Results of the first pilot implementation
CN112130819A (zh) 页面处理方法、页面处理装置、电子设备和计算机可读介质
CN111221610B (zh) 一种页面元素采集方法和装置
Weller et al. The deployment model abstraction framework
Shershakov Vtmine for visio: A graphical tool for modeling in process mining
Nguyen Model-based version and configuration management for a web engineering lifecycle
Li et al. Automated creation of navigable REST services based on REST chart
El Omari et al. A Model Driven Approach for Generating Angular 7 Applications

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination