CN107844299B - 一种Web应用开发工具的实现方法 - Google Patents

Abstract

本发明提供一种Web应用开发工具的实现方法，涉及Web应用技术领域，本发明将传统的客户端开发转向了线上开发，开发人员可以随时随地的使用浏览器打开WebIDE进行开发，无需安装客户端软件。该WebIDE面向开发人员，从项目工程的视角设计，提供项目文件树展现、设计器、文件保存等功能。设计器提供拖拽式开发功能，默认提供源代、源码编辑工具、UI拖拽工具和代码机工具，其中前端Web组件拖拽工具基于UI组件库，实现前端Web页面的快速生成，代码机工具基于数据模型，实现代码的开发生成；提供扩展机制，支持自定义插件的灵活接入。

Description

一种Web应用开发工具的实现方法

技术领域

本发明涉及涉及Web应用技术，尤其涉及一种Web应用开发工具的实现方法。

背景技术

大数据时代，面对海量的业务数据，如何快速实现数据的可视化展现，实现数据应用的快速开发成了当前的热点，在线应用开发工具被提出。

目前业界的在线开发工具有两类，一种是在线WebIDE，如Eclipse Che、CodingWebIDE，其核心是将桌面版IDE在线上基于浏览器实现，目标是面向开发人员，实现云端IDE、随时随地在线开发；另一种是轻应用定制工具，如阿里quick BI、魔镜等产品，该类产品提供了拖拽式开发界面，目标是面向最终用户（非开发人员），实现数据报表、图形图表类页面、应用的定制化开发。以上两类开发工具，各有自己的应用场景，第一种只是实现了线上IDE，缺少可视化的拖拽式快速开发功能；第二种虽然方便快捷的实现了业务数据的可视化展现，但却使得业务应用离散化，不方便对业务应用的整体把控。另一方面，这类开发工具大多是面向最终用户的，而对于开发者来说缺乏应用开发感觉，体验性不好。

在云计算和大数据快速发展的今天，如何能够快速的实现数据应用的快速开发、展示是开发者关注的重点，一款云端的、面向开发者的、具有拖拽式可视化开发的应用开发工具是开发者所期待的。

发明内容

为了解决以上技术问题，本发明提出了一种面向在线的、面向开发人员的、拖拽式的Web应用开发工具的实现方法，实现了所见即所得的效果。

本发明的技术方案是：

一种Web应用开发工具的实现方法，

提供面向开发者的、以项目代码为视角的WebIDE，提供项目代码树展现组件和源码编辑器，提供组件适配接口，实现开发工具的集成和应用代码的保存操作；提供前端拖拽开发工具，基于前端组件库，实现前端代码的快速拖拽式开发，并提供前端组件的注册接口；提供代码生成机功能，基于数据模型，实现代码的快速生成。

主要包括WebIDE、UI拖拽工具以及代码机工具实现方式；

其中，

1）WebIDE由工程文件树和设计器组成，代码文件存储到代码仓库中

1.1）工程文件树采用树形组件将项目中文件展现出来，双击树中文件，将其文件代码展现在代码编辑器中；右键单击树中文件，选择设计工具，将文件代码解析后以该设计工具展现；

1.2）WebIDE的设计器默认以代码编辑器打开，并集成UI拖拽工具和代码机；同时WebIDE支持自定义开发工具的接入，提供统一的插件适配层接口，UI拖拽开发工具和代码机都是基于该接口实现的对接；

插件适配层接口实现方式具体如下：

a）树组件提供右键监听事件，各接入开发工具实现该监听事件；

b）WebIDE采用IFrame的方式来加载各开发工具，响应组件树对应事件，加载开发工具到设计器中；

c）WebIDE提供统一的代码保存接口，开发工具调用该接口实现代码保存；

function save(data){}

data为json字符串，数据模型为{“info”:[“filepath”: “”, “content”: “”]}。

2）UI拖拽工具

UI拖拽工具基于前端组件模板库，提供源码拖拽式开发功能；该工具提供页面样式模板，基于样式模板提供列表、图表、日期、按钮的前端组件，每个前端组件为一段HTML代码片段，工具提供拖拽的方式，通过拖拽组件，将组件对应的HTML代码片段增加到页面对应的HTML代码中；

2.1）前端组件

每个前端组件对应一段HTML代码片段，用于实现该组件的HTML代码，同时包含该HTML所对应JS、CSS代码，及所依赖的JS、CSS类库；

2.2）拖拽式开发

鼠标拖拽组件到编辑器的代码上，HTML代码片段会被插入到光标所在的位置上，同时将组件对应的JS和CSS片段放到对应的JS、CSS文件的最后;最后判断该组件是否有对应的JS、CSS依赖库，若有则判断该JS、CSS库是否已经在HTML页面中，若不存在，则将其加到HTML页面代码中；

2.3）前端组件扩展机制

UI拖拽工具提供组件的扩展机制，支持自定义组件的注册功能，每个组件包含HTML代码文件、JS代码文件和CSS代码文件，同时需要提供该组件的注册模型信息，模型如下：

组件ID

文件路径

依赖的JS库

3）代码机工具实现方式

代码机工具提供列表、表单的代码生成功能，使用Freemarker模板引擎，基于数据模型，快速生成程序代码，包含前端页面代码、后端Java代码和配置文件代码；

1）数据模型

数据模型有：数据表模型，包含列名、字段的类型、列的说明和是否为主键；JavaBean对象模型，包含Bean名称、Java字段名称、Java字段类型；页面模型，包含表单字段是否展示、表单字段展现类型、是否为查询条件。

该工具提供可视化的数据模型注册功能，开发者可以在界面上将数据模型信息录入，后台自动解析将其转换为XML模型；

2）Freemarker模板

基于Freemarker技术实现列表文件、表单文件和配置文件代码模板，存储到工具包中；

代码生成依次调用各文件的Freemarker模板，然后根据XMLSchema模型，获取所需要的数据模型信息，然后调用Freemarker模板引擎将其将其组装为最终的代码文件；该工具提供各种文件默认的路径规则，最终的生成文件按照路径规则进行存放。

本发明的有益效果是

该WebIDE为云端应用开发模式，采用浏览器进行在线开发，不需要本地开发环境搭建，实现随时随地开发。

该WebIDE面向开发人员，提供源码编辑和可视化开发两种模式，增加了开发人员的友好体验感。

提供前端组件拖拽式开发功能，封装大量前端UI组件库，实现前端页面源码拖拽开发。

提供代码生成功能，基于数据模型实现代码的快速生成功能，并支持开发者自定义模板。

该开发工具实现了一种开发工具集成方案，提供标准的开发组件对接机制，实现各种开发工具的对接。

附图说明

图1是WebIDE架构图；

图2是代码机流程图。

具体实施方式

下面对本发明的内容进行更加详细的阐述：

本发明面向开发人员，为适合开发人员研发习惯，该发明采用WebIDE的方式实现，从源代码视角进行开发；同时该工具提供拖拽式开发模式，提供前端Web组件拖拽工具插件和代码机工具插件，并提供插件扩展机制。

1. WebIDE架构及运行原理

说明：WebIDE由工程文件树和设计器组成，代码文件存储到代码仓库中，如图1所示。

1）工程文件树采用树形组件将项目中文件展现出来，双击树中文件，将其文件代码展现在代码编辑器中；右键单击树中文件，可以选择适当的设计工具，会将文件代码解析后以该设计工具展现。

2）WebIDE的设计器默认以代码编辑器打开，并集成UI拖拽工具和代码机。同时WebIDE支持自定义开发工具的接入，提供统一的插件适配层接口，UI拖拽开发工具和代码机都是基于该接口实现的对接。插件适配层接口实现方式具体如下：

a）树组件提供右键监听事件，各接入开发工具实现该监听事件。

b）WebIDE采用IFrame的方式来加载各开发工具，响应组件树对应事件，加载开发工具到设计器中。

c）WebIDE提供统一的代码保存接口，开发工具调用该接口实现代码保存。

function save(data){}

data为json字符串，数据模型为{“info”:[“filepath”: “”, “content”: “”]}

2．UI拖拽工具

说明：UI拖拽工具基于前端组件模板库，提供源码拖拽式开发功能。该工具提供页面样式模板，基于样式模板提供列表、图表、日期、按钮等前端组件，每个前端组件为一段HTML代码片段，工具提供拖拽的方式，通过拖拽组件，将组件对应的HTML代码片段增加到页面对应的HTML代码中。

1）前端组件

每个前端组件对应一段HTML代码片段，用于实现该组件的HTML代码，同时包含该HTML所对应JS、CSS代码，及所依赖的JS、CSS类库（所依赖的类库的文件路径）。

2）拖拽式开发

鼠标拖拽组件到编辑器的代码上，HTML代码片段会被插入到光标所在的位置上，同时将组件对应的JS和CSS片段放到对应的JS、CSS文件的最后。最后判断该组件是否有对应的JS、CSS依赖库，若有则判断该JS、CSS库是否已经在HTML页面中，若不存在，则将其加到HTML页面代码中。

3）前端组件扩展机制

为了方便前端自定义组件的扩展，UI拖拽工具提供了组件的扩展机制，支持自定义组件的注册功能，每个组件包含HTML代码文件、JS代码文件和CSS代码文件，同时需要提供该组件的注册模型信息，模型如下：

组件ID

文件路径

依赖的JS库

3．代码机工具实现方式

说明：代码机工具提供列表、表单的代码生成功能，使用Freemarker模板引擎，基于数据模型，快速生成程序代码，包含前端页面代码、后端Java代码和配置文件代码，处理流程如图2所示。

1）数据模型

数据模型有：数据表模型，包含列名、字段的类型、列的说明和是否为主键等；Java Bean对象模型，包含Bean名称、Java字段名称、Java字段类型等；页面模型，包含表单字段是否展示、表单字段展现类型、是否为查询条件等。

该工具提供可视化的数据模型注册功能，开发者可以在界面上将数据模型信息录入，后台自动解析将其转换为XML模型（用于描述数据模型的XML Schema）。

2）Freemarker模板

基于Freemarker技术实现列表文件、表单文件和配置文件等各种代码模板，存储到工具包中。

代码生成依次调用各文件的Freemarker模板，然后根据XMLSchema模型，获取所需要的数据模型信息，然后调用Freemarker模板引擎将其将其组装为最终的代码文件。该工具提供各种文件默认的路径规则，最终的生成文件按照路径规则进行存放。

本发明将传统的客户端开发转向了线上开发，开发人员可以随时随地的使用浏览器打开WebIDE进行开发，无需安装客户端软件。该WebIDE面向开发人员，从项目工程的视角设计，提供项目文件树展现、设计器、文件保存等功能。设计器提供拖拽式开发功能，默认提供源代、源码编辑工具、UI拖拽工具和代码机工具，其中前端Web组件拖拽工具基于UI组件库，实现前端Web页面的快速生成，代码机工具基于数据模型，实现代码的开发生成；提供扩展机制，支持自定义插件的灵活接入。

Claims (1)

1.一种Web应用开发工具的实现方法，其特征在于，

提供面向开发者的、以项目代码为视角的WebIDE，提供项目代码树展现组件和源码编辑器，提供组件适配接口，实现开发工具的集成和应用代码的保存操作；提供前端拖拽开发工具，基于前端组件库，实现前端代码的快速拖拽式开发，并提供前端组件的注册接口；提供代码生成机功能，基于数据模型，实现代码的快速生成；

主要包括WebIDE、UI拖拽工具以及代码机工具实现方式；

其中，

1）WebIDE由工程文件树和设计器组成，代码文件存储到代码仓库中

1.1）工程文件树采用树形组件将项目中文件展现出来，双击树中文件，将其文件代码展现在代码编辑器中；右键单击树中文件，选择设计工具，将文件代码解析后以该设计工具展现；

1.2）WebIDE的设计器默认以代码编辑器打开，并集成UI拖拽工具和代码机；同时WebIDE支持自定义开发工具的接入，提供统一的插件适配层接口，UI拖拽开发工具和代码机都是基于该接口实现的对接；

2）UI拖拽工具

UI拖拽工具基于前端组件模板库，提供源码拖拽式开发功能；该工具提供页面样式模板，基于样式模板提供列表、图表、日期、按钮的前端组件，每个前端组件为一段HTML代码片段，工具提供拖拽的方式，通过拖拽组件，将组件对应的HTML代码片段增加到页面对应的HTML代码中；

2.1）前端组件

每个前端组件对应一段HTML代码片段，用于实现该组件的HTML代码，同时包含该HTML所对应JS、CSS代码，及所依赖的JS、CSS类库；

2.2）拖拽式开发

鼠标拖拽组件到编辑器的代码上，HTML代码片段会被插入到光标所在的位置上，同时将组件对应的JS和CSS片段放到对应的JS、CSS文件的最后;最后判断该组件是否有对应的JS、CSS依赖库，若有则判断该JS、CSS库是否已经在HTML页面中，若不存在，则将其加到HTML页面代码中；

2.3）前端组件扩展机制

UI拖拽工具提供组件的扩展机制，支持自定义组件的注册功能，每个组件包含HTML代码文件、JS代码文件和CSS代码文件，同时需要提供该组件的注册模型信息，模型如下：

组件ID、文件路径、依赖的JS库；

3）代码机工具实现方式

代码机工具提供列表、表单的代码生成功能，使用Freemarker模板引擎，基于数据模型，快速生成程序代码，包含前端页面代码、后端Java代码和配置文件代码；

WebIDE中的插件适配层接口实现方式具体如下：

a）树组件提供右键监听事件，各接入开发工具实现该监听事件；

b）WebIDE采用IFrame的方式来加载各开发工具，响应组件树对应事件，加载开发工具到设计器中；

c）WebIDE提供统一的代码保存接口，开发工具调用该接口实现代码保存；

function save(data){}

data为json字符串，数据模型为{“info”:[“filepath”: “”, “content”: “”]；

代码机工具实现方式中，

1）数据模型

数据模型有：数据表模型，包含列名、字段的类型、列的说明和是否为主键；Java Bean对象模型，包含Bean名称、Java字段名称、Java字段类型；页面模型，包含表单字段是否展示、表单字段展现类型、是否为查询条件；

该工具提供可视化的数据模型注册功能，开发者可以在界面上将数据模型信息录入，后台自动解析将其转换为XML模型；

2）Freemarker模板

基于Freemarker技术实现列表文件、表单文件和配置文件代码模板，存储到工具包中；

代码生成依次调用各文件的Freemarker模板，然后根据XMLSchema模型，获取所需要的数据模型信息，然后调用Freemarker模板引擎将其将其组装为最终的代码文件；该工具提供各种文件默认的路径规则，最终的生成文件按照路径规则进行存放。

Images