论文总字数：19034字

摘 要

可视化编程是一种全新的程序设计方法，能让程序设计者利用软件本身所提供的各种控件，通过拖拽的方式构造应用程序的界面。可视化编程可使开发者无需写太多的代码或者写很少的代码甚至对于那些没什么语法知识和API的使用者就可以实现一些功能，能够极大的提高设计者的工作效率。与文本编程相比较而言，可视化编程更加直观，所见即所得，显得更加有趣味，在一些场景下能够快速搭建一个简单的应用。同时，可视化编程使编程的门槛降低，可以作为一个入门编程的方式，尤其能够激起那些不会编程或者想尝试的人的兴趣，特别实现在越来越多的家长让小孩接触一些编程或机器人项目这类活动中来，所以在少儿编程和一些机器人编程中有很好的用途。所以实现编程可视化可以不仅可以增加效率还就可以提高其易用性，对于一些未接触过编程的人可以更好地上手。

本系统是基于Jhipster框架进行开发的。JHipster框架是一个应用代码生成器，可以创建Spring Boot AngularJS/Angular的应用以及基于Spring的微服务应用，并能无缝对接多种微服务服务器， JHipster是目前覆盖Java web开发全栈的一个开源的框架，基于实体，目前以命令行形式编程。通过对该框架实行可视化封装，实现可视化形式，可以增加其易用性和交互性。

关键字：可视化编程；JHipster；Java；Web

Abstract

Visual programming is a brand-new programming method that allows programmers to use the various controls provided by the software to construct the application"s interface through drag and drop. Visual programming does not require writing too much code or writing very little code. Even for users who do not understand grammatical knowledge and APIs, they can implement some functions, which can greatly improve the efficiency of the designer. Compared with textual programming, visual programming is more intuitive and can quickly build a simple application in some scenarios. At the same time, visual programming reduces the threshold of programming, which can be used as an introductory programming method, especially to arouse the interest of those who do not program or want to try. It has a good use in children"s programming and some robot programming. Therefore, the realization of programming visualization can not only increase the efficiency but also improve the ease of use, and can be better used by some people who have not been exposed to programming.

This system is developed based on the Jhipster framework. The JHipster framework is an application code generator that can create Spring Boot AngularJS/Angular applications as well as Spring-based microservice applications and can seamlessly interface with various microservice servers. JHipster is currently an open source covering the entire Java web development stack. The framework, based on entities, is currently programmed in the form of a command line. By visually encapsulating the framework and implementing visualizations, it can increase its ease of use and interactivity.

KeyWords: Visual programming JHipster Java web

目录

摘要 I

Abstract II

第一章 绪论 1

1.1选题背景与课题意义 1

1.1.1 选题背景 1

1.1.2 课题意义 1

1.2 研究现状 1

第二章 技术简介 3

2.1 JHipster的发展和特点 3

2.2 MySQL简介 6

2.3 AngularJS简介 7

2.4 Spring Boot简介 7

2.5 HTML简介 7

第三章 系统设计与实现 8

3.1 系统功能需求 8

3.2 系统的初步设计 8

3.3 系统实现 9

3.3.1软件及环境的安装 9

3.3.2 生成初始项目 10

3.3.3项目结构 15

3.3.4 拖拽的实现 17

第四章 总结与展望 20

4.1总结 20

4.2 展望 20

致谢 22

参考论文 23

第一章 绪论

1.1选题背景与课题意义

1.1.1 选题背景

当下社会，随着计算机，互联网以及软件开发技术的的飞速发展，越来越多的人投身到程序员行业中，包括一些转行业的，他们方向不同，所掌握的技能不同，水平也是参差不齐，当然所用的语言也是各不相同，但大部分的程序员都是以文本方式进行编程来进行项目的开发。这对于一些跨专业或者没有什么基础的人，学习编程是一个不小的挑战，枯燥的文字，复杂的语法都会成为他们学习之路上的障碍。但通过可视化可以编程可以让这部分人可以更好的入门以及更方便的进行开发。同时对于许多行业的软件开发来说，通过可视化编程能够更快，更简单的完成，因为对于一些功能的实现，开发者不需要写大量的代码，而是通过拖动已有的控件来实现。通过可视化编程，能够实现所见即所得，大大提升了开发的效率，同时也能降低代码的错误率。另一方面，实现可视化编程可以减少文本编程中一些重复繁琐的步骤，这也能够节省开发时间，减轻开发者的工作量。

1.1.2 课题意义

目前主流的编程方式是文本编程，但要实现文本编程需要有一定编程的语法等之类的相关基础知识，这对于一些没有基础但想要入门的人来说，有些挑战和要花时间去学习相关知识，同时对于一些低年龄段的人来说让他们学语法之类的东西显得有些困难和枯燥，很多人在还没真正入门就可能产生放弃的想法。从文本编程和可视化编程对比来看，可视化在易学性和学习的所花的时间都占据一定的优势，同时也可以避免在文本编程中出现的一些语法之类的错误，更直观方便以及更人性化的让开发者进行编程开发。从有些调查中可以发现，对于低年龄的来说，可视化编程更能让他们接受^[1]，这也能够说明可视化编程还是有发展的必要的。

可视化编程能更好的让开发者进行开发，能让程序设计人员通过拖拉图形控件来实现编程，他们只需要调整控件的位置，设置控件的属性等，而不需要大量的使用键盘输入代码，从理论上来说这样可以极大的减少由于输入引发的语法问题^[3]，使得编程更加直观，更容易让人接受，同时也可以更方便快捷的完成一些所需的功能，用户可以在更短的时间开发出一款应用或者搭建出一款web应用的前端，而不需要再去写那部分的代码，有助于提高了开发效率，节省了大量的时间和成本，这对于中小型或个人项目非常友好，这使得可视化编程的门槛要又大大降低，更易上手。JHipster框架是通过命令行形式执行的，对其进行可视化封装，能够实现通过拖拽的方式完成web系统的创建。

1.2 研究现状

目前对于可视化编程领域的研究应用可谓是多种多样，有的是针对于一些实际需求而开发的，如：机器人开发，游戏开发以及一些工业产品的监控等。随着需求的不断增加，各种各样功能强大的可视化开发工具诞生，满足不同用户的不同需求^[3]，有的占有很大的市场。前期出现了许多的可视化编程语言和技术，如被多数程序员所熟悉的vb，vc ，MFC等，一些能够进行可视化开发的编程工具，如微软的Visual Studio，而且随着技术的发展，VS的功能越来越强大，使用的场景更丰富，此外现在有不少在线web可视化编程网站，只须进入该网站就可通过拖拽的各种封装好的组件来搭建自己的应用页面，可以在很短的时间内完成一个单一页面应用或者网站的前端页面，对于使用者可能都不需要太多的专业性就能做出自己想要的一个简单的应用，不用一行一行的用键盘敲代码，并且提供了各式各样的组件，使得开发更具丰富性，开发出来的界面也很美观，做好之后将项目导出到本地，这对于中小型或个人项目非常友好，使可视化编程的门槛又大大降低，更易上手，可以使更多的人加入到编程中来，提高使用者的开发兴趣。

JHipster作为一款高效的Java Web开发框架，在开发者中颇受欢迎，其目前是通过命令行形式来进行编程的，相对繁琐一些，对JHipster框架进行可视化封装，实现通过拖拽的方式来进行web系统的构建，这将大大提升交互体验以及框架的易用性，省去一些繁琐的步骤，提高开发效率。

可视化编程目前使用的场景目前还不如文本编程，且在一些功能的实现上没有文本编程那么强大，对于一些大型或企业及的项目上不能很好的支持，满足不了项目的需求，而文本编程可以适用。虽然存在缺点，但可视化编程在一些行业还是有所发展和使用比如：少儿编程，机器人编程等，但可视化目前还有不少的问题，比如层次化落，应用不够成熟，导致其在专业的编程领域和行业中很难应用到。虽然有短板，但也不可否认其在某些领域的作用，其门槛低，易于使用的优点还是能吸引一定的用户，而且出现的不少在线Web可视化编程网站，使得开发更加便捷，门槛更低，更高效。

第二章 技术简介

2.1 JHipster的发展和特点

JHipster是一个JavaWeb开发平台，目前是开源的，用于生成，开发和部署Spring Boot Angular/React Web应用程序和Spring微服务。JHipster于Julien Dubois于2013年开始，旨在支持Web应用程序的所有繁琐方面开发：在客户端和服务器端选择技术，并将其整合到一个完整的构建过程中^[12]。作为最新全能JavaWeb开发式产生器，从其诞生到现在，发展势头迅猛，好多好的有名的项目使基于这个框架开发的，在欧美颇为流行。该框架由累积了丰富Java开发经验的专家所开发出来的，包含各种实用的框架技术的精髓，拥有全方面的配置，是一种完备的开发应用程式。其拥有完美的Java体系架构，适用广泛，对于面向服务的体系结构更是极佳。其特色是多用注解以及Java Config来代替XML配置的组态，包括从开发到云部署之间一系列的过程，同时还提供了最先进的如Mircroservice 之类的Java技术。

JHipster可以迅速地建立一个基本的项目工作模板，可以将你有限的时间集中在业务的运作上，对于新人上手简单，对于那些高手更是没障碍。项目开发之前，先配置好Java、Git和Maven(或Gradle)的开发环境，接着在CMD中通过npm指令来安装JHipster开发所需的一些必要工具。JHipster通过Node.js和Yeoman产生Java应用代码，产生的代码是通过Maven或者Gradle来运行的。

JHipster为开发者生成一个完整的现代的Java web应用程序或微服务架构，统一：

• Spring Boot在服务器端的高性能和强大的Java堆栈
• 一个时尚，现代，移动第一前端Angular，React和Bootstrap
• JHipster注册中心，Netflix OSS，ELK堆栈和Docker是一个强大的微服务架构
• 通过Yeoman，Webpack和Maven/Gradle构建您的应用程序的强大工作流程。

客户端技术栈

单页面Web应用:

• 响应式页面设计
• HTML5 Boilerplate
• Twitter Bootstrap
• AngularJS
• 兼容 IE9 和其他现代浏览器
• 完整的国际化支持，基于 Angular Translate
• 可选 Sass 用于 CSS 设计
• 可选 Spring Websocket 来实现 WebSocket
• 配有强大的 Yeoman 开发工作流:
• 通过Bower可轻易实现JavaScript类库的安装
• 支持live reload 并且通过使用Gulp.js构建和优化项目
• 测试使用的是Karma和PhantomJS
• 通关使用Thymeleaf模板引擎在服务端渲染页面

服务端技术栈

一个完整的基于spring的应用：

• 使用Spring Boot 简化应用配置
• 使用Maven或Gradle来构建和测试以及运行项目
• "development" 和 "production" 配置文件 (支持 Maven 和 Gradle)
• Spring Security
• Spring MVC REST Jackson
• 可选的 WebSocket 支持 -- 基于 Spring Websocket
• Spring Data JPA Bean 验证
• 使用 Liquibase 实现数据库自动更新
• Elasticsearch 支持对数据库的搜索功能
• 支持像MongoDB 这样的 document-oriented NoSQL 数据库
• 支持像Cassandra 这样的 column-oriented NoSQL 数据库
• 支持生产环境：
• Monitoring with Metrics 监控运行状态
• 支持 ehcache或者 hazelcast
• 基于 hazelcast的可选的 HTTP session 集群
• 优化的静态资源(gzip filter, HTTP cache headers)
• 可在运行时配置日志管理
• 性能的优化通过HikariCP连接池来实现
• 可以将应用构建成一个标准的 WAR 文件或者一个可执行的 JAR 文件

如图（1），图（2）为JHipster工作原理

图 （1）工作原理

图 2 工作原理

JHipster有其特定的领域语言及JDL，官方增加了能够在单个文件或多个中描述所有实体极其关系的可能性的简单和用户友好性的语法。可以使用在线的JDL－Studio IDE 创建是实体和UML可视化，可以下载下来然后导入到项目中。一旦生成了一个项目（现有的或者用jhipster命令生成的），就可以使用import-jdl子生成器通过运行jhipster import-jdl your-jdl-file.jh(在JHipster项目下执行此命令)，从JDL文件生成实体。通过从生成的JHipster应用程序的根目录运行，还可以使用JHipstrt UML生成实体并将其导出为JDL文件 jhipster-uml your-xmi-file.xmi --to-jdl。如果要使用jhipster UML，那么需要在CMD中通过命令来安装它，命令为：npm install -g jhipster-uml。整体的工作流程很简单，及：

• 创建应用
• 创建所需JDL文件
• 导入它

2.2 MySQL简介

在创建JHipster项目时，可以选择使用MySQL数据库来存放项目的数据。MySQL是一种关系型数据库，由瑞典MySQL AB公司开发，现由Oracle公司拥有。作为一款开源数据库，非企业用户可使用社区版，虽然是免费的，但仍可以购买商业许可证版，以得到高级服务。MySQL虽然能够承受高并发访问，但占用的内存也远大于SQLite由于其性能高性能高、可靠性好等优点，在中小型项目或者个人的项目以及一些开发Demo中尤为受欢迎。MySQL虽有规模小、功能有限等不足，与其他如Oracle之类的大型数据库相比，并没有影响它受欢迎的程度。可以使用命令行形式来创建和管理数据库，当然也可以用一些图形管理工具来管理。MySQL可以在windows,Linux,UNIX等各种平台上运行，可以安装到服务器上甚至是桌面系统，同时它是LAMP堆栈的重要组成部分。MySQL内部包含多种数据库引擎，最常的引擎是InnoDB，该引擎支持数据库事务。当然在启用数据库时要先打开本地MySQL服务。

2.3 AngularJS简介

AngularJS是一款主流的前端web应用框架，采用JavaScript语言编写的客户端MVC框架，帮助开发者编写现代化的单页面(single-page)应用，尤其适合编写有大量CRUD(增删查改)操作的，具有Ajax风格的富客户端应用^[2]。目前主要由Google公司和公司社区来维护。AngularJS是通过指令来扩展html的，并且是以表达式的方式把数据绑定到html中，并通过lt;scriptgt; 标签添加到 HTML 页面。AngularJS的目的是通过客户端MVC(模型-视图-控制器)和模型-视图-视图模型（MVVM）提供可简化应用程序开发和测试的体系结构以及富Internet应用程序常用组件的框架。其实现了MVC模式来分离表示数据和逻辑组件，并且AngularJS使用了依赖注入，将依赖于视图的控制器之类的传统服务器端服务引到了客户端形式的web用用程序，大大减少了服务器上的负担。AngularJS结合html和CSS能够开发单一页面的web应用程序，其指令允许开发者指定定义和可重用的类HTML元素和属性，以定义数据绑定和表示组件的行为，可实现数据的双向绑定，对视图的任何改变都会反映在模型中，这避免了主动操作DOM并鼓励web应用程序的引导和快速原型设计的需要。常用的AngularJS指令有ng-app,ng-model,ne-controller,ng-bind等。

2.4 Spring Boot简介

Spring Boot是Pivota开发的全新框架，简化了Spring 应用的初始搭建包括开发的过程。从本质上看，它是一些库的集合，默认配置了很多框架的使用方式，并且提供了命令行界面。通过使用Spring Boot能够创建独立的Spring应用程序，同时可以实现Maven配置的简单化，即使没有代码产生也可不用去进行XML的配置。

2.5 HTML简介

HTML语言是主要用来进行网页和web应用开发的超文本标记语言(Hyper Text Markup Language)。在进行web发开时，通过与CSS和Javascript结合使用。其实HTML的实质是一种标记语言而不能算作是编程语言，使用标记标签来描述网页。HTML提供了指定文本的结构语义，如标题，段落，列表，链接，引号和其他项目来创建结构化文档的方法。HTML元素由标签描述，使用尖括号编写。诸如标签和直接将内容引入页面。其他标签r如lt;img/gt;lt;input/gt;lt;pgt;环绕并提供关于文档文本的信息，并可包括其他标签作为子元素。浏览器不显示HTML标签，而是使用它们来解释页面内容。

第三章 系统设计与实现

3.1 系统功能需求

当前JHipster框架是命令行的形式来创建实体的，对其进行可视化封装，实现通过拖拽的方式能够大大提高开发的效率，减少不必要的开发。目前可视化用途广泛，可以解决开发过程中的一些问题，目前市场上面一些在线可视化网站可以通过拖拽的搭建出一个完美的web界面,或者是简单的单一页面应用程序，这可以省去一些繁琐的步骤，实现可视化，以拖拽方式进行开发可以降低一些开发的难度，节省开发时间和降低了操作的复杂性，同时实现可视化能够提升交体验，使得开发者更易使用。

要实现通过拖拽的方式进行web系统的构建，则需要对JHipster框架进行可视化封装，通过创建不同的控件，使其能够被拖拽，这需要先建立父级控件列表，并实现个控件可被拖动，其次再创建一个iframe容器，用来存放被托拽的控件，然后通过脚本处理，完成拖拽的开始，放置和过程，同时要能够实现JDL设计与实现。

对系统所拥有的功能和所用到的技术进行具体分析，在分析的过程中采用结构化的分析方法，自顶向下，逐层分解问题。结合可视化编程和JHipster框架以及实际的具体分析，本系统要实现通过拖拽的方式实现web系统的构建与生成，并且支持JDL设计与显示。

3.2 系统的初步设计

基于JHipster框架的可视化系统的设计与实现，该系统的主要功能是通过拖拽的方式进行web系统的构建，需对JHipster框架进行可视化封装 。在进行系统的需求分析之后，下一步就是系统的设计阶段。对于完整的软件开发周期，设计阶段是最主要的部分。

• 通过控制台命令创建初始项目
• 进行数据库连接
• 对页面进行设计，建立父级控件列表，放置新控件的iframe容器
• 新建脚本，创建使父级列表组件可拖动的类，处理拖拽开始，过程，结束事件的类和方法以及设置新控件的组件

下图(3)为大概视图

图 （3）页面分布

3.3 系统实现

3.3.1软件及环境的安装

在进行项目的开发之前，先要对所需的软件和环境进行安装和配置

1.环境搭建

• 安装JDK

去Java官网下载对应系统和版本JDK，配置Java环境变量

• 安装npm

去Node.js官网下载最新版node.js安装，根据提示按步骤安装，在具有管理员权限的cmd、PowerShell或者cmder中输入node -v和npm -v看一下版本并确认是否安装成功。

• 安装Yeoman

在终端中输入npm install -g yo

• 安装Bower

npm install -g bower

• 安装Grunt/Gulp 
  npm install -g grunt-cli /npm install -g gulp
• 安装Git 
  下载安装好Git之后，进行环境变量配置
• 安装PhantomJS 
  下载安装好PhantomJS 之后，进行环境变量配置
• 安装JHipster生成器 
  npm install -g generator-jhipster

2.所用软件的安装

• 安装MySQL

官网下载对应系统所需的版本，按步骤提示安装，安装好后进行环境变量配置，在每次使用之前确保本地MySQL服务器开启。

• IDE按装

根据个人情况，可安装Spring Tool Suite(STS) 或Eclipse或Intellij IDEA。

3.3.2 生成初始项目

（1） 打开cmd，进入自己项目所要放置的盘，新建一个文件夹（命令：mkdir App），然后进入该文件夹（cd App），再新建一个JHipster项目 (yo Jhipster),如下图(4)：

图 (4) 创建初始项目命令

（2）回车之后出现如下界面，根据提示以及项目需求进行配置选择，选好后等待初步项目的生成，如下图(5)：

图 (5) 项目配置

（3）等项目完成后，打开MySQL，新建一个与application-dev.yml文件中保持一致，进入到Appsrcmain esourcesconfig 目录下，分别打开 application-dev.yml 和 application-prod.yml文件，并修改里面的数据库链接信息，修改成当前MySQL的登录名和密码，如下图(6),图（7）：

图 （6）新建数据库

剩余内容已隐藏，请支付后下载全文，论文总字数：19034字