SpringBootを使った掲示板サイトのページからJPARepositoryのメソッドを使用して書き込みを削除する方法

Question

SpringBoot、Thymeleaf、PostgreSQLを使用して掲示板を作成しています。
トップページとは別に管理者ページを設け、そこから過去の投稿内容を削除できる機能を実装したいのですが、削除ボタンを押下すると４０４エラーが表示されてしまい、調べながらコードを書き換えて意図したとおりに動きません。
４０４エラーが表示されてしまう理由と、解決策をご教授いただきたいです。

現時点で実現していること

・トップページに投稿フォームを設け、送信ボタン押下で書き込んだユーザ名と書き込み内容をDBに保存する
・トップページの下に、過去の投稿を一覧として表示する
・管理者ページに投稿一覧と、削除ボタンを設ける

実現させたいこと

・管理者ページにアクセスし、削除したい投稿の隣にある削除ボタンで投稿を削除する
・投稿削除後は管理者ページにリダイレクトする

ページが見つからない、というエラーだとは理解しているのですが、何が原因かわからず躓いています。

よろしくお願いいたします。

package com.example.demo.domain;

/*
 * SpringBootとJPAを使っていれば、Entityクラスを作ると自動的にテーブルを生成してくれる
 */

import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;

@Entity //を付けることでDBのテーブルと紐づく
public class Post {
	@Id //を付けた変数が、そのテーブルの主キーになる
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;	//主キーであり、自動的に連番が割り振られる
	private String username;	//投稿者名
    private String posted_statement;	//投稿内容

    public Long getId() {
		return id;
	}
	public void setId(Long id) {
		this.id = id;
	}
	public String getUsername() {
		return username;
	}
	public void setUsername(String username) {
		this.username = username;
	}
	public String getPosted_statement() {
		return posted_statement;
	}
	public void setPosted_statement(String posted_statement) {
		this.posted_statement = posted_statement;
	}
	@Override
    public String toString() {//文字列に変換するメソッド
        return "Post [id=" + id + ", username=" + username + ", posted_statement=" + posted_statement + "]";
    }

}

package com.example.demo.service;
/*
 * Repositoryのメソッドを呼び出す処理を記述
 */

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import com.example.demo.domain.Post;
import com.example.demo.repository.PostRepository;

@Service
public class PostService {
	@Autowired//を付けて宣言するとBeanをインジェクトしてくれるのでnewしなくても使うことができる
    private PostRepository postRepository;

	public List<Post> findAll() {
        return postRepository.findAll();
    }

	//public Post findOne(Long id) {
        //return postRepository.findOne(id);
    //}


	public Post save(Post post) {
        return postRepository.save(post);
    }




	 public Post findById(Long id) {
		    return postRepository.findById(id).get();
		  }





	public void delete(Long id) {
		Post post = findById(id);
        postRepository.delete(post);
    }
}

package com.example.demo.controller;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.DeleteMapping;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;

import com.example.demo.domain.Post;
import com.example.demo.service.PostService;

@Controller
@RequestMapping("/posts")
public class PostController {
	@Autowired
    private PostService postService;

	@GetMapping
    public String index(Model model) {
        List<Post> posts = postService.findAll();
        model.addAttribute("posts", posts);
        return "posts/index";
    }

	@PostMapping
    public String create(@ModelAttribute Post post) {
		postService.save(post);
        return "redirect:/posts";
    }


	@GetMapping("admin")
	public String showAdmin(Model model) {
		List<Post> posts = postService.findAll();
        model.addAttribute("posts", posts);
        return "posts/admin";
    }



	@DeleteMapping("/{id}")
    public String destroy(@PathVariable Long id) {
        postService.delete(id);
        return "redirect:/admin";
    }

}

package com.example.demo.repository;

import org.springframework.data.jpa.repository.JpaRepository;
import org.springframework.stereotype.Repository;

import com.example.demo.domain.Post;


@Repository
public interface PostRepository extends JpaRepository<Post, Long> {


}

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="utf-8" />
		<title>掲示板トップページ</title>

		<link rel="stylesheet" href="/css/bootstrap.css" /><!-- cssとjavascriptのファイルを読み込む-->

		<script src="/js/jquery.js"></script>
		<script src="/js/bootstrap.js"></script>
	</head>

	<body>
		<h1>掲示板</h1><!-- 見出し -->

		<form th:action="@{/posts}" th:method="post">

			<h5>ユーザ名</h5>
			<input class="form-control" type="text" name="username" />

			<h5>書き込み</h5>
			<textarea class="form-control" name="posted_statement" cols="30" rows="5"></textarea>

			<button class="btn btn-default" type="submit">投稿</button>

		</form>

		<h5>みんなの書き込み</h5>
		<table class="table">

			<thead><!-- 表のヘッダ部分としてグループ化するためのタグ -->
			<tr>
				<th>No</th>
				<th>書き込み</th>
				<th>ユーザ名</th>
			</tr>
			</thead><!-- 表のヘッダ部分としてグループ化するためのタグ -->


			<tbody>
				<tr th:each="post:${posts}" th:object="${post}"><!--Controllerから渡されたplayersに対してループ処理を行っている-->

					<td th:text="*{id}"></td>
					<td th:text="*{posted_statement}"></td>
					<td th:text="*{username}"></td>

	          </tr>
	        </tbody>



	     </table>
	</body>
</html>

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="utf-8" />
		<title>管理者ページ</title>

		<link rel="stylesheet" href="/css/bootstrap.css" /><!-- cssとjavascriptのファイルを読み込む-->

		<script src="/js/jquery.js"></script>
		<script src="/js/bootstrap.js"></script>
	</head>
<body>

	<h2>管理者ページ</h2>

	<h5>みんなの書き込み</h5>
		<table class="table">

			<thead><!-- 表のヘッダ部分としてグループ化するためのタグ -->
			<tr>
				<th>No</th>
				<th>書き込み</th>
				<th>ユーザ名</th>
			</tr>
			</thead><!-- 表のヘッダ部分としてグループ化するためのタグ -->


			<tbody>
				<tr th:each="post:${posts}" th:object="${post}"><!--Controllerから渡されたplayersに対してループ処理を行っている-->

					<td th:text="*{id}"></td>
					<td th:text="*{posted_statement}"></td>
					<td th:text="*{username}"></td>

					<td>
						<form th:action="@{/posts/admin/{id}(id=*{id})}" th:method="delete">
							<input class="btn btn-default btn-xs" type="submit" value="削除" />
						</form>
					</td>
	          </tr>
	        </tbody>



	     </table>
</body>
</html>

Comments

[m.ts10806]

起きてる問題に対してタイトルが大きすぎる気がします。
可能なら内容に寄せてタイトル調整を。

[hfm_225]

ご指摘ありがとうございます。
タイトルを見直し、変更いたしました。

Answer 1

/posts/admin/{id}(id=*{id})

なのですから、マッピングにも[admin]が必要なのでは

@RequestMapping("/posts")
public class PostController {

@DeleteMapping("/{id}")

だと/posts/{id}ですので
↓

@RequestMapping("/posts")
public class PostController {

@DeleteMapping("/admin/{id}")

Comments

[hfm_225]

ご回答ありがとうございます、、、！
仰る通りでした、、、！
/admin/{id}に修正したらページが見つからないという問題は解決いたしました。

ただ、次は

Whitelabel Error Page
This application has no explicit mapping for /error, so you are seeing this as a fallback.

Fri Feb 18 21:44:15 JST 2022
There was an unexpected error (type=Method Not Allowed, status=405).
Request method 'POST' not supported
org.springframework.web.HttpRequestMethodNotSupportedException: Request method 'POST' not supported

というエラー表示がされてしまい、こちらも調べてみたのですが原因がわかりません、、、
許可されていないメソッドを使ってしまっているのでしょうか、、、？

こちらもご教授いただきたいです、、、
よろしくお願いいたします。

[m.ts10806]

ひとまず動作させたいだけなら
DeleteMapping
↓
PostMapping
ですかねぇ。

[hfm_225]

ご回答ありがとうございます。
PostMappingに変更したところ404エラーが表示されました、、、
おそらくこちらも正しくマッピングができていないのだと思うのですが、、、
もう少し原因を探ってみようと思います、、、！

[hfm_225]

PostMappingに修正後、admin.htmlのformタグをth:method="delete"からth:method="post"に修正、
Controllerのdestroyメソッド、return "redirect:/admin"をreturn "redirect:/posts/admin"に変更したところデータが削除されていました、、、！
DeleteMappingなどはもう少し勉強しようと思います、、、

無事解決いたしました！
ありがとうございます！

[m.ts10806]

確かにリクエストメソッドは処理にあったものが良いですが、
DELETEやPUTなどGET/POST以外はmethod=postの上で_methodという別のリクエストパラメータで疑似的に処理しているケースとなるので、そのあたりをおさえると良いかもしれません。

[hfm_225]

ありがとうございます！
まだ理解が足りていない部分があるのですが、m.ts10806様が仰っている内容はこちらの記事https://qiita.com/kazuhiro1982/items/b8b9965fddf9c5507517に書かれていることと同じでしょうか、、、？

[m.ts10806]

仕様的には下記です。
https://developer.mozilla.org/ja/docs/Web/HTTP/Methods
フォーム送信直には指定できないので、hiddenで行うような形になっています。