7's workspace

業務外にSpringBootを使ってWebアプリを完成させるまでの記録

【第３回】画面遷移①

SpringBoot

アプリのベースを作る

今回は画面遷移です。

ただただ、アプリに必要な画面を遷移できるようにしました。

ブログ風ナレッジ置き場「Poi」の完成まで

  1. 画面遷移するだけのベースを作る

  2. 新規登録機能を作る

  3. ログイン機能を作る

  4. メモの登録、編集、削除機能を作る

  5. フロント側を作る

「1. 画面遷移するだけのベースを作る」のところです。

作業としては単純で、

同じようなhtmlファイルとControllerを作るだけなのですが、

この作業が意外と重要です。

はじめに画面遷移を完成させておくメリット

なぜ最初に画面遷移を完成させるかというと、

開発中の無駄な戻りを防ぐためです。

チーム開発で、メンバーがそれぞれ別の機能を担当するとします。

いざ、それぞれが作った画面をつなげる時になって

「あれ・・・パスが違うみたいでつながりません・・・」

なんてことになると、作業が止まってしまいます。

はじめに画面遷移のベースができていれば、

そのベースを元にメンバーが作業することでスムーズな開発ができます。

ベースはチームのリーダーが作っておくと

その後の作業も管理しやすいと思われます。

ディレクトリ構造を意識してパッケージング

第２回で、gradleを使ってプロジェクトを作成した時は

HelloControllerとhello.htmlがあるだけでした。

今回はたくさんControllerとhtmlファイルを作りましたが、

「poi」は会員制のブログのようなものなので、

一般と会員でパッケージが分かれるようにしています。

poi
├─ src/main/java
│   └─ poi
│        ├─ controller
│        │   ├─ general
│        │   │   └─ GeneralIndexController.java
│        │   │   └─ RegisterController.java
│        │   ├─ member
│        │   │   └─ MemberIndexController.java
│        │   │   └─ LoginController.java
│        │   │   └─ KnowledgeController.java
│        │   ├─ ErrorController.java
└─ src/main/resources
     ├─ templates
     │   ├─ general
     │   │   └─ index.html
     │   │   └─ register.html
     │   │   └─ confirm.html
     │   ├─ member                        
     │   │   └─ index.html
     │   │   └─ login.html
     │   │   └─ create.html
     │   │   └─ update.html
     │   │   └─ delete.html
     │   │   └─ complete.html
     │   └─ error 
     │        ├─ 404.html
     │        └─ session-timeout.html
     ├─ static
     │   ├─ css
     │   └─ js
     └─ application.properties

作成したもの

一部だけ載せるとこんな感じです。

＜confirm.html＞ 新規登録画面で情報入力後に表示される確認画面。
「OK!」ボタンをクリックすると、
form actionのパス「/general/create」から
“RegisterController.java"のパス「/general/create」へ飛ぶ。

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
<meta charset="UTF-8" />
<title>poi</title>
</head>

<body>
    <h1>Confirm</h1>
    <form action="/general/create" method="post">
        <input type="text" /> <input type="submit" value="OK!" />
    </form>
</body>

</html>

＜RegisterController.java＞ “confirm.html"からここへくる。
「return "member/index”;」で会員画面のindex.htmlへ
遷移する。

package poi.controller.general;

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

@Controller
public class RegisterController {
    @RequestMapping(value = "/general/register", method=RequestMethod.POST)
    public String register() {
        return "general/register";
    }
    @RequestMapping(value = "/general/confirm", method=RequestMethod.POST)
    public String confirm() {
        return "general/confirm";
    }
    @RequestMapping(value = "/general/create", method=RequestMethod.POST)
    public String create() {
        return "member/index";
    }
}

今回はここまで。
次回、画面遷移②です。

今、パスをベタ書きしているので、定数クラスを作成して
パスを定数化しようと思います。