CN103593345A - 网页流程图编辑方法及系统 - Google Patents
网页流程图编辑方法及系统 Download PDFInfo
- Publication number
- CN103593345A CN103593345A CN201210287902.9A CN201210287902A CN103593345A CN 103593345 A CN103593345 A CN 103593345A CN 201210287902 A CN201210287902 A CN 201210287902A CN 103593345 A CN103593345 A CN 103593345A
- Authority
- CN
- China
- Prior art keywords
- web page
- flow diagram
- process flow
- page files
- browser
- 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
Links
Images
Classifications
-
- 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
Abstract
一种网页流程图编辑方法，包括以下步骤：当接收到用户终端的浏览器发送来的网页文件访问请求时，从服务器的数据库中获取该网页文件；生成流程图编辑界面，将带有流程图编辑界面的该网页文件发送至该浏览器；根据用户通过浏览器对该流程图编辑界面的操作，在流程图编辑界面上编辑流程图，确定元件的基本信息、元件之间的连接线和连接关系，将该元件的基本信息、元件之间的连接线和连接关系存入数据库中。本发明还提供一种网页流程图编辑系统。利用本发明可以在网页上实时编辑流程图，不必将整份流程图传送到服务器上储存，降低服务器的负荷。
Description
技术领域
本发明涉及网络通信领域，特别涉及一种网页流程图编辑方法及系统。
背景技术
因特网与信息科技的迅速发展，改变了人类生活与工作的运作模式。窗口环境应用程序的优势正逐渐受到网页环境、行动装置与嵌入式系统等操作环境的威胁。大型企业开始利用网页应用程序的平台来管理工作流程，提升营运效率。一般用户也使用网页应用程序来处理文书作业。用户无须下载、安装特定程序，只需要进入特定的网页即可开启网络应用程序来执行编写、分享和管理文件的操作。
目前，以网页为基础的应用程序基本上都是以窗体、字段编辑和数据查询等动态显示的方式与用户互动。网页上显示的流程图一般都以图片的方式呈现，但是用户以图片的方式上传流程图至服务器后，当需要修改流程图时，会因为没有可编辑的源文件、编辑软件与环境的不同而造成流程图的变调走样。因此，用户无法在网页上实时编辑流程图。
发明内容
鉴于以上内容，有必要提供一种网页流程图编辑方法，可以在网页上实时编辑流程图，不必将整份流程图传送到服务器上储存，降低服务器的负荷。
还有必要提供一种网页流程图编辑系统，可以在网页上实时编辑流程图，不必将整份流程图传送到服务器上储存，降低服务器的负荷。
一种网页流程图编辑方法，包括以下步骤：接收步骤：当接收到用户终端的浏览器发送来的网页文件访问请求时，从服务器的数据库中获取该网页文件；发送步骤：生成流程图编辑界面，将带有流程图编辑界面的该网页文件发送至该浏览器；编辑步骤：根据用户通过浏览器对该流程图编辑界面的操作，在流程图编辑界面上编辑流程图，确定元件的基本信息、元件之间的连接线和连接关系，将该元件的基本信息、元件之间的连接线和连接关系存入数据库中。
一种网页流程图编辑系统，包括：接收模块，用于当接收到用户终端的浏览器发送来的网页文件访问请求时，从服务器的数据库中获取该网页文件；发送模块，用于生成流程图编辑界面，将带有流程图编辑界面的该网页文件发送至该浏览器；编辑模块，用于根据用户通过浏览器对该流程图编辑界面的操作，在流程图编辑界面上编辑流程图，确定元件的基本信息、元件之间的连接线和连接关系，将该元件的基本信息、元件之间的连接线和连接关系存入数据库中。
相较于现有技术，本发明网页流程图编辑方法及系统，可以在网页上实时编辑流程图，不必将整份流程图传送到服务器上储存，降低服务器的负荷。
附图说明
图1是本发明网页流程图编辑系统较佳实施例的运行环境图。
图2是本发明网页流程图编辑系统较佳实施例的功能模块图。
图3至图5是流程图编辑界面及其元件和连接线的示意图。
图6是本发明网页流程图编辑方法较佳实施例的流程图。
主要元件符号说明
| 服务器 | 1 |
| 网页流程图编辑系统 | 10 |
| 数据库 | 11 |
| 用户终端 | 2 |
| 浏览器 | 20 |
| 显示设备 | 21 |
| 网络 | 3 |
| 接收模块 | 101 |
| 发送模块 | 102 |
| 编辑模块 | 103 |
| 作图区 | 201 |
| 标题区 | 202 |
| 工具区 | 203 |
| 元件工具 | 300 |
| 连接线工具 | 400 |
| 缩放工具 | 500 |
| 放大工具 | 501 |
| 缩小工具 | 502 |
如下具体实施方式将结合上述附图进一步说明本发明。
具体实施方式
参阅图1所示，是本发明网页流程图编辑系统较佳实施例的运行环境图。
在本实施例中，该网页流程图编辑系统10运行于服务器1中，该服务器1通过网络3与用户终端2通信连接。服务器1中还包括存储有若干网页文件的数据库11。该网页文件可以是以HTML（Hypertext Markup Language，超文本标记语言）描述的。该用户终端2中安装有浏览器20，该浏览器20可以向服务器1提交该网页文件的访问请求。在收到服务器1发送的网页文件后，浏览器20还对该网页文件进行解析，然后将该网页文件显示在用户终端2的显示设备21上，供用户查看。
所述网页流程图编辑系统10用于根据用户在浏览器20上的操作在网页文件上编辑流程图，并将带有流程图的该网页文件保存在数据库11中。当浏览器20再次解析该网页文件后，将显示带有该流程图的该网页文件，用户还可通过在浏览器20上的操作再次编辑该流程图。
参阅图2所示，是本发明网页流程图编辑系统较佳实施例的功能模块图。该网页流程图编辑系统10包括接收模块101、发送模块102和编辑模块103。本发明所称的模块是完成一特定功能的计算机程序段，比程序更适合于描述软件在服务器1中的执行过程，因此在本发明以下对软件描述都以模块描述。
接收模块101用于当接收到用户终端2通过浏览器20发送来的网页文件的访问请求时，从数据库11获取该网页文件，并根据该网页文件的源程序代码判断该网页文件中是否包含编辑流程图的自订标签（tag）。
发送模块102用于当该网页文件中包含编辑流程图的自订标签时，生成流程图编辑界面，将带有该流程图编辑界面的该网页文件发送至浏览器20。浏览器20对该网页文件进行解析后，将该网页文件及该流程图编辑界面显示在显示设备21上。
如图3所示，在本实施例中，该流程图编辑界面包括作图区201、标题区202和工具区203。该作图区201为编辑流程图的区域。该标题区202用于区分流程图各个部分在作图区201的分布位置，其中，标题区202中的每个标题对应于作图区201的一个子区域，例如标题区202中的标题“AA”、“BB”等等。该工具区203包括元件工具300、连接线工具400和缩放工具500。
该元件工具300中包括多种类型的元件，例如实线方框元件，虚线方框元件、实线菱形元件等。该元件由若干个DIV元素组成。所述DIV元素是用来为HTML网页文件内大块（block-level）的内容提供结构和背景的元素。用户可从该元件工具300中选择一种或多种类型的元件，将所选择的元件拖至作图区201的某一位置。此外，用户还可以设置该元件的名称和文字内容，并通过拖放该元件的边框来对该元件进行放大或缩小。
该连接线工具400中包括多种连接线，例如单向箭头、直连线等。该连接线也由若干个DIV元素组成。用户可从该连接线工具400中选择连接线，并将该连接线拖至相应的元件之间，表达元件之间的流程关系（如图4所示）。
该缩放工具500包括放大工具501和缩小工具502，该放大工具501用于增加作图区201的区域面积，该缩小工具502用于减少作图区201的区域面积（如图5所示）。
编辑模块103用于根据用户通过浏览器20对该流程图编辑界面的操作，在流程图编辑界面上编辑流程图，包括新增元件、移动元件、缩放元件、删除元件、新增连接线、删除连接线等，确定元件的形状、大小、位置、名称和文字内容等基本信息，以及元件之间的连接线和连接关系，并将该元件的基本信息，以及元件之间的连接线和连接关系存入数据库11中。
在本实施例中，编辑模块103可以利用Javascript技术新增或改变HTML网页文件里DIV元素的CSS（Cascading Style Sheet，级联样式表）样式来实现上述流程图的编辑操作。例如，在该HTML网页文件的CSS样式中，一个元件的DIV元素所在位置的坐标为（10，10），当鼠标在这个DIV元素上触发了Javascript点选事件，编辑模块103即可知道该DIV元素被选中。当编辑模块103改变该DIV元素在该HTML网页文件的CSS样式中的坐标时，即表现为该DIV元素在流程图编辑界面上被移动。
每当用户在流程图编辑界面中新增一个元件时，编辑模块103将为该新增元件分配一个UUID（Universally Unique Identifier，通用唯一识别码）。当该新增元件被拖至流程图编辑界面的某一处位置时，编辑模块103将确定该新增元件在流程图编辑界面的位置，并确定该新增元件的形状和大小，将该新增元件的位置、形状和大小信息存入数据库11中。
此外，编辑模块103还为该新增元件设置相应的触发事件，当该新增元件被单击或双击时，将发生对应的触发事件，例如显示文字编辑框，供用户在该文字编辑框中设置该新增元件的名称和文字内容。当用户设置该新增元件的名称和文字内容时，编辑模块103获取该新增元件的名称和文字内容，并将该名称和文字内容更新至数据库11中。
当该新增元件在流程图编辑界面中被移动或缩放时，编辑模块103实时确定该新增元件的位置、形状和大小信息，并将该新增元件的位置、形状和大小信息实时更新至数据库11。
当用户在流程图编辑界面中新增连接线连接两个元件时，编辑模块103为该新增连接线分配一个UUID，并获取该两个元件的UUID，建立该新增连接线的UUID与该两个元件的UUID的连接关系，将该新增连接线的UUID及该新增连接线与该两个元件的连接关系存入数据库11中。
当要从流程图编辑界面中删除元件时，编辑模块103将删除数据库11中该元件的基本信息，包括元件的UUID、位置、形状、大小、名称和文字内容等信息，以及该元件与所连接的连接线之间的连接关系。
当要从流程图编辑界面中删除连接线时，编辑模块103将删除数据库11中该连接线的UUID，以及该连接线与所连接元件之间的连接关系。
另外，编辑模块103还对标题区202中的各标题设置相应的触发事件，当该标题被单击或双击时，将发生对应的触发事件，例如显示一个列表，该列表中包括该标题对应作图区201的子区域中分布的所有元件的基本信息。
当用户将浏览器20显示的该网页文件关闭后，再次通过浏览器20向服务器1发送该网页文件的访问请求时，接收模块101将接收该网页文件的访问请求，从数据库11获取该网页文件、网页文件中元件的基本信息以及元件之间的连接线和连接关系。发送模块102生成流程图编辑界面，将该元件的基本信息、元件之间的连接线和连接关系、带有流程图编辑界面的该网页文件发送至浏览器20。浏览器20对该网页文件解析后，将该网页文件及该流程图编辑界面显示在显示设备21上，并根据该元件的基本信息以及元件之间的连接线和连接关系，将该元件及元件之间的连接线显示于流程图编辑界面上。
参阅图6所示，是本发明网页流程图编辑方法较佳实施例的流程图。
步骤S1，当接收到用户终端2通过浏览器20发送来的网页文件的访问请求时，接收模块101从数据库11获取该网页文件，并根据该网页文件的源程序代码判断该网页文件中是否包含编辑流程图的自订标签。
步骤S2，当该网页文件中包含编辑流程图的自订标签时，发送模块102生成流程图编辑界面，将带有该流程图编辑界面的该网页文件发送至浏览器20。浏览器20对该网页文件进行解析后，将该网页文件及该流程图编辑界面显示在显示设备21上。
步骤S3，编辑模块103根据用户通过浏览器20对该流程图编辑界面的操作，在流程图编辑界面上编辑流程图，包括新增元件、移动元件、缩放元件、删除元件、新增连接线、删除连接线等，确定元件的形状、大小、位置、名称和文字内容等基本信息，以及元件之间的连接线和连接关系，并将该元件的基本信息，以及元件之间的连接线和连接关系存入数据库11中。
当再次接收到浏览器20发送的该网页文件的访问请求时，接收模块101从数据库11获取该网页文件、网页文件中元件的基本信息以及元件之间的连接线和连接关系。发送模块102生成流程图编辑界面，将该元件的基本信息、元件之间的连接线和连接关系、带有流程图编辑界面的该网页文件发送至浏览器20。浏览器20对该网页文件解析后，将该网页文件及该流程图编辑界面显示在显示设备21上，并根据该元件的基本信息以及元件之间的连接线和连接关系，将该元件及元件之间的连接线显示于流程图编辑界面上。
以上实施例仅用以说明本发明的技术方案而非限制，尽管参照较佳实施例对本发明进行了详细说明，本领域的普通技术人员应当理解，可以对本发明的技术方案进行修改或等同替换，而不脱离本发明技术方案的精神和范围。
Claims (10)
1.一种网页流程图编辑方法，其特征在于，该方法包括以下步骤：
接收步骤：当接收到用户终端的浏览器发送来的网页文件访问请求时，从服务器的数据库中获取该网页文件；
发送步骤：生成流程图编辑界面，将带有流程图编辑界面的该网页文件发送至该浏览器；
编辑步骤：根据用户通过浏览器对该流程图编辑界面的操作，在流程图编辑界面上编辑流程图，确定元件的基本信息、元件之间的连接线和连接关系，将该元件的基本信息、元件之间的连接线和连接关系存入数据库中。
2.如权利要求1所述的网页流程图编辑方法，其特征在于，所述接收步骤还根据该网页文件的源程序代码判断该网页文件中是否包含编辑流程图的自订标签，当该网页文件中包含编辑流程图的自订标签时，执行所述发送步骤。
3.如权利要求1所述的网页流程图编辑方法，其特征在于，在所述编辑步骤中，通过新增或改变网页文件里组成元件或连接线的DIV元素的级联样式表CSS样式在流程图编辑界面上编辑流程图。
4.如权利要求1所述的网页流程图编辑方法，其特征在于，所述元件的基本信息包括元件的形状、大小、位置、名称和文字内容。
5.如权利要求1所述的网页流程图编辑方法，其特征在于，该方法还包括：
当再次接收到浏览器发送的该网页文件的访问请求时，从数据库获取该网页文件、网页文件中元件的基本信息、元件之间的连接线和连接关系；
生成流程图编辑界面，然后将该元件的基本信息、元件之间的连接线和连接关系、带有流程图编辑界面的该网页文件发送至浏览器。
6.一种网页流程图编辑系统，其特征在于，该系统包括：
接收模块，用于当接收到用户终端的浏览器发送来的网页文件访问请求时，从服务器的数据库中获取该网页文件；
发送模块，用于生成流程图编辑界面，将带有流程图编辑界面的该网页文件发送至该浏览器；
编辑模块，用于根据用户通过浏览器对该流程图编辑界面的操作，在流程图编辑界面上编辑流程图，确定元件的基本信息、元件之间的连接线和连接关系，将该元件的基本信息、元件之间的连接线和连接关系存入数据库中。
7.如权利要求6所述的网页流程图编辑系统，其特征在于，所述接收模块还根据该网页文件的源程序代码判断该网页文件中是否包含编辑流程图的自订标签，当该网页文件中包含编辑流程图的自订标签时，触发所述发送模块。
8.如权利要求6所述的网页流程图编辑系统，其特征在于，所述编辑模块通过新增或改变网页文件里组成元件或连接线的DIV元素的级联样式表CSS样式在流程图编辑界面上编辑流程图。
9.如权利要求6所述的网页流程图编辑系统，其特征在于，所述元件的基本信息包括元件的形状、大小、位置、名称和文字内容。
10.如权利要求6所述的网页流程图编辑系统，其特征在于，该接收模块还用于当再次接收到浏览器发送的该网页文件的访问请求时，从数据库获取该网页文件、网页文件中元件的基本信息、元件之间的连接线和连接关系；
所述发送模块还用于生成流程图编辑界面，然后将该元件的基本信息、元件之间的连接线和连接关系、带有流程图编辑界面的该网页文件发送至浏览器。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201210287902.9A CN103593345A (zh) | 2012-08-14 | 2012-08-14 | 网页流程图编辑方法及系统 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201210287902.9A CN103593345A (zh) | 2012-08-14 | 2012-08-14 | 网页流程图编辑方法及系统 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN103593345A true CN103593345A (zh) | 2014-02-19 |
Family
ID=50083494
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201210287902.9A Pending CN103593345A (zh) | 2012-08-14 | 2012-08-14 | 网页流程图编辑方法及系统 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN103593345A (zh) |
Cited By (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN104239429A (zh) * | 2014-08-26 | 2014-12-24 | 北京航天在线网络科技有限公司 | 对网页中的流程图进行编辑的方法和装置 |
| CN105701113A (zh) * | 2014-11-27 | 2016-06-22 | 国际商业机器公司 | 用于优化网页预加载的方法和设备 |
| CN106445483A (zh) * | 2015-08-13 | 2017-02-22 | 李佰聪 | 生成行动应用程序的方法和系统 |
| CN106598605A (zh) * | 2016-12-16 | 2017-04-26 | 上海鹰谷信息科技有限公司 | 基于结构式编辑器的流程图绘制方法 |
| CN106708991A (zh) * | 2016-12-15 | 2017-05-24 | 北京致远互联软件股份有限公司 | 网页流程的生成方法及装置 |
| CN112287742A (zh) * | 2020-06-22 | 2021-01-29 | 上海柯林布瑞信息技术有限公司 | 文件中的流程图解析方法及装置、计算设备、存储介质 |
-
2012
- 2012-08-14 CN CN201210287902.9A patent/CN103593345A/zh active Pending
Cited By (9)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN104239429A (zh) * | 2014-08-26 | 2014-12-24 | 北京航天在线网络科技有限公司 | 对网页中的流程图进行编辑的方法和装置 |
| CN104239429B (zh) * | 2014-08-26 | 2018-01-16 | 航天信息软件技术有限公司 | 对网页中的流程图进行编辑的方法和装置 |
| CN105701113A (zh) * | 2014-11-27 | 2016-06-22 | 国际商业机器公司 | 用于优化网页预加载的方法和设备 |
| CN105701113B (zh) * | 2014-11-27 | 2019-04-09 | 国际商业机器公司 | 用于优化网页预加载的方法和设备 |
| CN106445483A (zh) * | 2015-08-13 | 2017-02-22 | 李佰聪 | 生成行动应用程序的方法和系统 |
| CN106708991A (zh) * | 2016-12-15 | 2017-05-24 | 北京致远互联软件股份有限公司 | 网页流程的生成方法及装置 |
| CN106598605A (zh) * | 2016-12-16 | 2017-04-26 | 上海鹰谷信息科技有限公司 | 基于结构式编辑器的流程图绘制方法 |
| CN112287742A (zh) * | 2020-06-22 | 2021-01-29 | 上海柯林布瑞信息技术有限公司 | 文件中的流程图解析方法及装置、计算设备、存储介质 |
| CN112287742B (zh) * | 2020-06-22 | 2023-12-26 | 上海柯林布瑞信息技术有限公司 | 文件中的流程图解析方法及装置、计算设备、存储介质 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US10965559B1 (en) | Automatic creation of related event groups for an IT service monitoring system | |
| US11044179B1 (en) | Service monitoring interface controlling by-service mode operation | |
| US11200130B2 (en) | Automatic entity control in a machine data driven service monitoring system | |
| US20220101343A1 (en) | Systems and Methods for Managing Web Content | |
| US10417108B2 (en) | Portable control modules in a machine data driven service monitoring system | |
| US10536353B2 (en) | Control interface for dynamic substitution of service monitoring dashboard source data | |
| US10817663B2 (en) | Dynamic native content insertion | |
| CN101662493B (zh) | 一种用户访问路径的数据采集方法、系统及服务器 | |
| CN102164186B (zh) | 一种实现云搜索服务的方法及系统 | |
| US20070271519A1 (en) | System and Method for Collecting User Interest Data | |
| CN103593345A (zh) | 网页流程图编辑方法及系统 | |
| CN107908637B (zh) | 一种基于知识库的实体更新方法及系统 | |
| CN102934105A (zh) | 在驻留的文字处理器中的协作光标 | |
| CN104252452A (zh) | 数据管理的方法及装置 | |
| CN106155673B (zh) | 实现页面内容编辑器的方法、装置、服务器及用户设备 | |
| CN110020273B (zh) | 用于生成热力图的方法、装置以及系统 | |
| CN104102636A (zh) | 一种页面数据的统计、呈现方法及装置 | |
| CN102480390A (zh) | 用于系统监控的方法和装置 | |
| US20200244754A1 (en) | Controlling usages of channels of a user experience ecosytem | |
| US10742764B2 (en) | Web page generation system | |
| CN109492176A (zh) | 一种页面信息更新方法及装置 | |
| TW201407384A (zh) | 網頁流程圖編輯方法及系統 | |
| US11755559B1 (en) | Automatic entity control in a machine data driven service monitoring system | |
| CN110175026B (zh) | 一种网页可视化编辑方法、装置及存储介质 | |
| CN112947992B (zh) | 代码版本管理的方法和装置 |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| C06 | Publication | ||
| PB01 | Publication | ||
| C02 | Deemed withdrawal of patent application after publication (patent law 2001) | ||
| WD01 | Invention patent application deemed withdrawn after publication |
Application publication date: 20140219 |