使用Spring Boot和Gradle建立AngularJS項目

時間 2019-11-12

標籤使用 spring boot gradle 建立 angularjs 項目欄目 Spring 简体版

原文原文鏈接

Spring Boot 是由 Pivotal 團隊提供的全新框架，其設計目的是用來簡化新 Spring 應用的初始搭建以及開發過程。該框架使用了特定的方式來進行配置，從而使開發人員再也不須要定義樣板化的配置。javascript

本文主要是記錄使用 Spring Boot 和 Gradle 建立項目的過程，其中會包括 Spring Boot 的安裝及使用方法，但願經過這篇文章可以快速搭建一個項目。css

1. 開發環境

操做系統: mac
JDK：1.7.0_60
Gradle：2.2.1
IDE：Idea

2. 建立項目

你能夠經過 Spring Initializr 來建立一個空的項目，也能夠手動建立，這裏我使用的是手動建立 gradle 項目。html

參考使用Gradle構建項目建立一個 ng-spring-boot 項目，執行的命令以下：前端

$ mkdir ng-spring-boot && cd ng-spring-boot $ gradle init

ng-spring-boot 目錄結構以下：java

➜  ng-spring-boot  tree
.
├── build.gradle
├── gradle
│   └── wrapper
│       ├── gradle-wrapper.jar
│       └── gradle-wrapper.properties
├── gradlew
├── gradlew.bat
└── settings.gradle

2 directories, 6 files

而後修改 build.gradle 文件：mysql

buildscript { ext { springBootVersion = '1.2.2.RELEASE' } repositories { mavenCentral() } dependencies { classpath("org.springframework.boot:spring-boot-gradle-plugin:${springBootVersion}") } } apply plugin: 'java' apply plugin: 'eclipse' apply plugin: 'idea' apply plugin: 'spring-boot' jar { baseName = 'ng-spring-boot' version = '0.0.1-SNAPSHOT' } sourceCompatibility = 1.7 targetCompatibility = 1.7 repositories { mavenCentral() maven { url "https://repo.spring.io/libs-release" } } dependencies { compile("org.springframework.boot:spring-boot-starter-data-jpa") compile("org.springframework.boot:spring-boot-starter-web") compile("org.springframework.boot:spring-boot-starter-actuator") runtime("org.hsqldb:hsqldb") testCompile("org.springframework.boot:spring-boot-starter-test") } eclipse { classpath { containers.remove('org.eclipse.jdt.launching.JRE_CONTAINER') containers 'org.eclipse.jdt.launching.JRE_CONTAINER/org.eclipse.jdt.internal.debug.ui.launcher.StandardVMType/JavaSE-1.7' } } task wrapper(type: Wrapper) { gradleVersion = '2.3' }

使用 spring-boot-gradle-plugin 插件能夠提供一些建立可執行 jar 和從源碼運行項目的任務，它還提供了 ResolutionStrategy 以方便依賴中不用寫版本號。git

3. 建立一個可執行的類

首先，新建一個符合 Maven 規範的目錄結構：angularjs

$ mkdir -p src/main/java/com/javachen

建立一個 Sping boot 啓動類：github

package com.javachen; import org.springframework.boot.SpringApplication; import org.springframework.boot.autoconfigure.EnableAutoConfiguration; import org.springframework.context.annotation.ComponentScan; import org.springframework.context.annotation.Configuration; @Configuration @EnableAutoConfiguration @ComponentScan public class Application { public static void main(String[] args) { SpringApplication.run(Application.class, args); } }

main 方法使用了 SpringApplication 工具類。這將告訴Spring去讀取 Application 的元信息，並在Spring的應用上下文做爲一個組件被管理。web

@Configuration 註解告訴 spring 該類定義了 application context 的 bean 的一些配置。
@ComponentScan 註解告訴 Spring 遍歷帶有 @Component 註解的類。這將保證 Spring 能找到並註冊 GreetingController，由於它被 @RestController 標記，這也是 @Component 的一種。
@EnableAutoConfiguration 註解會基於你的類加載路徑的內容切換合理的默認行爲。好比，由於應用要依賴內嵌版本的 tomcat，因此一個tomcat服務器會被啓動並代替你進行合理的配置。再好比，由於應用要依賴 Spring 的 MVC 框架,一個 Spring MVC 的 DispatcherServlet 將被配置並註冊，而且再也不須要 web.xml 文件。
你還能夠添加 @EnableWebMvc 註解配置 Spring Mvc。

上面三個註解還能夠用 @SpringBootApplication 代替：

package com.javachen.examples.springboot; import org.springframework.boot.SpringApplication; import org.springframework.boot.autoconfigure.SpringBootApplication; @SpringBootApplication // same as @Configuration @EnableAutoConfiguration @ComponentScan public class Application { public static void main(String[] args) { SpringApplication.run(Application.class, args); } }

你也能夠修改該類的 main 方法，獲取 ApplicationContext：

package com.javachen; import java.util.Arrays; import org.springframework.boot.SpringApplication; import org.springframework.boot.autoconfigure.EnableAutoConfiguration; import org.springframework.context.ApplicationContext; import org.springframework.context.annotation.ComponentScan; import org.springframework.context.annotation.Configuration; @SpringBootApplication public class Application { public static void main(String[] args) { ApplicationContext ctx = SpringApplication.run(Application.class, args); System.out.println("Let's inspect the beans provided by Spring Boot:"); String[] beanNames = ctx.getBeanDefinitionNames(); Arrays.sort(beanNames); for (String beanName : beanNames) { System.out.println(beanName); } } }

4. 建立一個實體類

建立一個實體類 src/main/java/com/javachen/model/Item.java：

package com.javachen.model; import javax.persistence.*; @Entity public class Item { @Id @GeneratedValue(strategy=GenerationType.IDENTITY) private Integer id; @Column private boolean checked; @Column private String description; public Integer getId() { return id; } public void setId(Integer id) { this.id = id; } public boolean isChecked() { return checked; } public void setChecked(boolean checked) { this.checked = checked; } public String getDescription() { return description; } public void setDescription(String description) { this.description = description; } }

5. 建立控制類

建立一個 Restfull 的控制類，該類主要提供增刪改查的方法：

package com.javachen.controller; import com.javachen.model.Item; import com.javachen.repository.ItemRepository; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.dao.EmptyResultDataAccessException; import org.springframework.http.HttpStatus; import org.springframework.web.bind.annotation.*; import javax.persistence.EntityNotFoundException; import java.util.List; @RestController @RequestMapping("/items") public class ItemController { @Autowired private ItemRepository repo; @RequestMapping(method = RequestMethod.GET) public List<Item> findItems() { return repo.findAll(); } @RequestMapping(method = RequestMethod.POST) public Item addItem(@RequestBody Item item) { item.setId(null); return repo.saveAndFlush(item); } @RequestMapping(value = "/{id}", method = RequestMethod.PUT) public Item updateItem(@RequestBody Item updatedItem, @PathVariable Integer id) { Item item = repo.getOne(id); item.setChecked(updatedItem.isChecked()); item.setDescription(updatedItem.getDescription()); return repo.saveAndFlush(item); } @RequestMapping(value = "/{id}", method = RequestMethod.DELETE) @ResponseStatus(value = HttpStatus.NO_CONTENT) public void deleteItem(@PathVariable Integer id) { repo.delete(id); } @ResponseStatus(HttpStatus.BAD_REQUEST) @ExceptionHandler(value = { EmptyResultDataAccessException.class, EntityNotFoundException.class }) public void handleNotFound() { } }

Greeting 對象會被轉換成 JSON 字符串，這得益於 Spring 的 HTTP 消息轉換支持，你沒必要人工處理。因爲 Jackson2 在 classpath 裏，Spring的 MappingJackson2HttpMessageConverter 會自動完成這一工做。

這段代碼使用 Spring4 新的註解：@RestController，代表該類的每一個方法返回對象而不是視圖。它實際就是 @Controller 和 @ResponseBody 混合使用的簡寫方法。

6. 建立 JPA 倉庫

使用 JAP 來持久化數據：

package com.javachen.repository; import com.javachen.model.Item; import org.springframework.data.jpa.repository.JpaRepository; import org.springframework.data.jpa.repository.Query; import java.util.List; public interface ItemRepository extends JpaRepository<Item, Integer> { @Query("SELECT i FROM Item i WHERE i.checked=true") List<Item> findChecked(); }

Spring Boot 能夠自動配置嵌入式的數據庫，包括 H二、HSQL 和 Derby，你不須要配置數據庫連接的 url，只須要添加相關的依賴便可。另外，你還須要依賴 spring-jdbc，在本例中，咱們是引入了對 spring-boot-starter-data-jpa 的依賴。若是你想使用其餘類型的數據庫，則須要配置 spring.datasource.* 屬性，一個示例是在 application.properties 中配置以下屬性：

spring.datasource.url=jdbc:mysql://localhost/test spring.datasource.username=dbuser spring.datasource.password=dbpass spring.datasource.driver-class-name=com.mysql.jdbc.Driver

建立 src/main/resources/application.properties 文件，修改 JPA 相關配置，如：

spring.jpa.hibernate.ddl-auto=create-drop

注意：

SpringApplication 會在如下路徑查找 application.properties 並加載該文件：

/config 目錄下

當前目錄

classpath 中 /config 包下

classpath 根路徑下

7. 運行項目

能夠在項目根路徑直接運行下面命令：

$ export JAVA_OPTS=-Xmx1024m -XX:MaxPermSize=128M -Djava.security.egd=file:/dev/./urandom $ ./gradlew bootRun

也能夠先 build 生成一個 jar 文件，而後執行該 jar 文件：

$ ./gradlew build && java -jar build/libs/ng-spring-boot-0.0.1-SNAPSHOT.jar

啓動過程當中你會看到以下內容，這部份內容是在 Application 類中打印出來的：

Let's inspect the beans provided by Spring Boot:
application
beanNameHandlerMapping
defaultServletHandlerMapping
dispatcherServlet
embeddedServletContainerCustomizerBeanPostProcessor
handlerExceptionResolver
helloController
httpRequestHandlerAdapter
messageSource
mvcContentNegotiationManager
mvcConversionService
mvcValidator
org.springframework.boot.autoconfigure.MessageSourceAutoConfiguration
org.springframework.boot.autoconfigure.PropertyPlaceholderAutoConfiguration
org.springframework.boot.autoconfigure.web.EmbeddedServletContainerAutoConfiguration
org.springframework.boot.autoconfigure.web.EmbeddedServletContainerAutoConfiguration$DispatcherServletConfiguration
org.springframework.boot.autoconfigure.web.EmbeddedServletContainerAutoConfiguration$EmbeddedTomcat
org.springframework.boot.autoconfigure.web.ServerPropertiesAutoConfiguration
org.springframework.boot.context.embedded.properties.ServerProperties
org.springframework.context.annotation.ConfigurationClassPostProcessor.enhancedConfigurationProcessor
org.springframework.context.annotation.ConfigurationClassPostProcessor.importAwareProcessor
org.springframework.context.annotation.internalAutowiredAnnotationProcessor
org.springframework.context.annotation.internalCommonAnnotationProcessor
org.springframework.context.annotation.internalConfigurationAnnotationProcessor
org.springframework.context.annotation.internalRequiredAnnotationProcessor
org.springframework.web.servlet.config.annotation.DelegatingWebMvcConfiguration
propertySourcesBinder
propertySourcesPlaceholderConfigurer
requestMappingHandlerAdapter
requestMappingHandlerMapping
resourceHandlerMapping
simpleControllerHandlerAdapter
tomcatEmbeddedServletContainerFactory
viewControllerHandlerMapping

你也能夠啓動遠程調試：

$ ./gradlew build $ java -Xdebug -Xrunjdwp:server=y,transport=dt_socket,address=8000,suspend=n \ -jar build/libs/spring-boot-examples-0.0.1-SNAPSHOT.jar

接下來，打開瀏覽器訪問 http://localhost:8080/items，你會看到頁面輸出一個空的數組。而後，你可使用瀏覽器的 Restfull 插件來添加、刪除、修改數據。

8. 添加前端庫文件

這裏主要使用 Bower 來管理前端依賴，包括 angular 和 bootstrap。

配置 Bower ，須要在項目根目錄下建立 .bowerrc 和 bower.json 兩個文件。

.bowerrc 文件制定下載的依賴存放路徑：

{ "directory": "src/main/resources/static/bower_components", "json": "bower.json" }

bower.json 文件定義依賴關係：

{ "name": "ng-spring-boot", "dependencies": { "angular": "~1.3.0", "angular-resource": "~1.3.0", "bootstrap-css-only": "~3.2.0" } }

若是你沒有安裝 Bower，則運行下面命令進行安裝：

npm install -g bower

安裝以後下載依賴：

bower install

運行成功以後，查看 src/main/resources/static/bower_components 目錄結構：

src/main/resources/static/bower_components
├── angular
├── angular-resource
└── bootstrap-css-only

9. 建立前端頁面

注意：

前端頁面和 js 存放到 src/main/resources/static/ 目錄下，是由於 Spring Boot 會自動在 /static 或者 /public 或者 /resources 或者 /META-INF/resources 加載靜態頁面。

建立 index.html

建立 src/main/resources/static 目錄存放靜態頁面 index.html：

<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="./bower_components/bootstrap-css-only/css/bootstrap.min.css" /> </head> <body ng-app="myApp"> <div class="container" ng-controller="AppController"> <div class="page-header"> <h1>A checklist</h1> </div> <div class="alert alert-info" role="alert" ng-hide="items &amp;&amp; items.length > 0"> There are no items yet. </div> <form class="form-horizontal" role="form" ng-submit="addItem(newItem)"> <div class="form-group" ng-repeat="item in items"> <div class="checkbox col-xs-9"> <label> <input type="checkbox" ng-model="item.checked" ng-change="updateItem(item)"/> </label> </div> <div class="col-xs-3"> <button class="pull-right btn btn-danger" type="button" title="Delete" ng-click="deleteItem(item)"> <span class="glyphicon glyphicon-trash"></span> </button> </div> </div> <hr /> <div class="input-group"> <input type="text" class="form-control" ng-model="newItem" placeholder="Enter the description..." /> <span class="input-group-btn"> <button class="btn btn-default" type="submit" ng-disabled="!newItem" title="Add"> <span class="glyphicon glyphicon-plus"></span> </button> </span> </div> </form> </div> <script type="text/javascript" src="./bower_components/angular/angular.min.js"></script> <script type="text/javascript" src="./bower_components/angular-resource/angular-resource.min.js"></script> <script type="text/javascript" src="./bower_components/lodash/dist/lodash.min.js"></script> <script type="text/javascript" src="./app/app.js"></script> <script type="text/javascript" src="./app/controllers.js"></script> <script type="text/javascript" src="./app/services.js"></script> </body> </html>

初始化 AngularJS

這裏使用閉包的方式來初始化 AngularJS，代碼見 src/main/resources/static/app/app.js ：

(function(angular) { angular.module("myApp.controllers", []); angular.module("myApp.services", []); angular.module("myApp", ["ngResource", "myApp.controllers", "myApp.services"]); }(angular));

建立 resource factory

代碼見 src/main/resources/static/app/services.js ：

(function(angular) { var ItemFactory = function($resource) { return $resource('/items/:id', { id: '@id' }, { update: { method: "PUT" }, remove: { method: "DELETE" } }); }; ItemFactory.$inject = ['$resource']; angular.module("myApp.services").factory("Item", ItemFactory); }(angular));

建立控制器

代碼見 src/main/resources/static/app/controllers.js ：

(function(angular) { var AppController = function($scope, Item) { Item.query(function(response) { $scope.items = response ? response : []; }); $scope.addItem = function(description) { new Item({ description: description, checked: false }).$save(function(item) { $scope.items.push(item); }); $scope.newItem = ""; }; $scope.updateItem = function(item) { item.$update(); }; $scope.deleteItem = function(item) { item.$remove(function() { $scope.items.splice($scope.items.indexOf(item), 1); }); }; }; AppController.$inject = ['$scope', 'Item']; angular.module("myApp.controllers").controller("AppController", AppController); }(angular));

10. 測試前端頁面

再一次打開瀏覽器，訪問 http://localhost:8080/ 進行測試。

11. 總結

本文主要是記錄快速使用 Spring Boot 和 Gradle 建立 AngularJS 項目的過程。，但願能對你有所幫助。

文中相關的源碼在 ng-spring-boot，你能夠下載該項目，而後編譯、運行代碼。

該項目也可使用 maven 編譯、運行：

$ mvn clean package $ java -jar target/ng-spring-boot-0.0.1-SNAPSHOT.jar

或者直接運行：

$ mvn spring-boot:run

11. 參考文章

原創文章，轉載請註明：轉載自 JavaChen Blog，做者： Junez
本文連接地址： http://blog.javachen.com/2015/01/06/build-app-with-spring-boot-and-gradle.html
本文基於署名2.5中國大陸許可協議發佈，歡迎轉載、演繹或用於商業目的，可是必須保留本文署名和文章連接。如您有任何疑問或者受權方面的協商，請郵件聯繫我。