Spring Boot和Spring MVC的示例应用实现

1 年 ago
韵, 科
3 minutes

关于Spring MVC

image.png
image.png

前端控制器是由Spring MVC管理的控制器。在开发中，不需要意识到它的处理内容。需要意识到的是基本的模型-视图-控制器部分。

    • Model・・・モデルは、アプリケーションの動的なデータ構造です。Springでは、ごく普通のJavaオブジェクト（POJO:Plain Old Java Object）やEntityなどが、これに該当します。

 

    • View(template)・・・ビューは、図や表などの画面情報を表現します。SpringではThymeleaf(タイムリーフ)を使ったHTMLテンプレートファイルが、これに該当します。

 

    Controller・・・コントローラは、入力を受け入れて処理を行います。Springでは@Controllerアノテーションを付けたクラスが、これに該当します。

使用Spring MVC时，无需关注Servlet问题，但Spring MVC在内部使用Servlet来处理请求。

开发环境

在创建示例应用程序之前，我们假定您已经成功安装了Spring Tool Suite（STS）并配置好以下环境。

種別プロダクトJVMJava 11OSWindows 10 64bit

创建示例应用程序

使用Spring Boot创建一个简单的应用程序。创建的应用程序是一个所谓的回声应用程序，当在文本框中输入姓名、邮件地址和年龄后，点击[发送]按钮，将跳转到显示输入信息的页面，就像下面的屏幕一样。

image.png
structure.png

1. 创建新项目

image.png

在“新建Spring Starter项目”对话框中，输入以下内容并点击“下一步”按钮。

dialog.png
dialog.png
【依存関係で指定したモジュールについて】
　Spring Boot DevTools・・・Spring Bootの開発ツールです。Javaコード、HTMLファイル、プロパティファイルなどの修正を検知して実行中のアプリに即時反映（ホットデプロイ）してくれるなど、開発に便利なツールが含まれています。
　Thymeleaf（タイムリーフ）・・・Spring Bootで標準的に使われるHTMLのテンプレートエンジンです。※Spring BootではJSPの使用は非推奨となっています。
　Spring Web・・・Spring MVCを使ったWebアプリケーションが作成可能となります。
　Lombok（ロンボック）・・・定型コード記述の省力化に役立つJavaアノテーションライブラリです。

【作成したプロジェクト内のファイルについて（下記イメージ参照）】
　SpringMvc1Application.java・・・mainメソッドが宣言されているクラスです。SpringBootの起動はこのクラスから行います。@SpringBootApplicationアノテーションが定義されています。
　application.properties・・・Spring Bootのプロパティファイルです。
　pom.xml・・・Mavenの設定ファイルです。Mavenは、Javaプログラムをビルドするためのツールです。様々な機能がありますが、特に便利な機能は、アプリケーションが利用するライブラリの自動取得です。
structure.png

2. Lombok的配置设置

当创建Spring Starter项目时，只指定了Lombok作为依赖关系，但是在实际运行应用程序时，Lombok无法正常工作。因此，请按照以下方式修改项目文件夹下的”pom.xml”文件。

		<dependency>
			<groupId>org.projectlombok</groupId>
			<artifactId>lombok</artifactId>
			<optional>true</optional>
		</dependency>

		<dependency>
			<groupId>org.projectlombok</groupId>
			<artifactId>lombok</artifactId>
			<version>1.18.12</version>
			<scope>provided</scope>
		</dependency>

3. 建立模型

image.png
dialog.png

我們將編輯User.java如下。

package com.example.demo.model;

import lombok.Data;

@Data
public class User {
    private String name;
    private String email;
    private Integer age;
}

　@Data・・・Lombokの@Dataアノテーションです。GetterやSetter、toStringなどのコードを自動生成してくれます。自動生成されている事は、[アウトライン]ビューで確認できます（下記イメージ参照）。
image.png

新建控制器。

在 [com.example.demo] 上点击右键 -> 选择 [新建] -> [类]。
在 [新建 Java 类] 对话框中，输入以下内容并点击 [完成] 按钮。

    • パッケージ：com.example.demo.controller（controllerを追加）

 

    名前：HomeController

以下是对HomeController.java的编辑：

package com.example.demo.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.PostMapping;
import com.example.demo.model.User;

@Controller
public class HomeController {

    @GetMapping("/form")
    private String readForm(@ModelAttribute User user) {
        return "form";
    }
    
    @PostMapping("/form")
    private String confirm(@ModelAttribute User user) {
        return "confirm";
    }
}

　@Controller・・・このクラスをコントローラとして機能させる場合に指定します。
　@GetMapping・・・アノテーション付与によりHTTPのGETリクエストを受け付けます。ここでは"http://localhost:8080/form"のGETリクエストを受け付けます。
　@PostMapping・・・アノテーション付与によりHTTPのPOSTリクエストを受け付けます。ここでは"http://localhost:8080/form"のPOSTリクエストを受け付けます。
　@ModelAttribute・・・モデル属性にバインドします。バインドとは、日本語で「結び付ける」「関連付ける」などの意味です。ここでは、入力画面の「氏名」が<input type="text" name="name">の場合、リクエストを受け付けたタイミングでSpringが自動でUserクラスのnameプロパティに画面入力値を設定してくれます。これは、データバインディングと呼ばれ、パラメータ取得コードの記述が不要となります。

5. 创建Thymeleaf模板

image.png
image.png

我将按照以下方式编辑form.html文件。

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
  <form th:action="@{/form}" th:object="${user}" method="post">
    <label for="name">氏名：</label>
    <input type="text" th:field="*{name}"><br>
    
    <label for="email">E-Mail：</label>
    <input type="email" th:field="*{email}"><br>
    
    <label for="age">年齢：</label>
    <input type="number" th:field="*{age}"><br>
    
    <button>送信</button>
  </form>
</body>
</html>

　<html xmlns:th="http://www.thymeleaf.org">・・・この宣言により、Thymeleafのタグが利用可能となる。
　th:action・・・フォームのPOST先を、@{パス名} で指定します。@{...}はリンクURL式、${...}は変数式といいます。
　th:object・・・フォームにバインドするオブジェクトを設定します。今回はコントローラ側で用意した"user"オブジェクトを設定しています。*{フィールド名}は選択変数式で、th:objectが付いたタグ内では、オブジェクト名の記述を省略できます。th:objectを使用しない場合、<input type="number" th:field="${user.age}">のように&{オブジェクト名.フィールド名}を指定する必要があります。
　th:field・・・フィールドを設定します。これは、<input>タグのid・name・value属性をHTMLに出力する機能です。<input type="text" th:field="*{name}">の記述は、<input type="text" id="name" name="name" value="">と出力されます。

下一步创建确认页面的Thymeleaf模板。
在[templates]上右键点击 -> 选择[新建] -> [其他]。
在[新建]对话框中，选择[Web] -> [HTML文件]，然后点击[下一步]按钮。
在[新建 HTML 文件]对话框中，输入以下内容，然后点击[完成]按钮。

    ファイル名：confirm.html

确认.html将被编辑如下。

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
  <span th:inline="text">
    氏名： [[${user.name}]]<br>
  E-Mail： [[${user.email}]]<br>
   年齢： [[${user.age}]]<br>
  </span>
</body>
</html>

　th:inline="text"・・・タグ内のテキストを展開します。[[ ]]で囲むと、その値を表示できます。

6. 启动Spring Boot应用程序

image.png

「Spring Boot 2.3 入門: 从基础到实演」(电子书) 完全木／竹田 甘地／Robert Segawa编写

✖
广告
将在 10 秒后关闭
bannerAds