![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
Project: Gradle Project Language: Java Spring Boot: 2.5.1 (SNAPSHOTの書かれていない最新のやつ) Project Metadata: |--Group: jp.kobespiral |--Artifact: hello |--Name: hello |--Description: 猫アプリ as 初めてのSpring Boot アプリケーション． |--Package name: jp.kobespiral.hello (自動入力される) |--Packaging: war |--Java: 11 (※2021/06現在、VSCode上だと8,16は動かない！) Dependencies (Ctrlを押しながら操作すると複数同時に選べる) |--Spring Boot DevTools (開発ツール) |--Lombok (コンストラクタやsetter/getterを自動生成してくれる神ライブラリ) |--Spring Web (Webアプリを作るときは必須) |--Thymeleaf (HTML テンプレートエンジン)
package jp.kobespiral.hello;
import java.util.ArrayList;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestParam;
@Controller
public class HelloController {
// あいさつのリスト
private ArrayList<String> list = new ArrayList<>();
/**
* HTTP-GET で 猫ちゃんのあいさつページを表示する
*
* @param name パス・パラメータに含まれるユーザ名
* @param model 画面のモデル
* @return あいさつページ
*/
@GetMapping("/{name}/hello")
public String sayHello(@PathVariable String name, Model model) {
model.addAttribute("greeting", createGreetingMessage()); // あいさつ文セット
model.addAttribute("name", name); // ユーザ名セット
return "hello"; // テンプレ hello.htmlをレンダリング
}
/**
* HTTP-POST であいさつ文を追加する
*
* @param name パス・パラメータに含まれるユーザ名
* @param aisatsu フォームから入力されたあいさつ文
* @param model 画面のモデル
* @return あいさつ追加ページ
*/
@PostMapping("/{name}/hello/add")
public String addHello(@PathVariable String name, @RequestParam("aisatsu") String aisatsu, Model model) {
list.add(aisatsu);
model.addAttribute("greeting", aisatsu); // 追加されたあいさつをセット
model.addAttribute("name", name); // ユーザ名セット
return "post_hello"; // テンプレ post_hello.htmlをレンダリング
}
/**
* 登録済みのあいさつを連結して、文字列にして返す
*
* @return 登録されたあいさつ文字列
*/
private String createGreetingMessage() {
String greeting = "";
for (String s : this.list) {
greeting = greeting + s + "、";
}
return greeting;
}
}
.balloon1 {
position: relative;
display: inline-block;
margin: 1.5em 0;
padding: 7px 10px;
min-width: 120px;
max-width: 100%;
color: #555;
font-size: 16px;
background: #c3f69d;
border-radius: 15px;
}
.balloon1:before {
content: '';
position: absolute;
top: 100%;
left: 50%;
margin-left: -15px;
border: 15px solid transparent;
border-top: 15px solid #c3f69d;
}
.balloon1 p {
margin: 0;
padding: 0;
}<!DOCTYPE html>
<html lang="ja" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8" />
<title>Hello Spring Boot</title>
<link rel="stylesheet" th:href="@{/css/hello.css}" />
</head>
<body>
<h1>Hello Spring Boot!</h1>
<div class="balloon1">
<p th:text="${greeting}"></p>
<p>[[${name}]]さん、Spring Bootへようこそにゃ！</p>
</div>
<div>
<img th:src="@{/img/cat.jpg}" />
</div>
<div>
<form th:action="@{/{n}/hello/add(n=${name})}" method="post">
<label for="text">あいさつを追加</label>
<input type="text" name="aisatsu" id="aisatsu" />
<input type="submit" value="追加" />
</form>
</div>
</body>
</html><!DOCTYPE html>
<html lang="ja" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8" />
<title>Hello Spring Boot</title>
</head>
<body>
<h1>あいさつを追加しました！</h1>
<p>[[${name}]]さん、あいさつ文「[[${greeting}]]」を追加しました！</p>
<a th:href="@{/{n}/hello(n=${name})}">戻る</a>
</body>
</html>
# テスト用のサーバポートは ニャーニャー server.port = 28280
// war ファイルを構築するタスク
war {
enabled = true
archiveName='demo.war' // <- プロジェクトに合わせて書き換える
}
