初めまして。
現在自分で設計したアプリケーションを作成するとういう課題を行っているんですが、
日付を選択して該当のレコードを表示するというところで躓いています。
Webで色々調べてみましたが自分が実現したいことに近いサイトを見つけることが出来ませんでした。
CRUD機能と画面レイアウトは完成しているので何を追加したらいいか、どこを修正したらいいかご教示お願いできますでしょうか。
実現したいこと
日付を選択したら該当のレコードが画面に表示される
MenuController.java
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.GetMapping; import org.springframework.web.bind.annotation.PostMapping; import org.springframework.web.bind.annotation.RequestParam; import com.example.demo.entity.MenuEntity; import com.example.demo.service.MenuService; @Controller public class MenuController { @Autowired private MenuService menuService; @GetMapping(value = "/") public String getMenus(Model model) { List<MenuEntity> list = menuService.findAll(); model.addAttribute("menulist", list); return "detail"; } @PostMapping(value = "/insert") public String insert(@RequestParam String menu, @RequestParam String content, @RequestParam String url) { MenuEntity menuEntity = new MenuEntity(); menuEntity.setMenu(menu); menuEntity.setContent(content); menuEntity.setUrl(url); menuService.insert(menuEntity); return "redirect:/"; } @PostMapping(value = "/update") public String update(@RequestParam int id, @RequestParam String menu, @RequestParam String content, @RequestParam String url) { MenuEntity menuEntity = new MenuEntity(); menuEntity.setId(id); menuEntity.setMenu(menu); menuEntity.setContent(content); menuEntity.setUrl(url); menuService.update(menuEntity); return "redirect:/"; } @PostMapping(value = "/delete") public String delete(@RequestParam int id) { MenuEntity menuEntity = new MenuEntity(); menuEntity.setId(id); menuService.delete(menuEntity); return "redirect:/"; } }
MenuService.java
package com.example.demo.service; import java.util.List; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Service; import com.example.demo.entity.MenuEntity; import com.example.demo.mapper.MenuMapper; @Service public class MenuService { @Autowired private MenuMapper menuMapper; public List<MenuEntity> findAll() { return menuMapper.findAll(); } public void insert(MenuEntity menuEntity) { menuMapper.insert(menuEntity); } public void update(MenuEntity menuEntity) { menuMapper.update(menuEntity); } public void delete(MenuEntity menuEntity) { menuMapper.delete(menuEntity); } }
MenuEntity.java
package com.example.demo.entity; import lombok.Data; @Data public class MenuEntity { private int id; private String menu; private String content; private String url; private String date; }
MenuMapper.java
package com.example.demo.mapper; import java.util.List; import org.apache.ibatis.annotations.Mapper; import com.example.demo.entity.MenuEntity; @Mapper public interface MenuMapper { List<MenuEntity> findAll(); void insert(MenuEntity menuEntity); void update(MenuEntity menuEntity); void delete(MenuEntity menuEntity); }
MenuMapper.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.example.demo.mapper.MenuMapper"> <select id="findAll" resultType="com.example.demo.entity.MenuEntity"> SELECT * FROM menu_management </select> <insert id="insert"> INSERT INTO menu_management(menu, content, url) VALUES(#{menu}, #{content}, #{url}) </insert> <update id="update"> UPDATE menu_management SET menu = #{menu}, content = #{content}, url = #{url} WHERE id = #{id} </update> <delete id="delete"> DELETE FROM menu_management WHERE id = #{id} </delete> </mapper>
detail.html
<!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"> <title>献立詳細</title> <link th:href="@{/webjars/bootstrap/css/bootstrap.min.css}" rel="stylesheet" > <script th:src="@{/webjars/jquery/jquery.min.js}"></script> <style> body{ background-image:url('https://beiz.jp/images_M/white/white_00032.jpg'); } </style> <script th:inline="javascript"> $(function() { $('#selectDate').on('change',function() { var now = $('#selectDate').val(); var year = now.slice(0, 4); var month = now.slice(5, 7); var date = now.slice(8, 10); var target = year + "年" + month + "月" + date + "日"; $('#targetDate').html(target); $('.showInsert').show(); $('#contentarea').show(); }); $('.menusName').on('click', function() { $('#display').val($(this).next().text()); }); $('.showInsert').on('click',function() { $('#form').show(); }); $('.showUpdate').on('click',function() { $('#menuId').val($(this).parents().children("td").first().text()); $('#menuName').val($(this).parents().children("td").eq(1).text()); $('#menuContent').val($(this).parents().children("td").eq(2).text()); $('#menuUrl').val($(this).parents().children("td").eq(3).text()); $('#form').show(); $('.touroku').hide(); $('.kousin').show(); }); $('#cancelButton').on('click',function() { $('#form').hide(); }); $('#endButton').on('click',function() { $('#form').hide(); if($('#menuName').val() === ''){ alert('献立を入力してください'); $(this).focus(); return false; } if($('#menuName').val().match(/^[ \r\n\t]+$/)){ alert('献立はスペース以外で入力してください'); $(this).focus(); return false; } }); }); </script> </head> <body> <div class="container bg-danger-subtle"> <div class="row"> <div class="col-md-5"> <h1>献立管理表</h1> <form> <input class="border-0 bg-transparent" type="date" id="selectDate"> <br><br> <h2><p style="text-align:center" id="targetDate"></p></h2> <div style="text-align:right"> <input style="display:none" class="btn btn-outline-dark btn-light rounded-circle showInsert" type="button" value="+"> </div> <table class="table table-light border border-dark"> <br> <tr th:each="mlist : ${menulist}"> <td class="menusId" id="targetId" th:text="${mlist.id}" hidden></td> <td class="menusName" id="targetMenu"><a href="#" class="link-dark" th:text="${mlist.menu}"></a></td> <td class="menusContent" id="targetContent" th:text="${mlist.content}" hidden></td> <td class="menusUrl" id="targetUrl" th:text="${mlist.url}" hidden></td> <td class="menusDate" id="targetDate" name="date" th:text="${mlist.date}" hidden></td> <td> <div style="text-align:right" method="POST"> <a name="url" th:href="${mlist.url}">レシピへ</a> <input type="hidden" name="id" th:value="${mlist.id}"> <input type="button" class="btn btn-primary showUpdate" value="編集"> <input type="hidden" name="id" th:value="${mlist.id}"> <input th:formaction="@{/delete}" type="submit" class="btn btn-danger" value="削除"> </div> </td> </tr> </table> </form> </div> <div class="col-md-4" id="contentarea" style="display:none"> <br> <br> <b><font size="4"><p>詳細</p></font></b> <textarea name="content" cols="50" rows="25" id="display" readonly></textarea> </div> <div class="col-md-3"> <form id="form" method="POST" style="display:none"> <br> <br> <h4>登録・更新</h4> <input type="hidden" name="id" id="menuId"><br> <b><label>献立</label></b></br> <input class="form-control input-lg border border-dark" type="text" name="menu" id="menuName"><br> <b><label>詳細</label></b></br> <textarea class="form-control input-lg border border-dark" cols="50" rows="10" name="content" id="menuContent"></textarea><br> <b><label>レシピURL</label></b></br> <input class="form-control input-lg border border-dark" type="text" name="url" id="menuUrl"><br> <b><label>日付</label></b><br> <input class="form-control input-lg border border-dark" type="date" name="date" id="menuDate"><br> <div style="text-align:right"> <input type="reset" class="btn btn-default" style="text-align:right" id="cancelButton" value="キャンセル"> <input type="reset" class="btn btn-warning" value="リセット"> <input th:formaction="@{/insert}" type="submit" class="touroku btn btn-primary" id="endButton" value="登録"> <input th:formaction="@{/update}" type="submit" class="kousin btn btn-primary" id="endButton" style="display:none" value="完了"> </div> </form> </div> </div> </div> <script th:src="@{/webjars/bootstrap/js/bootstrap.min.js}"></script> </body> </html>
補足情報(FW/ツールのバージョンなど)
・IDE:eclipse 4.26.0
・Java:17
・DB:MySQL 8.0
・フレームワーク:SpringBoot 3.0.4
・ORマッパー:Mybtis 3.0.0
・テンプレートエンジン:Thymeleaf

回答1件
あなたの回答
tips
プレビュー