【Javaお勉強日記】Springを使ってサンプルアプリを作る防備録

2021年1月29日 17:00

いつも以上に個人用メモの色が強いです

Springframework＋Thymeleafの機能を使って、画面表示／GET／POST機能を備えたサンプルアプリを作ります

VScodeでSpring開発環境を作る

◎Javaは入っているものとする

◎以下のエクステンションを入れる
　└ Language Support for Java(TM) by Red Hat
　└ Spring Boot Extension Pack
　└ Lombok Annotations Support for VS Code

おわり。簡単！

新規Gradleプロジェクトを作る

VScode上でCtrl+Shift+Pを押して、Spring Inisializr:Create a Gradle Projectを選択

画面の指示に従って設定を選んでいく。依存関係のところ、とりあえずSpringBootDevToolsと、SpringWebとthymeleaf、あとLombokは入れておく。最後にプロジェクトを作るフォルダを指定

※このとき、他のファイルが入っているフォルダを選ぶと、パッケージ構成がへんちくりんになってしまうので、必ずまっさらなフォルダに作る。

できあがったファイルの、src>main>java>com.example.hoge内にあるHogeAppliction.javaを実行してみる

コンソールにSpringのロゴが表示されて、最後に「Started HogeApplication・・・」と表示されればOK

※このとき、「メイン・クラスcom.example.demo.DemoApplicationを検出およびロードできませんでした」が表示される場合の対処→研究中
※PC変えたらエラーでなくなったのでローカル環境の問題

ブラウザにHelloWorldする

HogeApplication.javaがあるフォルダ内に、HelloController.javaを作る（フォルダ分けしたい場合、サブフォルダを作る。別フォルダに作っちゃうとちゃんと動かない。）

// HelloController.java

@RestController
public class TestApiController {
   @GetMapping("/hello")
   public String apiTest(){
       return "Hello World";
   }
}

これでHogeApplication.javaを起動して、localhost:8080/helloにアクセスしてみると、「HelloWorld」が表示される。

ただしこれはプレーンテキスト。ただHTTPレスポンスとしてStringを返しているだけ。

ちゃんとHTMLで表示されるようにする

コントローラーを下のように書き換える

@Controller
public class HelloController {
   @GetMapping("/hello")
   public String index(){
       return "hello";
   }
}

hello.htmlを用意する

<!DOCTYPE html>
<html lang="ja" xmlns:th="http://www.thymeleaf.org">
<head>
   <title>hello-world</title>
</head>
<body>
   <h2>Hello world</h2>
</body>
</html>

これでlocalhost:8080/helloにアクセスすればHTMLでHelloWorldが表示される。

※404とか500とか、Whitelabel Error Pageのエラーが出てしまう場合、以下の事を確認する
・Controller.javaファイルが、HogeApplication.javaの入っているフォルダか、そのサブフォルダ内に入っているか。VScodeのフォルダ一覧だと、空フォルダが自動的に集約表示されちゃって見づらいので気をつける。
・Thymeleafがちゃんと入っているか確認する。build.gradleファイル内のdependenciesにimplementationされているか確認。

GETパラメータを受け取って表示してみる

// HelloController.java
@Controller
public class HelloController {
   @GetMapping("/hello")
   public String index(){
       System.out.println("hello!!");
       return "hello";
   }
   @GetMapping("/hello-get-test")
   public String getMesTest(@RequestParam(name = "message", required = false) String message, Model model){
       model.addAttribute("sample", message);
       return "hello-test";
   }
}

hello-test.htmlを用意する

<!-- hello-test.html -->
<!DOCTYPE html>
<html lang="ja" xmlns:th="http://www.thymeleaf.org">
<head>
   <title>hello-world</title>
</head>
<body>
   <h2>Hello world</h2>
   <p th:text = "${sample}">サンプルテキスト</p>
</body>
</html>

th:text="${sample}" の部分がthymeleafのタグ。model.addAttribute("sample", message);でsampleフィールドに値を渡しておくと、${sample}のタグで値を取り出せる。アクセスするときは「localhost:8080/hello-get-test?message=hoge」とパラメータを渡す。

パラメータがないとふつうはエラーになるけど、@RequestParam(name = "message", required = false)でrequiredをfalseにしておけばエラーにならない。
requiredを設定しない＆フィールド名と変数名が同じならname=は省略できる。

画面からデータをPOSTして受け取って表示する

//HomeController.java
@Controller
public class HomeController {
   
    @GetMapping("/home")
    // インプット画面を表示する
    public String handleHome(){
           return "input_form";
    }
    
    @PostMapping("/confirm")
    // インプット画面から受け取った情報を表示する
       public String handleConfirm(@RequestParam String message, Model model){
           System.out.println(message);
           model.addAttribute("message", message);
           System.out.println("addAttribute done");
           return "confirm";
       }
}

インプットフォームを作る

<!-- input_form.html -->
<!DOCTYPE html>
<html lang="ja" xmlns="http://www.thymelead.org">
<head>
   <meta charset="UTF-8">
   <title>input_form</title>
</head>
<body>
   <form th:action = "@{/confirm}" method = "POST">
       <label>
           メッセージを入力してください
           <input type ="text" name="message">
       </label>
       <button>送信</button>
   </form>
</body>
</html>

表示画面を作る

<!-- confirm.html -->
<!DOCTYPE html>
<html lang='ja' xmlns='http://www.thymeleaf.org'>
<head>
<meta charset='UTF-8'>
<title>confirm</title>
</head>
<body>
   message::
   <span th:text="${message}">サンプルテキスト</span>
</body>
</html>

・フォームに th:action = "@{/confirm}" を追加すると、投稿後「/confirm」へ遷移する

・/confirmに遷移しようとするとHomeControllerのhandleConfirm()が呼ばれる

・引数のString messageに@RequestParamを付けると、フォームのnameタグで指定したフィールド名が対応するフィールドの値を引っ張ってくる

・Model型の引数modelの中に、画面から貰ったり画面に返したりする為の値が入ってる/入れられる

・addAttributeするとmodelの中に新しいキーと値を設定できる

・表示するテンプレート名をreturnする

・confirm.htmlが呼ばれて、th:text="${message}"部分が自動的にmodelの中のmessageを取得して表示してくれる

これでPOSTした値を取得してこねくり回せるようになった。

この記事が気に入ったらサポートをしてみませんか？