使用Spring Boot， JPA， Mysql， ThymeLeaf，gradle， Kotlin快速构建一个CRUD Web App
Thymeleaf is a modern server-side Java template engine for both web and standalone environments.
Thymeleaf's main goal is to bring elegant natural templates to your development workflow — HTML that can be correctly displayed in browsers and also work as static prototypes, allowing for stronger collaboration in development teams.
With modules for Spring Framework, a host of integrations with your favourite tools, and the ability to plug in your own functionality, Thymeleaf is ideal for modern-day HTML5 JVM web development — although there is much more it can do.
Thymeleaf是一个XML/XHTML/HTML5模板引擎，可用于Web与非Web环境中的应用开发。它是一个开源的Java库，基于Apache License 2.0许可，由Daniel Fernández创建，该作者还是Java加密库Jasypt的作者。
Thymeleaf提供了一个用于整合Spring MVC的可选模块，在应用开发中，你可以使用Thymeleaf来完全代替JSP，或其他模板引擎，如Velocity、FreeMarker等。Thymeleaf的主要目标在于提供一种可被浏览器正确显示的、格式良好的模板创建方式，因此也可以用作静态建模。你可以使用它创建经过验证的XML与HTML模板。相对于编写逻辑或代码，开发者只需将标签属性添加到模板中即可。接下来，这些标签属性就会在DOM（文档对象模型）上执行预先制定好的逻辑。
Thymeleaf官方文档：
http://www.thymeleaf.org/documentation.html
示例模板：
<table>
<thead>
<tr>
<th th:text="#{msgs.headers.name}">Name</td>
<th th:text="#{msgs.headers.price}">Price</td>
</tr>
</thead>
<tbody>
<tr th:each="prod : ${allProducts}">
<td th:text="${prod.name}">Oranges</td>
<td th:text="${#numbers.formatDecimal(prod.price,1,2)}">0.99</td>
</tr>
</tbody>
</table>
让我们开始吧！
Step1. html页面加入头文件 相应的schema
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org">
Step2.主页面模板
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<th:block th:include="common/header :: head"></th:block>
<body>
<th:block th:include="common/header :: header"></th:block>
<div th:if="${not #lists.isEmpty(customers)}">
<h2>Customer List</h2>
<table id="customersTable" class="table table-striped">
<thead>
<tr>
<th>Id</th>
<th>FirstName</th>
<th>LastName</th>
<th>Created Time</th>
</tr>
</thead>
<tbody>
<tr th:each="customer : ${customers}">
<td th:text="${customer.id}"><a href="/product/${product.id}">Id</a></td>
<td th:text="${customer.firstName}">FirstName</td>
<td th:text="${customer.lastName}">LastName</td>
<td th:text="${customer.gmtCreated}">gmtCreated</td>
<!--<td><a th:href="${ '/product/' + product.id}">View</a></td>-->
<!--<td><a th:href="${'/product/edit/' + product.id}">Edit</a></td>-->
</tr>
</tbody>
</table>
</div>
<th:block th:include="common/footer :: footer"></th:block>
</body>
</html>
Step3.include common模板说明
common/header.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head lang="en" th:fragment="head">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<link href="http://cdn.jsdelivr.net/webjars/bootstrap/3.3.4/css/bootstrap.min.css"
th:href="@{/webjars/bootstrap/3.3.4/css/bootstrap.min.css}"
rel="stylesheet" media="screen"/>
<link href="../../static/css/jquery.dataTables.min.css"
th:href="@{css/jquery.dataTables.min.css}" rel="stylesheet" media="screen"/>
<link href="../../static/css/mini_springboot.css"
th:href="@{css/mini_springboot.css}" rel="stylesheet" media="screen"/>
<title>Mini SpringBoot Tutorial</title>
</head>
<body>
<div th:fragment="header">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#" th:href="@{/}">Home</a>
<ul class="nav navbar-nav">
<li><a href="#" th:href="@{/customers.do}">Customers</a></li>
<li><a href="#" th:href="@{/customer/new}">Create Customer</a></li>
</ul>
</div>
</div>
</nav>
<div class="jumbotron">
<div class="row text-center">
<div class="">
<h1 class="center">Springboot极简教程</h1>
<h2>Mini SpringBoot Tutorial</h2>
<h3>Spring Boot Kotlin Thymeleaf Web App</h3>
</div>
</div>
<div class="row text-center">
<iframe class="iframe" src="https://jason-chen-2017.github.io/Jason-Chen-2017/"></iframe>
<!---->
</div>
</div>
</div>
</body>
</html>
common/footer.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head lang="en">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
</head>
<body>
<div th:fragment="footer">
<div class="footer">Springboot极简教程, Jason Chen, 2017</div>
<script src="http://cdn.jsdelivr.net/webjars/jquery/2.1.4/jquery.min.js"
th:src="@{/webjars/jquery/2.1.4/jquery.min.js}"></script>
<script src="http://cdn.jsdelivr.net/webjars/bootstrap/3.3.4/js/bootstrap.min.js"
th:src="@{/webjars/bootstrap/3.3.4/js/bootstrap.min.js}"></script>
<script src="../../static/js/jquery.dataTables.min.js"
th:src="@{js/jquery.dataTables.min.js}"></script>
<script src="../../static/js/mini_springboot.js" th:src="@{js/mini_springboot.js}"></script>
</div>
</body>
</html>
重点看一下thymeleaf的语法设计风格。
写一个th:fragment="{id}"
<div th:fragment="footer">
。。。
</div>
可以直接在其他页面 th:include
<th:block th:include="common/footer :: footer"></th:block>
<h5>Step4. 配置build.gradle，添加spring-boot-starter-thymeleaf
Spring Boot默认就是使用thymeleaf模板引擎的，所以只需要在build.gradle（pom.xml）加入依赖即可。
version = "0.0.1-SNAPSHOT"
buildscript {
ext {
springBootVersion = "1.5.2.RELEASE"
kotlinVersion = "1.1.0"
}
repositories {
mavenCentral()
}
dependencies {
classpath("org.springframework.boot:spring-boot-gradle-plugin:$springBootVersion")
classpath("org.jetbrains.kotlin:kotlin-noarg:$kotlinVersion")
classpath("org.jetbrains.kotlin:kotlin-allopen:$kotlinVersion")
classpath("org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlinVersion")
}
}
apply {
plugin("kotlin")
plugin("kotlin-spring")
plugin("kotlin-jpa")
plugin("org.springframework.boot")
plugin 'java'
plugin 'eclipse'
plugin 'idea'
// plugin: 'spring-boot'
}
repositories {
mavenCentral()
}
jar {
baseName = 'mini_springboot'
version = '0.0.1'
}
sourceCompatibility = 1.8
targetCompatibility = 1.8
dependencies {
compile("org.springframework.boot:spring-boot-starter-data-jpa")
// compile("com.h2database:h2")
compile("org.jetbrains.kotlin:kotlin-stdlib:$kotlinVersion")
compile("org.jetbrains.kotlin:kotlin-reflect:$kotlinVersion")
compile("com.fasterxml.jackson.module:jackson-module-kotlin:2.8.4")
testCompile("org.springframework.boot:spring-boot-starter-test")
compile("org.springframework.boot:spring-boot-starter-web") {
exclude module: "spring-boot-starter-tomcat"
}
compile("org.springframework.boot:spring-boot-starter-jetty")
compile("org.springframework.boot:spring-boot-starter-actuator")
compile('mysql:mysql-connector-java:5.1.13')
testCompile("junit:junit")
//thymeleaf
compile("org.springframework.boot:spring-boot-starter-thymeleaf")
//WebJars
compile("org.webjars:bootstrap:3.3.4")
compile("org.webjars:jquery:2.1.4")
// https://mvnrepository.com/artifact/org.webjars/datatables
compile group: 'org.webjars', name: 'datatables', version: '1.10.13'
}
Step5. 新建标准springboot resources目录
Springboot web app有很多约定，根据这些约定，可以省去一大批繁冗的配置。请看标准的工程目录结构
.
├── META-INF
│ └── MANIFEST.MF
├── README.md
├── README_.md
├── build
│ └── kotlin-build
│ └── caches
│ └── version.txt
├── build.gradle
├── gradle
│ └── wrapper
│ ├── gradle-wrapper.jar
│ └── gradle-wrapper.properties
├── gradlew
├── gradlew.bat
├── run.bat
├── run.sh
├── settings.gradle
└── src
├── main
│ ├── java
│ ├── kotlin
│ │ └── jason
│ │ └── chen
│ │ └── mini_springboot
│ │ ├── console
│ │ │ └── HelloWorld.kt
│ │ └── restful
│ │ ├── Application.kt
│ │ ├── biz
│ │ │ └── CustomerService.kt
│ │ ├── controller
│ │ │ └── CustomerController.kt
│ │ ├── entity
│ │ │ └── Customer.kt
│ │ └── utils
│ │ └── DateUtils.kt
│ └── resources
│ ├── application.properties
│ ├── application.yml
│ ├── static
│ │ ├── css
│ │ │ ├── jquery.dataTables.min.css
│ │ │ └── mini_springboot.css
│ │ ├── images
│ │ │ ├── home.png
│ │ │ ├── sort_asc.png
│ │ │ ├── sort_both.png
│ │ │ └── sort_desc.png
│ │ └── js
│ │ ├── jquery.dataTables.min.js
│ │ └── mini_springboot.js
│ └── templates
│ ├── common
│ │ ├── footer.html
│ │ └── header.html
│ ├── customers.html
│ ├── index.html
│ ├── productform.html
│ ├── products.html
│ └── productshow.html
└── test
├── java
├── kotlin
└── resources
30 directories, 35 files
Step5. 写Controller
package jason.chen.mini_springboot.restful.controller
import jason.chen.mini_springboot.restful.biz.CustomerService
import org.springframework.stereotype.Controller
import org.springframework.ui.Model
import org.springframework.web.bind.annotation.GetMapping
import org.springframework.web.bind.annotation.PathVariable
import org.springframework.web.bind.annotation.ResponseBody
@Controller
class CustomerController(val customerService: CustomerService) {
@GetMapping(value = "/")
fun index(): String {
return "index"
}
@GetMapping("/customers.do")
fun listAll(model: Model): String {
val allCustomers = customerService.findAll()
model.addAttribute("customers", allCustomers)
return "customers"
}
@GetMapping("/listCustomers")
@ResponseBody
fun listCustomers(model: Model) = customerService.findAll()
@GetMapping("/{lastName}")
@ResponseBody
fun findByLastName(@PathVariable lastName: String)
= customerService.findByLastName(lastName)
}
Step6.运行测试
运行./gradlew bootRun, 启动完毕后，访问http://127.0.0.1:9891/customers.do
效果如下
螢幕快照 2017-03-11 22.23.13.png
本章节工程源码：
https://github.com/MiniSpringBootTutorial/mini_springboot/tree/use_thymeleaf_2017.3.11
Kotlin 是一个基于 JVM 的新的编程语言，由 JetBrains 开发。
Kotlin可以编译成Java字节码，也可以编译成JavaScript，方便在没有JVM的设备上运行。
JetBrains，作为目前广受欢迎的Java IDE IntelliJ 的提供商，在 Apache 许可下已经开源其Kotlin 编程语言。
Kotlin学习极佳教程：
http://try.kotlinlang.org/#/Examples/Hello,%20world!/Simplest%20version/Simplest%20version.kt
kotlin极简教程：
http://www.jianshu.com/c/498ebcfd27ad
