似非プログラマのうんちく

「似非プログラマの覚え書き」出張版

春だから Spring やろうぜ(その 10)

Java Spring Thymeleaf

入力用のフォームを準備して、データを入力・保存できるようにする。

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
  <head>
    <title>Top page</title>
    <link th:href="@{/css/hello.css}" rel="stylesheet" />
  </head>
  <body>
    <h1 th:text="#{content.title}">Top page</h1>
    <form method="post" action="/" th:object="${formModel}">
      <table>
        <tr>
          <th><label for="name">名前</label></th>
          <td><input type="text" name="name" th:value="*{name}" /></td>
        </tr>
        <tr>
          <th><label for="age">年齢</label></th>
          <td><input type="text" name="age" th:value="*{age}" /></td>
        </tr>
        <tr>
          <th><label for="mail">メール</label></th>
          <td><input type="text" name="mail" th:value="*{mail}" /></td>
        </tr>
        <tr>
          <th><label for="memo">メモ</label></th>
          <td><textarea name="memo" th:text="*{memo}" cols="20" rows="5"></textarea></td>
        </tr>
        <tr>
          <th></th>
          <td><input type="submit" /></td>
        </tr>
      </table>
    </form>
    <hr />
    <table>
      <tr><th>ID</th><th>名前</th></tr>
      <tr th:each="obj : ${datalist}">
        <td th:text="${obj.id}"></td>
        <td th:text="${obj.name}"></td>
      </tr>
    </table>
  </body>
</html>

CSS は割愛。

package jp.mydns.akanekodou.demo.controller;

import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.servlet.ModelAndView;

import jp.mydns.akanekodou.demo.entity.MyData;
import jp.mydns.akanekodou.demo.repositories.MyDataRepository;

@Controller
public class HelloController {
    @Autowired
    MyDataRepository repository;

    @RequestMapping(value = "/", method = RequestMethod.GET)
    public ModelAndView index(@ModelAttribute("formModel") MyData mydata, ModelAndView mav) {
        mav.setViewName("hello");
        List<MyData> list = repository.findAll();
        mav.addObject("datalist", list);
        return mav;
    }

    @RequestMapping(value = "/", method = RequestMethod.POST)
    public ModelAndView form(@ModelAttribute("formModel") MyData mydata, ModelAndView mav) {
        repository.saveAndFlush(mydata);
        return new ModelAndView("redirect:/");
    }
}


f:id:redcat_prog:20180422185003p:plain

データを入力して…

f:id:redcat_prog:20180422185001p:plain

確かに保存された。

f:id:redcat_prog:20180422185002p:plain

外部データベースを使用しているので、アプリを一度終了して再起動してもデータは保存されている。

ただしこのままだとほぼ無制限にデタラメなデータを入れても保存されてしまうので、次回、これにバリデーションチェックを加えることにする。