目的
この記事はJavaのWebフレームワークであるSpringを使ったWebアプリ作成の流れを書いていきます。例として簡単なTODOアプリを作っていきます。
おおまかな流れ（適宜追加・修正）
①フロントを作る(HTML・CSS)
②MVCの解説
③Controllerの作成
④データベースの設定
⑤モデルの作成
⑥CRUD
フロントの作成
今回のメインはSpringを使うことなので、フロントは簡単に作ります。後ほど見やすいようにデザインを修正したいと思います。
最低限、TODOアプリはTODOの作成画面とTODOの確認の２つのテンプレートがあればできるので、まずはその２つのファイルを用意します。
一覧画面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TODOの一覧</title>
</head>
<body>
<table border="2">
<thead>
<tr>
<th>TODO</th>
<th>重要度</th>
<th>登録日時</th>
</tr>
</thead>
<tbody>
<tr>
<th>コンソメ買う</th>
<th>3</th>
<th>2020/3/2</th>
</tr>
<tr>
<th>たぬきちに会う</th>
<th>5</th>
<th>2023/2/3</th>
</tr>
</tbody>
</table>
</body>
</html>
TODO作成画面
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TODOの作成</title>
<link rel="stylesheet" href="css/todo.css">
</head>
<body>
<form action="" class="todo">
<label for="">
<input type="text" placeholder="やるべきこと">
</label>
<label for="">
<input type="number" placeholder="重要度">
</label>
<input id="btn" type="button" value="送信">
</form>
</body>
</html>
今回は簡単なHTMLの表とフォームを作成しました。右のフォームを送信すると、左の表に追加される形でTODOサイトを作っていきます。