使用「Spring Tool Suite」工具，在「Spring boot + Thymeleaf」框架下创建web页面，并实现页面跳转（页面转移）

10 月 ago

逸, 科

3 minutes

使用「Spring Tool Suite」工具，在「Spring boot + Thymeleaf」框架下创建Web界面，并实现页面之间的跳转（页面跳转），以下是实现过程的步骤。

环境

Eclipse上で Spring Boot プロジェクトを作成済み

请参考之前的文章《如何安装“Pleiades All in One Eclipse”和“Spring Tool Suite (STS)”插件》，获得有关安装的指南。

请参考上一篇文章《使用Spring Tool Suite创建简单的Web界面》来在Eclipse中创建Spring Boot项目。

1. 已创建的页面（屏幕）

我创建了三个页面：首页、输入页面和输出页面。

（１）首页

（２）输入页面

（３）输出页面

2. 编写的步骤

2.1. 创建一个用于保存数据的类

「DemoForm.java」是一个保存「姓名」（name）和「电话号码」（tel）的类。

package com.example.demo;

public class DemoForm {

    private String name;

    private String tel;

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getTel() {
        return tel;
    }

    public void setTel(String tel) {
        this.tel = tel;
    }
}

2.2. 创建控制器

index方法是在接收到「http://localhost:8080/」请求时的处理。@RequestMapping(“/”)是针对”/”请求的描述。
将字符串”欢迎来到！Spring boot + Thymeleaf！”设置给参数message。
通过返回index来显示”index.html”页面。

当input方法收到”http://localhost:8080/input”时的处理方式。当点击”进入输入页面”链接或”返回输入页面”按钮时会被调用。@RequestMapping(“/input”)的描述对应着对/input请求的处理。将参数demoForm设置为”DemoForm”对象。通过返回input来显示”input.html”页面。

当output方法收到”http://localhost:8080/output”请求时进行处理。当点击”进入输出页面”按钮时调用。@RequestMapping(“/output”)用于将该方法与输出请求对应起来。
方法参数@ModelAttribute DemoForm demoForm用于接收参数demoForm并将其设置到参数demoForm中。
通过return output;来显示”output.html”界面。

package com.example.demo;

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

@Controller
public class DemoController {

    @RequestMapping("/")
    public String index(Model model) {
        model.addAttribute("message", "ようこそ！Spring boot + Thymeleafへ！");
        return "index";
    }

    @RequestMapping("/input")
    public String input(Model model) {
        model.addAttribute("demoForm", new DemoForm());
        return "input";
    }

    @RequestMapping("/output")
    public String output(@ModelAttribute DemoForm demoForm, Model model) {
        model.addAttribute("demoForm", demoForm);
        return "output";
    }

}

2.3. 创建首页

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>トップページ</title>
</head>
<body>
    <p th:text="${message}"></p>
    <p>
        <a th:href="@{/input}">入力画面へ</a>
    </p>
</body>
</html>

2.4. 创建输入页面

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>入力ページ</title>
</head>
<body>
    <form th:action="@{/output}" th:object="${demoForm}" method="post">
        <p>
            名前：<input type="text" th:field="*{name}" />
        </p>
        <p>
            電話番号：<input type="text" th:field="*{tel}" />
        </p>
        <p>
            <input type="submit" value="出力画面へ" />
        </p>
    </form>
</body>
</html>

2.5. 创建输出页面

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>出力ページ</title>
</head>
<body>
    <form th:action="@{/input}" th:object="${demoForm}" method="post">
        <div th:object="${demoForm}">
            <p>
                名前：<span th:text="*{name}"></span>
            </p>
            <p>
                電話番号：<span th:text="*{tel}"></span>
            </p>
            <p>
                <input type="submit" value="入力画面へ戻る" />
            </p>
        </div>
    </form>
</body>
</html>

请参考「使用「Spring Tool Suite」以「Spring Boot + Thymeleaf」创建简单的Web界面并执行Spring Boot应用程序」中的「3. Spring Boot应用程序的执行」来运行Spring Boot应用程序。

以上 —– 上述事项