【Eclipse】创建SpringBoot视图

2 年 ago
清, 扬
3 minutes

首先

我学习了MVC模型中创建视图的步骤，现在来输出一下。
根据控制器发送的指令，可以使用动态构建HTML的模板来向浏览器提供。

使用模板引擎

将变量和循环等程序编写到 HTML 模板中，并称之为模板引擎，用于将内容输出到屏幕上的库。

通过使用模板引擎，SpringBoot可以将服务器端准备好的变量和处理附加到HTML中，因此可以构建根据使用者的不同而可变的动态网站，例如亚马逊和乐天等购物网站或商品管理系统。

模板引擎有多种选择。

在使用语言不同的情况下，可以使用各种不同的模板引擎，但是在Spring Boot中最常用的模板引擎是Thymeleaf（中文名为”タイムリーフ”），因此本文介绍了使用Thymeleaf进行操作的方法。

使用模板的初始设置

Eclipse（エクリプス）并没有预先集成Thymeleaf（タイムリーフ），因此需要添加新的组件。

Eclipse提供了依赖管理的功能，即可以通过手动编写代码来关联附加功能，从而添加并使用库和模块。以下是将Thymeleaf用于Eclipse项目的步骤。

①增加依存关系（添加代码）

为了使用模板引擎，需要编辑已创建的项目文件中的代码。

建立.gradle文件

在使用Spring Starter项目创建的项目目录的根目录下。

如果新创建的项目名称是spring_boot_introduction的话

/Applications/Eclipse_2023-06.app/Contents/workspace/spring_boot_introduction
スクリーンショット 2023-06-23 13.52.00.png

编辑build.gradle文件

打开名为build.gradle的文件，由于存在一个名为dependencies的部分（块），所以我们将添加以下代码。

implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'

/* 追記して上書き保存します */

plugins {
	id 'java'
	id 'org.springframework.boot' version '2.7.12'
	id 'io.spring.dependency-management' version '1.0.15.RELEASE'
}

group = 'com.example'
version = '0.0.1-SNAPSHOT'

java {
	sourceCompatibility = '1.8'
}

configurations {
	compileOnly {
		extendsFrom annotationProcessor
	}
}

repositories {
	mavenCentral()
}

dependencies {
	implementation 'org.springframework.boot:spring-boot-starter-web'
	compileOnly 'org.projectlombok:lombok'
	developmentOnly 'org.springframework.boot:spring-boot-devtools'
	annotationProcessor 'org.projectlombok:lombok'
	testImplementation 'org.springframework.boot:spring-boot-starter-test'
	//　次のように貼り付けする
	implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
	
}

tasks.named('test') {
	useJUnitPlatform()
}

如果找不到build.gradle文件，请从创建的项目目录中搜索文件名为build.gradle。

将编辑后的依赖关系反映出来

执行Gradle项目的刷新

选择项目，右键单击 ->【Gradle】->【刷新Gradle项目】。

スクリーンショット 2023-06-24 8.46.43.png

Gradle（格雷德尔）是一种将源代码（由人类编写的代码）转化为可执行软件的工具之一（例如，对于Java来说，是.jar文件或.war文件）。

尚未更新项目的配置文件，将刷新以反映通过build.gradle中定义的Thymeleaf（模板引擎）的依赖关系。

如果无论如何都无法添加Thymeleaf的话，

在创建新项目时，可以在Spring Starter项目向导的中途选择引入Thymeleaf，在选择该选项后，就可以从一开始就使用Thymeleaf。

スクリーンショット 2023-06-22 15.19.47.png

制作一个模板

我們將創建一個新的模板來生成動態的HTML。

根据以下条件创建模板。

    • 作成場所：src\main\resources\templates

ファイル拡張子:html

ファイル名：メソッド名とファイル名を同じにする（必須ではなく推奨）

スクリーンショット 2023-06-23 14.57.42.png

编辑模板文件

首先，如果要使用Thymeleaf（Thymeleaf），必须在HTML标签内定义Thymeleaf的命名空间。如下所示。

如果不定义命名空间，当尝试使用Thymeleaf的特定属性或语法（以”th:”开头的属性）时会出现错误。

<!DOCTYPE html>
<!-- htmlタグに名前空間を定義する -->
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
    <h1>Hello world!!</h1>
</body>
</html>

设置从搜索的URL中显示的模板

为了将从浏览器搜索的URL与已创建的html页面相关联，需要编辑Controller的代码并指定要显示的模板。

 

スクリーンショット 2023-06-23 15.31.41.png
package com.example.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
@RequestMapping("/lesson")
public class LessonController {
    @GetMapping("/sample")
    // HTMLをレスポンスにする場合は、@ResponseBodyを削除する
    // @ResponseBody
    public String sample() {
        return "index";
    }
}

运行应用程序

要运行项目内的程序，需要执行应用程序。

通过运行应用程序，Web服务器将启动并运行对请求进行响应的程序。

请右键选择要创建的项目，并选择运行→Spring Boot应用程序。

スクリーンショット 2023-06-23 9.54.30.png

只要在控制台上出现以下显示，就表示启动已完成。

スクリーンショット 2023-06-23 9.56.44.png

显示了端口号为8080的数字。

Hello World

如果出现错误，HTML不能显示的情况下 (如果HTML无法显示的情况下)

请先停止服务器，然后重新启动并刷新浏览器。

停止服务器的按钮

スクリーンショット 2023-06-23 16.49.43.png

使用HTML来使用变量。

为了在模板中处理在控制器内设置的变量和从URL接收到的参数，需要将这些值保存在Model属性中（与操作数据库的模型不同）。

// Model属性を利用するためのimportを追加します
import org.springframework.ui.Model;

/* 省略 */

// Model型の仮引数を持ちます
public String メソッド名(Model model) {
    // 指定した「属性名」をHTML内で変数のように扱います
    model.addAttribute("属性名", 値);
    /* 後続処理 */
}

在Model类型的形式参数中，我们将其命名为model，但形式参数可以设置任何名称。然而，通常通过使用model来提高可读性。

@Controller
@RequestMapping("/lesson")
public class LessonController {

    @GetMapping("/sample")
    // Model型の値を必ず仮引数に持つ
    public String sample(Model model) {
        // 変数を定義する
        String text = "今日はいいお天気ですね";
        // messageという属性名に、今日はいいお天気ですね という値を追加します
        model.addAttribute("message", text);
        return "index";
    }
}

在Eclipse中编写代码时，在控制器的顶部声明的import语句将会自动补完。因此，在进行覆盖保存时，也会自动补完，建议使用 Cmd 键 + s 键进行补完。

在HTML模板中使用变量

Thymeleaf（タイムリーフ）提供了以th:开头的属性，可以实现类似PHP的编程功能。

通常情况下，要使用由控制器的model.addAttribute()设置的Model属性，需要在常规HTML标签的属性上添加th:text属性。

<p th:text="${変数名}"></p>

<!DOCTYPE html>
<!--HTMLファイルの中でThymeleafの特定の構文や属性を使用できるようになります。-->
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Hello Spring Boot</title>
</head>
<body>
    <!-- Model属性に追加したmessageを出力します -->
    <h1 th:text="${message}">ご機嫌いかがですか？</h1>
</body>
</html>

 

いいお天気ですね
// th属性の値に上書きされる

模板文件的位置

我们即将创建的HTML模板将需要与页面数量相等的文件。所有这些模板都将保存在templates目录中。

如果项目规模大到超过100个文件，文件管理会变得困难，因此您可以在templates目录下创建更多子目录来解决这个问题。

product-management-system/
├─ src/
│  ├─ main/
│  │  ├─ java/
│  │  │  ├─ com/
│  │  │  │  ├─ yourcompany/
│  │  │  │  │  ├─ productmanagementsystem/
│  │  │  │  │  │  ├─ controller/
│  │  │  │  │  │  │  ├─ ProductController.java
│  │  │  │  │  │  │  ├─ CategoryController.java
│  │  │  │  │  │  ├─ service/
│  │  │  │  │  │  │  ├─ ProductService.java
│  │  │  │  │  │  │  ├─ CategoryService.java
│  │  │  │  │  │  ├─ repository/
│  │  │  │  │  │  │  ├─ ProductRepository.java
│  │  │  │  │  │  │  ├─ CategoryRepository.java
│  │  │  │  │  │  ├─ model/
│  │  │  │  │  │  │  ├─ Product.java
│  │  │  │  │  │  │  ├─ Category.java
│  │  │  │  │  │  ├─ ProductManagementSystemApplication.java
│  │  ├─ resources/
│  │  │  ├─ templates/
│  │  │  │  ├─ product/
│  │  │  │  │  ├─ list.html
│  │  │  │  │  ├─ detail.html
│  │  │  │  ├─ category/
│  │  │  │  │  ├─ list.html
│  │  │  │  │  ├─ detail.html
│  │  │  ├─ application.properties
│  ├─ test/
│  │  ├─ java/
│  │  │  ├─ com/
│  │  │  │  ├─ yourcompany/
│  │  │  │  │  ├─ productmanagementsystem/
│  │  │  │  │  │  ├─ controller/
│  │  │  │  │  │  │  ├─ ProductControllerTest.java
│  │  │  │  │  │  │  ├─ CategoryControllerTest.java
│  │  │  │  │  │  ├─ service/
│  │  │  │  │  │  │  ├─ ProductServiceTest.java
│  │  │  │  │  │  │  ├─ CategoryServiceTest.java
├─ .gitignore
├─ pom.xml
├─ README.md

如果要指定路径跨目录，请使用路径。

    return "ディレクトリ名/ファイル名";

    @Controller
@RequestMapping("/item")
public class ItemController {
    @GetMapping("/product")
    public String list(Model model) {
        return "product/list"; // templates¥product¥list.html を指している
    }

    @GetMapping("/category")
    public String create(Model model) {
        return "category/list"; // templates¥category¥list.html を指している
    }
    
}

如果有多个层次存在的情况下

如果存在多个层次结构，则使用“/”连接以进行描述。


return "list/detail/create/update/delete/file";

product/
├─ list/
│  ├─ detail/
│  │  ├─ create/
│  │  │  ├─ update/
│  │  │  │  ├─ delete/
bannerAds