トピックトップページ

コントローラーとビューで、トピック管理ページの画面遷移を作成します。

• 追加、更新処理はデータモデルの作成が必要のため、実装しません。

ファイル構成

controllers/
   ├── admin/
   │   ├── ArticleController.java
   │   └── HomeController.java

ルーティング

CRUDに対応したページ、データ処理のルーティングをまとめます。

項目	URLパス	コントローラー	アクションメソッド	HTTPメソッド	パラメーター
トップ	/admin/article/	admin.ArticleController	index()	GET
入力ページ	/admin/article/create	admin.ArticleController	create()	GET
追加処理	/admin/article/add	admin.ArticleController	add()	POST
編集ページ	/admin/article/edit/{id}	admin.ArticleController	create()	GET	Article.id
更新処理	/admin/article/update/{id}	admin.ArticleController	update()	POST	Article.id
削除処理	/admin/article/destroy/{id}	admin.ArticleController	destroy()	POST	Article.id

コントローラー作成

「controllers/admin/」に「ArticleController」クラスを作成します。

controllers/admin/ArticleController.java

package com.example.demo.controllers.admin;

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

@Controller("AdminArticleController")
@RequestMapping("/admin/article/")
public class ArticleController {

}

• コントローラー名：AdminArticleController
• 共通パス：/admin/article/

トップページ作成

トピック管理のトップページを作成します。

アクションメソッド

index() メソッドを追加し、「admin/article/index」ビューを表示します。

controllers/admin/ArticleController.java

    @GetMapping("")
    public ModelAndView index(Model model, ModelAndView view) {
        view.setViewName("admin/article/index");
        return view;
    }

ビュー

トピック一覧を想定したHTMLを作成します。 【新規追加】ボタンから「/admin/article/create」にリンク、【編集】ボタンから「/admin/article/edit/{id}」にリンクします。

templates/admin/index.html

<div layout:decorate="layouts/admin" layout:fragment="contents">
  <h2>ニュース</h2>
  <a class="btn btn-sm btn-primary" th:href="@{create}">新規追加</a>
  <table class="table">
    <tr>
      <td><a th:href="@{/admin/article/edit/{id}(id=1)}" class="btn btn-sm btn-outline-primary">編集</a></td>
      <td>2023/01/01 10:00</td>
      <td>タイトル</td>
    </tr>
  </table>
</div>

ページ確認

http://localhost:8080/admin/article/ にアクセスして、ページが表示されるか確認しましょう。

結果

トピック投稿ページ

トピックの入力ページを作成します。

アクションメソッド

create() メソッドを追加し、「admin/article/create」ビューを表示します。

controllers/admin/ArticleController.java

    @GetMapping("create")
    public ModelAndView create(Model model, ModelAndView view) {
        //TODO 処理
        view.setViewName("admin/article/create");
        return view;
    }

ビュー

入力フォームのテンプレート「templates/admin/article/input.html」を作成し、「/admin/article/add」にPOST送信します。また【戻る】リンクも追加しておきます。

templates/admin/article/create.html

<div layout:decorate="layouts/admin" layout:fragment="contents">
  <h2>ニュース</h2>

  <form th:action="@{/admin/article/add}" method="post" enctype="multipart/form-data">

    <div class="form-group mb-3">
      <label class="from-label" for="">日付</label>
      <input type="datetime-local" class="form-control">
    </div>

    <div class="form-group mb-3">
      <label class="from-label" for="">タイトル</label>
      <input type="text" class="form-control">
    </div>

    <div class="form-group mb-3">
      <label class="form-label" for="">本文</label>
      <textarea class="form-control" rows="10"></textarea>
    </div>

    <div class="form-group mb-3">
      <label class="form-label" for="">画像</label>
      <input type="file" name="file">
    </div>

    <button class="btn btn-primary">更新</button>
    <a class="btn btn-outline-primary" th:href="@{/admin/article/}">戻る</a>
  </form>
</div>

• ファイルアップロードするため、formタグには enctype="multipart/form-data" も必要です。

ページ確認

トピックトップページの【新規追加】リンクから、入力ページが表示されるか確認しましょう。

結果

トピック追加処理

add() メソッドをPOSTリクエストで追加し、処理後は「/admin/article/」リダイレクトします。

controllers/admin/ArticleController.java

    //トピック追加処理
    @PostMapping("add")
    public ModelAndView add(Model model, ModelAndView view) {
        //TODO 処理
        System.out.println("Add!!");
        view.setViewName("redirect:/admin/article/");
        return view;
    }

リダイレクト確認

【更新】ボタンをクリックして、add() が実行され、トピックトップページにリダイレクトされるか確認しましょう。

コンソール

Add!!

編集ページ

トピックの編集ページを作成します。

アクションメソッド

edit() メソッドを追加し、「admin/article/edit」ビューを表示します。このとき、URLパスの「id」を取得しておきます。

controllers/admin/ArticleController.java

    //編集ページ
    @GetMapping("edit/{id}")
    public ModelAndView edit(@PathVariable("id") Long id, Model model, ModelAndView view) {
        //TODO 処理
        // URLパスの「id」をコンソール表示
        System.out.println(id);
        view.setViewName("admin/article/edit");
        return view;
    }

ビュー

編集フォームのテンプレート「templates/admin/article/edit.html」を作成し、「/admin/article/edit」にPOST送信します。また【戻る】リンクも追加しておきます。

templates/admin/article/edit.html

<div layout:decorate="layouts/admin" layout:fragment="contents">
  <h2>ニュース</h2>

    <form th:action="@{/admin/article/update/{id}(id=${id})}" method="post"
      enctype="multipart/form-data">

    <div class="form-group mb-3">
      <label class="from-label" for="">日付</label>
      <input type="datetime-local" class="form-control">
    </div>

    <div class="form-group mb-3">
      <label class="from-label" for="">タイトル</label>
      <input type="text" class="form-control" value="タイトル1">
    </div>

    <div class="form-group mb-3">
      <label class="form-label" for="">本文</label>
      <textarea class="form-control" rows="10">本文の記事</textarea>
    </div>

    <div class="form-group mb-3">
      <label class="form-label" for="">画像</label>
      <input type="file" name="file">
    </div>

    <button class="btn btn-primary">更新</button>
    <a class="btn btn-outline-primary" th:href="@{/admin/article/}">戻る</a>
  </form>
</div>

ページ確認

トピックトップページの【編集】リンクから、入力ページが表示されるか確認しましょう。

結果

トピック更新処理

udate() メソッドをPOSTリクエストで追加し、処理後は「/admin/article/」リダイレクトします。

controllers/admin/ArticleController.java

    //トピック更新処理
    @PostMapping("udate")
    public ModelAndView udate(Model model, ModelAndView view) {
   　  //TODO 処理
        view.setViewName("redirect:/admin/article/");
        return view;
    }