Springboot构建应用程序

使用Java 8,Spring Boot和Angular建立简单的Web应用程序css

入门条件html

· Java 8已安装。java

· 任何Java IDE(最好是STS或IntelliJ IDEA)。spring

· 使用HTML,CSS和JavaScript,基本了解基于Java和Spring的Web开发和UI开发。数据库

背景浏览器

在本文中,我将尝试使用<u>Java 8</u><u>Spring Boot</u>建立一个小型端到端Web应用程序。app

我选择了SpringBoot,由于它更容易配置而且能够很好地与其余技术堆栈配合使用。我还使用了REST API和SpringData JPA以及H2数据库。spring-boot

我使用  <u>Spring Initializer</u>  添加全部依赖项,并使用个人全部配置建立一个空白的工做项目。工具

我使用Maven做为构建工具,但也可使用Gradle。
pom.xml
图片描述
图片描述
图片描述
在UI部分,我使用了AngularJS和BootStrap CSS以及基本的JS,CSS和HTML。
这是一个很是简单的可用于建立Web应用程序的项目。
结构测试

clipboard.png

clipboard.png

实施
让咱们从SpringBootApplication类开始。
图片描述
咱们如今建立Controller。 
图片描述
这将做为咱们SPA的主页。如今咱们建立一个Controller来处理一些REST调用。
图片描述
在这里,咱们有不一样的方法来处理来自客户端的不一样测试调用。
我在Controller中安装了一个Service类  UserService。
图片描述
在典型的Web应用程序中,一般有两种类型的数据对象:DTO(经过客户端进行通讯)和实体(经过DB进行通讯)。
DTO
图片描述
图片描述
Entity
图片描述
图片描述
图片描述
对于数据库操做,咱们使用SpringData JPA:
图片描述
在默认状况下,扩展JpaRepository 提供了大量的CRUD操做,也可使用它来建立本身的查询方法。
为了转换DTO - >Entity和Entity - > DTO,我建立了一些基本的转换器类。
图片描述
如今让咱们关注UI部分。
使用Angular时,咱们须要遵循一些指导原则。
index.html
图片描述
在建立HTML时,不要忘记导入所需的JS和CSS文件。

clipboard.png
app.js
图片描述
图片描述
图片描述
UserService.js
图片描述
app.css
图片描述
可使用如下方法构建应用程序
mvn clean install 或者java -jar bootdemo-0.0.1-SNAPSHOT.jar 
打开浏览器并点击  http:// localhost:8080 / home
在打开一个简单的页面以后,输入名称和技能,输入的数据将保留在数据库中。

image.png

本人创业团队产品MadPecker,主要作BUG管理、测试管理、应用分发,有须要的朋友欢迎试用、体验!本文为MadPecker团队产品经理译制,转载请标明出处

相关文章
相关标签/搜索