使用SpringBoot和Thymeleaf在页面上进行绘制

2 年 ago
韵, 科
3 minutes

指标

由于上一次我成功地使用SpringBoot的@RestController在浏览器上显示了字符串，所以这次我计划学习如何使用@Controller来显示HTML文件。

提前准备

我们将假设已经有一个SpringBoot项目，并继续进行下去。
创建项目的方法，请参考Spring Quickstart Guide或这篇文章。

让我们制作一个控制器吧！

我认为在《Spring快速入门指南》完成之后的源代码如下。

package com.example.demo;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;

@SpringBootApplication
@RestController
public class DemoApplication {

    public static void main(String[] args) {
        SpringApplication.run(DemoApplication.class, args);
    }

    @GetMapping("/hello")
    public String hello(@RequestParam(value = "name", defaultValue = "World") String name) {
        return String.format("Hello %s!", name);
    }
}

随着本次实施，我们将删除DemoApplication.java文件中不再需要的部分。

package com.example.demo;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class DemoApplication {

    public static void main(String[] args) {
        SpringApplication.run(DemoApplication.class, args);
    }

}

在DemoApplication.java所在的目录下创建一个名为controller的文件夹。
然后在该文件夹中创建HelloController.java，并编写相应的代码。

package com.example.demo.controller;

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

@Controller
public class HelloController {

    @GetMapping("/hello")
    public String hello(Model model) {
        String message = "Hello World from HelloController!!!";
        model.addAttribute("msg", message);
        return "hello";
    }
}

HelloController类的注解是 @Controller。使用@Controller，它会返回由HTML编写的模板文件。

由于”〇〇”的部分将成为HTML文件的名称，因此需要稍后创建名为”hello.html”的文件。

Model设置了用于在模板中使用的数据。
model.addAttribute(“变量名”, 值)的写法，将包含字符串的message变量传递到模板中。

这样一来，控制器就完成了！

2. 让我们开始使用Thymeleaf！

我們將建立 MVC 的 View 部分，並且在這個專案中使用 Thymeleaf。

Thymeleaf 是一种可以在 Spring Boot 中使用的模板引擎。它可以在控制器中存储变量的值，并在 HTML 文件中进行显示。还有一些用日语编写的 Thymeleaf 教程！

为了能够使用Thymeleaf，我们需要编辑pom.xml文件。

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
  <modelVersion>4.0.0</modelVersion>
  <parent>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-parent</artifactId>
    <version>2.3.1.RELEASE</version>
    <relativePath/> <!-- lookup parent from repository -->
  </parent>
  <groupId>com.example</groupId>
  <artifactId>demo</artifactId>
  <version>0.0.1-SNAPSHOT</version>
  <name>demo</name>
  <description>Demo project for Spring Boot</description>

  <properties>
    <java.version>11</java.version>
  </properties>

  <dependencies>
    <dependency>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-starter-web</artifactId>
    </dependency>

    <dependency>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-starter-test</artifactId>
      <scope>test</scope>
      <exclusions>
        <exclusion>
           <groupId>org.junit.vintage</groupId>
           <artifactId>junit-vintage-engine</artifactId>
        </exclusion>
      </exclusions>
    </dependency>

    <!-- ↓↓↓↓↓Thymeleafを使用する為に追加↓↓↓↓↓ -->
    <dependency>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-starter-thymeleaf</artifactId>
    </dependency>


  </dependencies>

  <build>
    <plugins>
      <plugin>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-maven-plugin</artifactId>
      </plugin>
    </plugins>
  </build>

</project>

3.我们来创建一个用于绘制画面的HTML文件吧！

我们在src/main/resources/templates中创建一个hello.html文件。

hello.html中的内容如下：
不要忘记在html标签中定义thymeleaf的命名空间！

<!DOCTYPE html>
<html lang="ja" xmlns:th="http://www.thymeleaf.org">

<head>
  <meta charset="UTF-8">
  <title>Spring Boot Lesson</title>
</head>

<body>
  <h1>ThymeleafでHello World! </h1>

  <h1 th:text="${msg}"></h1>
</body>

</html>

在第二个h1标签中，通过th:text=”${msg}”来显示从Controller传递过来的值。

4. 让我们试试吧！

在1~3步骤中，我们准备使用@Controller和Thymeleaf来在HTML文件中绘制，并描绘了在Controller中定义的值以在HTML文件中进行绘制。现在我们执行并进行确认。

在终端中输入以下命令，然后按Enter键。

$ ./mvnw spring-boot:run

等待大约2秒后，访问http://localhost:8080/hello。

スクリーンショット 2020-07-01 10.45.40.png

你好.html被渲染并且Controller中定义的msg也被正确显示。

到最后

我学习了使用@Controller来显示HTML文件的方法。
由于Thymeleaf还有很多其他的写法，所以我想在另一个机会中写一篇文章介绍它们。

请参考下列网站。

在Spring Boot中使用”Thymeleaf”模板

教程：使用Thymeleaf（日文）
https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf_ja.html#thymeleaf%E7%9A%84%E4%BB%8B%E7%BB%8D

bannerAds