学习Spring Boot/Thymeleaf的基础【适用于初学者】

2 年 ago
清, 扬
4 minutes

首先

这篇文章是在公司内举行Spring Boot（实际上就是Spring？）学习会时所编写的资料。
这是一份简单的内容，大约需要一个小时左右。
如果能让大家对“Spring Boot是这样的”有一点理解就好了。
另外，由于我自己也是Spring和Spring Boot的初学者，所以可能会有错误的地方。
如果有的话，请指正，感激不尽。

环境

    • Mac

 

    • Spring 2.0.2

 

    • Dokcer for Mac

 

    • Gradle 5.2.1

 

    VSCode

※如果喜欢Eclipse，不使用Docker也可以。
※下面的文章对于Gradle很容易理解。
→ 多半很容易入门的Gradle指南
入门Gradle指南

关于春天

优点

    • 変更に強い

DI(Dependency Injection）という仕組みが導入されている。

それぞれが独立しているため依存度が低く、変更に強い。

拡張性が高い

基本的な機能の大部分が インターフェース として提供されている。
必要な部分は簡単に追加できる。

保守性が高い

AOP（アスペクト指向プログラミング） を用いることができる。

共通のプログラムを再利用することでコーディング量減・修正も簡単

テストが簡単

Spring MVC Test という専用のテストプログラムで結合テストが簡単にできる。

大規模データベース NoSQL に対応

弱点

    • フレームワークの規模が大きく、全体を把握するのが難しい。

 

    • DIコンテナの正しい使い方が難しい

 

    日本語のドキュメントが乏しい

那么Spring Boot是什么？

作为专注于WEB应用程序的框架，”Spring MVC”是一个集成了Spring MVC和其他Spring Framework库的Web应用程序环境构建库，可以轻松构建出符合期望的环境。

【参考：[Java] Spring Boot入门，打印“你好，世界！”】

这个特点可以简单概括如下：

1. 有很多功能只需描述注释就能实现，能减少代码量。
2. 将Web容器内置到jar中，使得可以直接运行jar文件作为Web应用程序。
3. 在以前的Spring框架中，必须使用XML配置文件，但现在不再需要。
4. 存在一个名为Spring Initializr的项目模板生成服务，不需要从头开始开发。

提供了各种用于快速系统开发的功能。

【使用[Java] Spring Boot轻松、快速地开发WebAPI】

准备开始

    • Docker for Macをインストールし、 docker コマンドが打てることを確認する。

 

    以下のコマンドを実行する。
$ git clone https://github.com/miwa0519/spring-boot.git
$ cd spring-boot/spring_boot_docker/
    • 以下のコマンドを実行。

Tomcatが8080ポートで動く。
3000番ポートは人気者だから別ポートがいい、という場合は docker-compose.yml 内の3000部分を別の番号に変えるといい。
Springが上手く動いていればコンソールに Spring>>> みたいな例のAAが出る。出ると少しテンションが上がる。

$ docker build -t spring-docker ./
$ docker run -p 3000:8080 spring-docker

http://localhost:3000
にアクセスする。(3000は任意のポートに変えていい)

很抱歉，根據這個示例，每次編輯源代碼都需要執行上述命令。我們計劃在未來改進這一點。對於這個麻煩造成的不便，我深感抱歉。

    • ※こちらは必要な人のみ

こちらの記事 でVSCode向けのプラグインを取り纏めてくださっています。 import とか手入力してられるかよ！という人にはオススメです。

暂时先尝试打印“Hello World”。

在 src/main/java/com/example/demo 的直接下一层创建 HelloController.java。
在 HelloController.java 中写入以下源代码。

package com.example.demo;

import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class HelloController {
  @RequestMapping("/hello")
  public String hello() {
    return "Hello World!";
  }
}

当访问 http://localhost:3000/hello 时，我认为会显示”Hello World!”。

スクリーンショット 2019-05-29 12.52.38.png

出现了两个标注。我会简单解释一下它们在做什么。

    1. @RestController: 给控制器添加@RestController注解后，该控制器将成为一个接受Web应用程序请求的Rest控制器。

@RequestMapping: 给控制器添加@RequestMapping注解后，将进行路由操作。在这种情况下，当访问http://localhost:3000/hello时，将执行Hello方法的关联操作。

为了使这些能够使用，我们分别导入了每个类。请注意，如果没有成功导入，则会导致编译错误。

因为我想让Hello World！更像一个Web应用程序，所以我想尝试创建一个模板。

实现View的部分

在Spring Boot中，从1.2版本开始已经被弃用了JSP。 所以此次我们将使用一个名为Thymeleaf的模板引擎。
据说在Spring Boot中使用Thymeleaf是比较安全的选择。

将Thymeleaf配置为可用

不設定就不能使用Thymeleaf。

请按以下方式修改build.gradle文件。

// 中略

dependencies {
+   compile('org.springframework.boot:spring-boot-starter-thymeleaf')
    implementation 'org.springframework.boot:spring-boot-starter-web'
    compileOnly 'org.projectlombok:lombok'
    annotationProcessor 'org.projectlombok:lombok'
    testImplementation 'org.springframework.boot:spring-boot-starter-test'
}

现在试着自己动手写一下HTML。

由于已经完成了Thymeleaf的设置，现在可以实际编写HTML并实现视图。
在src/resources下创建一个名为templates的文件夹，并创建一个名为hello.html的文件。

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
  <head>
    <title>Thymeleaf</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  </head>
  <body>
    <p th:text="'Hello Wonderful World!'" />
  </body>
</html>

※ `th:text` 是 Thymeleaf 的属性。关于 Thymeleaf 的用法，以下的文章非常易懂。
[Java] 在 Spring Boot 中使用 Thymeleaf！（进阶版）

修改HelloController。

由于已准备好模板，所以现在需要修改控制器，使其能够调用该模板。

package com.example.demo;

  import org.springframework.web.bind.annotation.RequestMapping;
- import org.springframework.web.bind.annotation.RestController;
+ import org.springframework.stereotype.Controller;
+ import org.springframework.web.bind.annotation.RequestMethod;

- @RestController
+ @Controller
  public class HelloController {
    @RequestMapping("/hello")
    public String hello() {
-     return "Hello World!"
+     return "hello";
    }
  }

将@RestController更改为@Controller。这样，原本作为WebAPI运行的HelloController将作为MVC的C进行操作。
这样，ViewResolver将识别并将return部分中的hello作为视图名称，转换为实际的文件名，并返回给客户端。

在重新执行原始指令后，重新加载http://localhost:3000/hello。我相信您可以确认模板已被调用，并且显示的文言已经改变。

スクリーンショット 2019-05-29 12.56.17.png

尝试制作一个简单的计算应用程序

我已经学习了MVC的V和C部分。
最后，我想加上关于Model的说明，并根据给定的数字创建一个简单的应用程序来执行加法操作。

试着做一个模型

首先，我们将创建一个用于接收表单值并进行计算的模型。
在创建Controller的目录中，创建一个名为model的文件夹，并在其中创建一个名为Form.java的文件。

package com.example.demo.model;

public class Form {

  private int num1 = 0;
  private int num2 = 0;
  private int total = 0;

  public int getNum1(){
    return num1;
  }

  public void setNum1(int num){
    this.num1 = num;
  }

  public int getNum2(){
    return num2;
  }

  public void setNum2(int num){
    this.num2 = num;
  }

  public int getTotal(){
    return total;
  }

  public void setTotal(int total){
    this.total = total;
  }
  public void sumTotal(){
    total = this.num1 + this.num2;
    setTotal(total);    
  }
}

创建一个名为num1和num2的字段来存储输入值，创建一个名为total的字段来存储总和值，并分别定义它们的getter和setter方法。
此外，还定义了一个名为sumTotal的方法来计算num1和num2的总和。

展示输入表单

我已经定义了模型，现在让我们来展示输入表单。

首先，我们要定义一个控制器来展示输入表单。

package com.example.demo;
import com.example.demo.model.Form;

import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;

@Controller
public class CalculateController {
  @RequestMapping("/calculate")
  public String form(Model model){
    model.addAttribute("form", new Form());
    return "index";
  }
}

这里与以前的 Controller 不同之处在于，方法接收了一个 Model 类型的对象作为参数。
通过设置这个 Model，可以将值传递到 HTML 中。（这是 Spring 提供的一个类）
在 model.addAttribute(“form”, new Form()) 的部分，我们向 model 传递了一个 Form 实例。

model.addAttribute("変数名", オブジェクト)

顺便说一句，即使在第二个参数中写上 “Form form” ，意思也是一样的。（在背后执行的是 addAttribute 的相同操作）

【参考：【Spring Boot】模型类和模型和视图类】

在 form 方法中，最后返回了名为 index 的模板。
现在我们将创建一个名为 index 的模板，然后创建一个输入界面。

创建输入界面

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
  <head>
    <title>Index</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  </head>
  <body>
    <h1>Form</h1>
    <form action="#" th:action="@{/result}" th:object="${form}" method="post">
      <p>first number: <input type="number" th:field="*{num1}" /></p>
      <p>Second number: <input type="number" th:field="*{num2}" /></p>
      <p><input type="submit" value="calculate" /></p>
    </form>
  </body>
</html>

最初创建的 hello.html 与之前不同的地方是引入了 th:action、th:object 和 th:field 这些属性。虽然通过外观可能可以理解，但我只是简单介绍一下用法。

th:action 　th:objectth:field=”*{フィールド名}”フォームのアクションを指定する${}で指定したオブジェクトにフォームで入力した値が入る。th:objectで指定しているオブジェクトのフィールドに対して入力された値を入れる。

【参考资料：【使用Spring Boot获取和操作表单值】(https://qiita.com/NariseT/items/172ca093364aa9391989)】

输入在每个文本区域中的值将被设置到刚刚在控制器中添加到模型对象的表单实例的各字段中。

当您访问 http://localhost:3000/calculate 时，应该会显示一个输入表单。

スクリーンショット 2019-05-29 13.54.42.png

修改控制器

这次我们将会接收通过表单输入的值，进行计算，并将结果显示在屏幕上。
首先，在控制器中添加一个新的方法。

package com.example.demo;
import com.example.demo.model.Form;

// 中略
  import org.springframework.ui.Model;
+ import org.springframework.web.bind.annotation.RequestMethod;
+ import org.springframework.web.bind.annotation.ModelAttribute;

  @Controller
  public class CalculateController {
    @RequestMapping("/calculate")
    public String form(Model model){
      model.addAttribute("form", new Form());
      return "index";
  }

+   @RequestMapping(value="/result", method = RequestMethod.POST)
+   public String result(@ModelAttribute Form form, Model model){
+     form.sumTotal();
+     model.addAttribute("form", form);
+     return "result";
+   }
  }

@RequsetMapping 是用来接收参数的，所以需要指定HTTP方法。
通过设置 method = RequestMethod.post ，可以指定这是一个POST请求！
此外，这次方法的参数上带有 @ModelAttribute 注解。使用这个注解可以接收输入的值。

因为每个字段都保存着在输入表单中输入的值，所以可以调用在 Form 类中定义的 sumTotal 方法，将总和值保存到 form 的 total 字段中。

我要在 result 模板中显示这个结果，所以现在要创建 result 模板。

把计算结果显示在屏幕上。

请在templates文件夹的根目录下创建以下文件。

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
  <head>
    <title>Result</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  </head>
  <body>
    <h1>Result</h1>
    <p th:text="'Answer: ' + ${form.getTotal()}" />
    <a href="/calculate">Calculate Another number</a>
  </body>
</html>

由于它支持表达式展开，我们可以使用getter来获取总值并进行显示。

计算的执行结果如下所示。

スクリーンショット 2019-05-29 13.28.57.png

最終

以下是我个人对于Spring Boot学习初级方面的三点感受。

    • 面倒な設定が少なく、すぐに開発に取りかかれた。（Dockerで動かすのが大変だったくらい）

 

    • ソースコードが割と直感的に書ける

 

    自分の求めているドキュメントに辿り着くまでの時間が壮大（自分の調べ方が下手なだけかも）

虽然我自己只了解到一些基础知识，但我希望今后能够慢慢学习。如果这篇文章对Spring Boot、Spring的初学者有所帮助，我会感到幸福。

请参考

Docker+Spring-boot事始め
環境構築でお世話になりました。プロジェクトを作るところからやってみたい方におすすめ
エンジニア志望者必見のSpring Frameworkとは

Spring Boot でフォームの値を取得して操作　フォームってどうやって書くんだ？という時に凄く助かりました。
多様化するJavaのフレームワーク問題を解決する、「Spring Boot」とは？

✖
广告
将在 10 秒后关闭
bannerAds