《Springboot极简教程》使用Spring Boot， JPA， Mysql， ThymeLeaf，gradle， Kotlin快速构建一个CRUD Web App...

原创

禅与计算机程序设计艺术 2022-06-09 20:59:49 ©著作权

©著作权归作者所有：来自51CTO博客作者禅与计算机程序设计艺术的原创作品，请联系作者获取转载授权，否则将追究法律责任

使用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>

            <!--![](../../static/images/home.png)-->
        </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)
}