🪄

Spring Bootを使ってTodo Appを作ってみる

2024/05/15に公開

Java

PostgreSQL

Spring Boot

tech

Spring Bootを使ってTodo Appを作ってみる。
基本的なCRUD機能を持った簡単なAppになる。

1. postgreSQLの準備

インストールについては、こちらの方の記事を参考にしました。
PostgreSQL を Windows にインストールするには
インストールができたら、Todoアプリで使用するDBを作る。
「SQL Shell(psql)」を開いて、ユーザーを作成する。

ユーザーが作成されたことを確認する。

データベースを作成する。

作成したデータベースに、作成したユーザーで接続する。

接続ができたので、テーブルを作成する。

作成したテーブルを確認する。

2. SpringBootプロジェクトの作成

eclipseを稼働して、「ファイル」→「新規」→「その他」→「Spring スターター・プロジェクト」を選択する。

依存関係はこんな感じで、pom.xmlで確認できる。依存関係の追加などもこのファイルでできる。
これで、SpringBootプロジェクトの作成は完了

3. DB接続設定

作成したDBに接続するために、「application.properties」を編集する。
「src/main/resources」の下の「application.properties」を開いて、以下の記述を追加してDBに接続できるようにする。

spring.datasource.driver-class-name=org.postgresql.Driver
spring.datasource.url=jdbc:postgresql://localhost:5432/todo_db
spring.datasource.username=todo_user
spring.datasource.password=todo_pass

todo_user,todo_passには自分のuser名とパスワードを入力する。

3-1. Entityの作成

「src/main\java」→「com.todo.app」の下に「entity」パッケージを作成する。
初期値が「com.todo.app」となっているので、「com.todo.app.entity」とする。
パッケージの下にTodoクラスを作成する。entityを右クリックし、「新規」→「クラス」を選択する。名前に「Todo」と入力し、クラスの作成を完了する。

@Dataは、lombokのGetter・Setter自動生成のためのもので、以下のコードを記述する必要がなくなる。

public Long getId() {
        return id;
    }
public void setId(Long id) {
        this.id = id;
    }

4. Mapperの作成

「src/main/java」→「com.todo.app」の下に「mapper」パッケージを作成する。
初期値が「com.todo.app」となっているので、「com.todo.app.mapper」とする。
パッケージの下にTodoMapper.javaクラスを作成する。
mapperを右クリックし、「新規」→「インタフェース」を選択する。
名前に「TodoMapper」と入力し、完了を押す。
TodoMapperというインタフェースはDBを操作するメソッドを呼び出すためのもので、このインタフェースからメソッドを呼び出す。
このインタフェースの具象クラスは、MyBatisがXMLのSQLl情報から自動で作成してくれる。
SelectAll( )に対応するSQL文はXMLファイルに書く。

@Mapper：Mapperのインタフェースとなる。

5. Mapperの作成

TodoMapperインタフェースと同じ構成のフォルダーを作成し、XMLファイルを作成する。
「src/main/resources」を右クリックし、「新規」→「フォルダー」を選択する。
フォルダー名に「com/todo/app/mapper」と入力し、完了を押す。
「mapper」フォルダーを右クリックし、「新規」→「その他」→「XMLファイル」→「次へ」と進み、ファイル名は「TodoMapper.xml」と入力して完了する。
「TodoMapper.xml」にはSQL文を記述していく。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper
PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.todo.app.mapper.TodoMapper">
	<select id="selectAll" resultType="com.todo.app.entity.Todo">
		SELECT * FROM todo_itmes
	</select>
</mapper>

todo_itmes(テーブル)からすべてのデータをSelectする。
Todoクラス型で返して、entityパッケージの下にあるTodoクラスの変数にそれぞれの値が入る。

id：メソッド名
resulttype：戻される型

6. Thymeleafの作成

画面に表示される部分を作る。
「src/main/resources」の下にある「templates」フォルダーを右クリックし、HTMLファイルを作成する。HTMLファイル名は「index.html」と入力し、完了する。
HTMLファイルに以下のコードを書き込み、編集する。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Spring Boot TodoApp</title>
</head>
<body>
<h1>Todo List</h1>
<p th:each="todo:${todos}" th:text="${todo.title}"></p>
</body>
</html>

Thymeleafの文法の特徴はHTMLタグの中にthを追加することで、index,htmlで使ったThymeleafの文法をみると、

th:each
ループとして使う。”ループに使うオブジェクトの変数名：リスト変数名”

th:each="todo:${todos}"

Todoクラスを${todos}というリストに入れて${todos}の値を1つずつ画面に表示する。

th:text
テキストを表示する。

th:text="${todo.title}"

：Todoクラスを${todos}というリストに入れて${todos}の値を1つずつ画面に表示する。

7. Controllerの作成

「src/main/java」→「com.todo.app」の下に「controller」パッケージを作成する。
初期値が「com.todo.app」となっているので、「com.todo.app.controller」とする。
パッケージの下にTodoController.javaクラスを作成する。
controllerを右クリックし、「新規」→「クラス」を選択する。
名前に「TodoController」と入力し、完了を押す。
TodoControllerファイルに以下のコードを書き込み、編集する。

package com.todo.app.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.RequestMapping;
import com.todo.app.entity.Todo;
import com.todo.app.mapper.TodoMapper;
@Controller
public class TodoController {
	@Autowired
	TodoMapper todoMapper;
	
	@RequestMapping(value="/")
	public String index(Model model) {
		List<Todo> list = todoMapper.selectAll();
		model.addAttribute("todos",list);
		return "index";
	}
}

@Controller：コントローラーで認識される。
@RequestMapping：リクエストを対応するメソッドとマッピングするために使う。
valueには、リクエストを受けるURLを書いて設定する。
今回は「http://localhost:8080/」なので、(value=”/”)になる。
「http://localhost:8080/todo」の場合は、(value=”/todo”)になる。
Model：Controllerで生成されたデータをViewに渡す時に使う客体
addAttribute(String name, Object value)：valueというオブジェクトをnameという名前で追加する。Viewではnameで指定されたvalueを使う。

TodoMapper.javaインタフェースのSelectAll( )メソッドを実行し、TodoMapper.xml内のSQL文の結果を戻り値としてlistに格納する。
Viewで使listを「todos」というnameで指定してmodelに追加する。これがThymeleafの${todos}の部分になる。
returnで先程作ったindex.htmlを指定する。

8. 確認

プロジェクトを実行する前に、todo_itemsテーブルにデータを入れる。
「SQL Shell」を開き、「ユーザー postgres のパスワード:」が出るまでEnterを押して、パスワードを入力する。
次は、「postgres=# \connect todo_db todo_user」を入力してtodo_userに接続する。
接続できたら、todo_itemsテーブルに以下のSQL文を入力してデータを入れる。
「insert into todo_items (title) values ('お散歩をする');」
「select * from todo_items;」で確認ができる。

プロジェクトを実行する。
プロジェクトtodoappを右クリックし、「実行」→「Spring Bootアプリケーション」を選択する。
コンソールにこのように出たら成功。

実行できたら、ブラウザを開き以下のURLを入力する。
「http://localhost:8080/」
成功していれば、画面にTodo Listが表示される。

9. 追加機能

タスクの追加機能を追加する。

9-1. Mapper編集

タスク追加メソッドを追加する。View(index.html)で入力したデータをDBに追加するので、引数が必要だ。この引数のtodoはXMLファイルのSQLで使う。

package com.todo.app.mapper;
import java.util.List;
import org.apache.ibatis.annotations.Mapper;
import com.todo.app.entity.Todo;
@Mapper
public interface TodoMapper {
	public List<Todo> selectAll();
	
	public void add(Todo todo); //タスク追加
}

9-2. XML編集

TodoMapper.javaファイルで作ったaddメソッドに対応するSQL文を追加する。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper
PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.todo.app.mapper.TodoMapper">
	<select id="selectAll" resultType="com.todo.app.entity.Todo">
		SELECT * FROM todo_items
	</select>
	
	<insert id="add" parameterType="com.todo.app.entity.Todo">
		INSERT INTO todo_items (title,time_limit)
		VALUES (#{title}, to_date(#{time_limit},'yy-mm-dd'))
	</insert>
</mapper>

to_date(#{time_limit},’yy-mm-dd’}：string型の日付をデータ型で格納する。

9-3. Controller編集

「/add」を呼び出すメソッドを作成する。

package com.todo.app.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.RequestMapping;
import com.todo.app.entity.Todo;
import com.todo.app.mapper.TodoMapper;
@Controller
public class TodoController {
	@Autowired
	TodoMapper todoMapper;
	
	@RequestMapping(value="/")
	public String index(Model model) {
		List<Todo> list = todoMapper.selectAll();
		model.addAttribute("todos",list);
		return "index";
	}
	
	@RequestMapping(value="/add")
	public String add(Todo todo) {
		todoMapper.add(todo);
		return "redirect:/";
	}
}

呼び出しと同時にViewから渡される値をTodoMapperのaddメソッドの引数に渡している。
メソッドを実行した後、indexメソッドにリダイレクトする。(index.htmlにリダイレクト)

9-4. Thymeleaf編集

入力欄と追加ボタンを作成する。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Spring Boot TodoApp</title>
</head>
<body>
<h1>Todo List</h1>
<p th:each="todo:${todos}" th:text="${todo.title}"></p>
<form method="post" th:action="@{/add}">
	<input type="text" name="title" />
	<input type="date" name="time_limit" />
	<input type="submit" value="追加" />
</form>
</body>
</html>

入力欄に入力した値が、Controllerのメソッドの引数(todo)になる。
name属性の値と同名の(Todo.java)のフィールドに、それぞれ入力値が入る。
追加ボタン(submit)をクリックすると、Controllerの「/add」が実行される。

9-5. 確認

プロジェクトを実行して、ブラウザを開きタスクの追加機能を確認する。

10. 更新機能

タスクの更新機能を追加する。
1つのタスクごとに更新するようにする。

10-1. Mapper編集

タスク更新メソッドを追加する。View(index.html)で入力したデータを受け取ってDBを更新するので、引数が必要だ。
この引数のtodoはXMLファイルのSQLで使う。

package com.todo.app.mapper;
import java.util.List;
import org.apache.ibatis.annotations.Mapper;
import com.todo.app.entity.Todo;
@Mapper
public interface TodoMapper {
	public List<Todo> selectAll();
	
	public void add(Todo todo); //タスク追加
	
	public void update(Todo todo); //タスク更新
}

10-2. XML編集

TodoMapper.javaファイルで作ったupdateメソッドに対応するSQL文を追加する。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper
PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.todo.app.mapper.TodoMapper">
	<select id="selectAll" resultType="com.todo.app.entity.Todo">
		SELECT * FROM todo_items
	</select>
	
	<insert id="add" parameterType="com.todo.app.entity.Todo">
		INSERT INTO todo_items (title,time_limit)
		VALUES (#{title}, to_date(#{time_limit},'yy-mm-dd'))
	</insert>
	
	<update id="update" parameterType="com.todo.app.entity.Todo">
		 UPDATE todo_items
		 SET title = #{title}, time_limit = to_date(#{time_limit},'yy-mm-dd')
		 WHERE id = #{id}
	</update>
</mapper>

10-3. Controller編集

「/update」を呼び出すメソッドを作成する。

package com.todo.app.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.RequestMapping;
import com.todo.app.entity.Todo;
import com.todo.app.mapper.TodoMapper;
@Controller
public class TodoController {
	@Autowired
	TodoMapper todoMapper;
	
	@RequestMapping(value="/")
	public String index(Model model) {
		List<Todo> list = todoMapper.selectAll();
		model.addAttribute("todos",list);
		return "index";
	}
	
	@RequestMapping(value="/add")
	public String add(Todo todo) {
		todoMapper.add(todo);
		return "redirect:/";
	}
	
	@RequestMapping(value="/update")
	public String update(Todo todo) {
		todoMapper.update(todo);
		return "redirect:/";
	}
}

10-4. Thymeleaf編集

View側の編集をする。
ここでやることは３つがあって、

文字を書き換えられるようにする
更新ボタン追加
idを取得できるようにする

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Spring Boot TodoApp</title>
</head>
<body>
<h1>Todo List</h1>
<h3>マイタスク</h3>
<form method="post" th:action="@{/update}" th:each="todo : ${todos}" >
<input type="hidden" name="id" th:value="${todo.id}" />
<input type="text" name="title"th:value="${todo.title}" />
<input type="date" name="time_limit"th:value="${todo.time_limit}" />
<input type="submit" value="更新" />
</form>
<h3>新しいタスク追加</h3>
<form method="post" th:action="@{/add}">
	<input type="text" name="title" />
	<input type="date" name="time_limit" />
	<input type="submit" value="追加" />
</form>
</body>
</html>

追加の時と同じようにformを作成する。
追加と違うところは

ループさせる
todo_itemsテーブルにあるデータを初めから入ってる
idはhiddenで隠して、更新する時にwhereのidとして使う

10-5. Thymeleaf編集

11. 完了機能

タスク完了機能を追加する。

11-1. 完了ボタン

Thymeleaf編集
タスクの横に完了したら押すためのボタンを作る。
checkboxを使って、チェックがついている時にvalueの値(1)を返す。
index.htmlファイルに以下のコードを書き込み、ファイルを編集する。

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>TodoApp</title>
</head>
<body>
<h1>TodoList</h1>
<h3>マイタスク</h3>
<form method="post" th:action="@{/update}" th:each="todo : ${todos}" >
<input type="checkbox"name="done_flg" value="1"/>
<input type="hidden" name="id" th:value="${todo.id}" />
<input type="text" name="title"th:value="${todo.title}" />
<input type="date" name="time_limit"th:value="${todo.time_limit}" />
<input type="submit" value="更新" />
</form>
<h3>新しいタスクを追加</h3>
<form method="post" th:action="@{/add}">
<input type="text" name="title" />
<input type="date" name="time_limit"/>
<input type="submit" value="追加" />
</form>
</body>
</html>

XMLファイル編集
TodoControllerとTodoMapperには変更がないので、XMLファイルのupdateに対応するSQL文だけを編集する。
XMLファイルに以下のコードを書き込み、ファイルを編集する。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper
PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.todo.app.mapper.TodoMapper">
<select id="selectAll" resultType="com.todo.app.entity.Todo">
select * from todo_items
</select>
<insert id="add" parameterType="com.todo.app.entity.Todo">
insert into todo_items (title,time_limit)
values (#{title},to_date(#{time_limit},'yy-mm-dd'))
</insert>
<update id="update" parameterType="com.todo.app.entity.Todo">
update todo_items set
title = #{title},
time_limit = to_date(#{time_limit},'yy-mm-dd'),
done_flg = #{done_flg}
where id = #{id}
</update>
</mapper>

確認
画面には変化がないので、確認は「SQL Shell」で確認ができる。

11-2. 未完了のみ表示

未完了タスクのみを表示する機能を追加する。
Mapper編集
未完了タスクのみを検索するselectIncompleteメソッドを作成する。

package com.todo.app.mapper;
import java.util.List;
import org.apache.ibatis.annotations.Mapper;
import com.todo.app.entity.Todo;
@Mapper
public interface TodoMapper {
	public List<Todo> selectAll();
	public List<Todo> selectIncomplete(); //未完了タスクのみ表示	
	public void add(Todo todo); //タスク追加
	public void update(Todo todo); //タスク更新
}

XML編集
selectIncompleteを対応するSQL文を作成する。
TodoMapper.javaファイルに以下のコードを書き込み、XMLファイルを編集する。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper
PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.todo.app.mapper.TodoMapper">
<select id="selectAll" resultType="com.todo.app.entity.Todo">
SELECT * FROM todo_items
</select>
<select id="selectIncomplete" resultType="com.todo.app.entity.Todo">
	SELECT * FROM todo_items WHERE done_flg = 0
</select>
<insert id="add" parameterType="com.todo.app.entity.Todo">
insert into todo_items (title,time_limit)
values (#{title},to_date(#{time_limit},'yy-mm-dd'))
</insert>
<update id="update" parameterType="com.todo.app.entity.Todo">
update todo_items set
title = #{title},
time_limit = to_date(#{time_limit},'yy-mm-dd'),
done_flg = #{done_flg}
where id = #{id}
</update>
</mapper>

Controller編集
selectAll( )は一旦コメントして、selectIncomplete( )を呼べるようにする。

package com.todo.app.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.RequestMapping;
import com.todo.app.entity.Todo;
import com.todo.app.mapper.TodoMapper;
@Controller
public class TodoController {
	@Autowired
	TodoMapper todoMapper;
	
	@RequestMapping(value="/")
	public String index(Model model) {
		//List<Todo> list = todoMapper.selectAll();
		List<Todo> list = todoMapper.selectIncomplete();
		model.addAttribute("todos",list);
		return "index";
	}
	
	@RequestMapping(value="/add")
	public String add(Todo todo) {
		todoMapper.add(todo);
		return "redirect:/";
	}
	
	@RequestMapping(value="/update")
	public String update(Todo todo) {
		todoMapper.update(todo);
		return "redirect:/";
	}
}

確認
ブラウザを開くと、未完了タスクのみが画面に表示されることが確認できる。
完了をチェックして更新ボタンを押すと、マイタスクから消える。

11-3. 完了も表示

完了タスクのみも画面に表示する機能を追加する。
Mapper編集
完了のみを表示するselectCompleteメソッドを作成する。
TodoMapper.javaファイルに以下のコードを書き込み、ファイルに編集する。

package com.todo.app.mapper;
import java.util.List;
import org.apache.ibatis.annotations.Mapper;
import com.todo.app.entity.Todo;
@Mapper
public interface TodoMapper {
	public List<Todo> selectAll();
	
	public List<Todo> selectIncomplete(); //未完了タスクのみ表示
	
	public List<Todo> selectComplete(); //完了タスクのみを表示
	
	public void add(Todo todo); //タスク追加
	
	public void update(Todo todo); //タスク更新
	
}

XMLファイル編集編集
selectCompleteメソッドに対応するXML文を作成する。
TodoMapper.xmlファイルに以下のコードを書き込み、ファイルを編集する。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper
PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.todo.app.mapper.TodoMapper">
<select id="selectAll" resultType="com.todo.app.entity.Todo">
SELECT * FROM todo_items
</select>
<select id="selectIncomplete" resultType="com.todo.app.entity.Todo">
SELECT * FROM todo_items WHERE done_flg = 0
</select>
<select id="selectComplete" resultType="com.todo.app.entity.Todo">
SELECT * from todo_items WHERE done_flg = 1
</select>
<insert id="add" parameterType="com.todo.app.entity.Todo">
INSERT INTO todo_items (title,time_limit)
VALUES (#{title},to_date(#{time_limit},'yy-mm-dd'))
</insert>
<update id="update" parameterType="com.todo.app.entity.Todo">
UPDATE todo_items SET
title = #{title},
time_limit = to_date(#{time_limit},'yy-mm-dd'),
done_flg = #{done_flg}
WHERE id = #{id}
</update>
</mapper>

Controller編集
selectIncomplete( )とselectComplete( )を両方読んで、完了タスクと未完了タスクそれぞれのリストを名前を付けてView側に渡す。
TodoController.javaに以下のコードを書き込み、ファイルを編集する。

package com.todo.app.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.RequestMapping;
import com.todo.app.entity.Todo;
import com.todo.app.mapper.TodoMapper;
@Controller
public class TodoController {
	@Autowired
	TodoMapper todoMapper;
	
	@RequestMapping(value="/")
	public String index(Model model) {
		//List<Todo> list = todoMapper.selectAll();
		List<Todo> list = todoMapper.selectIncomplete();
		List<Todo> doneList = todoMapper.selectComplete();
		model.addAttribute("todos",list);
		model.addAttribute("todos",doneList);
		return "index";
	}
	
	@RequestMapping(value="/add")
	public String add(Todo todo) {
		todoMapper.add(todo);
		return "redirect:/";
	}
	
	@RequestMapping(value="/update")
	public String update(Todo todo) {
		todoMapper.update(todo);
		return "redirect:/";
	}
}

Thymeleaf編集
完了タスクのみ表示するリストと未完了タスクのみ表示するリストをそれぞれ作成した。
完了タスクには線を引くようにした。

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>TodoApp</title>
</head>
<body>
<h1>TodoList</h1>
<h3>マイタスク</h3>
<form method="post" th:action="@{/update}" th:each="todo : ${todos}" >
<input type="checkbox"name="done_flg" value="1"/>
<input type="hidden" name="id" th:value="${todo.id}" />
<input type="text" name="title"th:value="${todo.title}" />
<input type="date" name="time_limit"th:value="${todo.time_limit}" />
<input type="submit" value="更新" />
</form>
<h3>完了済み</h3>
<form method="post" th:action="@{/update}" th:each="todo : ${doneTodos}" >
<input type="checkbox"name="done_flg" value="1"/>
<input type="hidden" name="id" th:value="${todo.id}" />
<input type="text" name="title"th:value="${todo.title}" style="text-decoration:line-through"/>
<input type="date" name="time_limit"th:value="${todo.time_limit}" />
<input type="submit" value="更新" />
</form>
<h3>新しいタスクを追加</h3>
<form method="post" th:action="@{/add}">
<input type="text" name="title" />
<input type="date" name="time_limit"/>
<input type="submit" value="追加" />
</form>
</body>
</html>

確認

12. 削除機能

タスク削除機能を追加する。

12-1. Mapper編集

delete( )メソッドを作成する。
TodoMapper.javaファイルに以下のコードを書き込み、ファイルを編集する。

package com.todo.app.mapper;
import java.util.List;
import org.apache.ibatis.annotations.Mapper;
import com.todo.app.entity.Todo;
@Mapper
public interface TodoMapper {
	public List<Todo> selectAll();
	
	public List<Todo> selectIncomplete(); //未完了タスクのみ表示
	
	public List<Todo> selectComplete(); //完了タスクのみを表示
	
	public void add(Todo todo); //タスク追加
	
	public void update(Todo todo); //タスク更新
	
	public void delete(); //タスク削除
	
}

12-2. XML編集

delete( )メソッドに対応するSQL文を作成する。
TodoMapper.xmlファイルに以下のコードを書き込み、ファイルを編集する。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper
PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.todo.app.mapper.TodoMapper">
<select id="selectAll" resultType="com.todo.app.entity.Todo">
SELECT * FROM todo_items
</select>
<select id="selectIncomplete" resultType="com.todo.app.entity.Todo">
SELECT * FROM todo_items WHERE done_flg = 0
</select>
<select id="selectComplete" resultType="com.todo.app.entity.Todo">
SELECT * from todo_items WHERE done_flg = 1
</select>
<insert id="add" parameterType="com.todo.app.entity.Todo">
INSERT INTO todo_items (title,time_limit)
VALUES (#{title},to_date(#{time_limit},'yy-mm-dd'))
</insert>
<update id="update" parameterType="com.todo.app.entity.Todo">
UPDATE todo_items SET
title = #{title},
time_limit = to_date(#{time_limit},'yy-mm-dd'),
done_flg = #{done_flg}
WHERE id = #{id}
</update>
<delete id="delete" parameterType="com.todo.app.entity.Todo">
	DELETE FROM todo_items WHERE done_flg = 1
</delete>
</mapper>

12-3. Controller編集

「/delete」で呼び出すメソッドを作成する。
TodoController.javaファイルに以下のコードを書き込み、ファイルを編集する。

package com.todo.app.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.RequestMapping;
import com.todo.app.entity.Todo;
import com.todo.app.mapper.TodoMapper;
@Controller
public class TodoController {
@Autowired
TodoMapper todoMapper;
@RequestMapping(value="/")
public String index(Model model) {
// List<Todo> list = todoMapper.selectAll();
List<Todo> list = todoMapper.selectIncomplete();
List<Todo> doneList = todoMapper.selectComplete();
model.addAttribute("todos",list);
model.addAttribute("doneTodos",doneList);
return "index";
}
@RequestMapping(value="/add")
public String add(Todo todo) {
todoMapper.add(todo);
return "redirect:/";
}
@RequestMapping(value="/update")
public String update(Todo todo) {
todoMapper.update(todo);
return "redirect:/";
}
@RequestMapping(value="/delete")
public String delete() {
	todoMapper.delete();
	return "redirect:/";
}
}

12-4. Thymeleaf編集

削除ボタンを作成する。
submitすることで、Controllerの「/delete」を実行する。
index.htmlファイルに以下のコードを書き込み、ファイルを編集する。

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

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

<body>
<h1>TodoList</h1>

<h3>マイタスク</h3>
<form method="post" th:action="@{/update}" th:each="todo : ${todos}" >
<input type="checkbox"name="done_flg" value="1"/>
<input type="hidden" name="id" th:value="${todo.id}" />
<input type="text" name="title"th:value="${todo.title}" />
<input type="date" name="time_limit"th:value="${todo.time_limit}" />
<input type="submit" value="更新" />
</form>

<h3>完了済み</h3>
<form method="post" th:action="@{/update}" th:each="todo : ${doneTodos}" >
<input type="checkbox"name="done_flg" value="1"/>
<input type="hidden" name="id" th:value="${todo.id}" />
<input type="text" name="title"th:value="${todo.title}" style="text-decoration:line-through"/>
<input type="date" name="time_limit"th:value="${todo.time_limit}" />
<input type="submit" value="更新" />
</form>

<h3>新しいタスクを追加</h3>
<form method="post" th:action="@{/add}">
<input type="text" name="title" />
<input type="date" name="time_limit"/>
<input type="submit" value="追加" />
</form>
<form method="post" th:action="@{/delete}">
	 <input type="submit" value="完了済みを削除" />
</form>
</body>
</html>

12-5. 確認

「完了済みを削除」ボタンを押すと、完了済みタスクが一気に消せる。

参考になったURL
SpringBootでToDoアプリを作ってみよう【誰でも作れます・初心者向け】