Springで作るWebアプリ作成の流れ（１）フロント作成まで #Web

目的

　この記事は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サイトを作っていきます。