DennisKingsman
@DennisKingsman
Студент

Как организовать клиентскую часть на thymeleaf?

Здравствуйте , у меня возникла проблема с клиентской частью
после регистрации и аутентификации пользователь попадает на страницу personalAccount где видит свое имя и перечень своих коробок(изначально их там нет) и у него есть возможность добавить их туда а так же переделать и удалить
тоесть изначально по id пользователя находятся все коробки , если пользователь добавляет новую коробку , то она создается и привязывается к нему после чего кладется в бд, если же коробка уже есть то по id этой коробки она вытаскивается на страницу формы для косюмизации , после чего снова сохраняется в бд
вот jsp
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
 pageEncoding="ISO-8859-1"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <title>personList</title>
</head>
<body>
<th:block th:include="/_menu"></th:block>
<div class="container">
  <div class="col-md-offset-1 col-md-10">

<h2>Personal Account Page</h2>
<h3>Welcome :  <span>${userInfo}</span> </h3>
<b>This is protected page!</b>

<a href="addGrowBox">Add GrowBox</a>
<br/><br/>

<div class="panel panel-info">
    <div class="panel-heading">
     <div class="panel-title">Customer List</div>
    </div>
    <div class="panel-body">
    <table class="table table-striped table-bordered">
        <tr>
            <th>Length</th>
            <th>Width</th>
            <th>Height</th>
            <th>Plants</th>
            <th>Sensors</th>
            <th>Action</th>
        </tr>

         <!-- loop over and print our growboxes -->
              <c:forEach var="growBox" items="${growboxes}">

         <!-- construct an "update" link with id -->
                <c:url var="updateLink" value="/updateForm">
                    <c:param name="growBoxId" value="${growBox.id}" />
                </c:url>

         <!-- construct an "delete" link with id -->
                <c:url var="deleteLink" value="/delete">
                    <c:param name="growBoxId" value="${growBox.id}" />
                </c:url>

                <c:url var = "plantsLink" value = "/plants">
                    <c:param name = "growBoxId" value =  "${growBox.id}" />
                </c:url>

                <c:url var = "sensorsLink" value = "/sensors">
                    <c:param name = "growBoxId" value =  "${growBox.id}" />
                </c:url>

        <tr>
            <td>${growBox.length}</td>
            <td>${growBox.width}</td>
            <td>${growBox.height}</td>

            <td><a href="${plantsLink}">Plants</a>
            <td><a href = "${sensorsLink}">Sensors</a>

            <td>
                     <!-- display the update link -->
                     <a href="${updateLink}">Update</a>
                     |
                     <a href="${deleteLink}">Delete</a>
            </td>
        </tr>
    </table>
    </div>
    </div>
    </div>
</div>


костюмизация коробок происходит на странице growBoxForm
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
 pageEncoding="ISO-8859-1"%>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>GrowBoxForm </title>
</head>
<body>
    <div class="container">
      <div class="col-md-offset-2 col-md-7">
        <div class="panel panel-info">
            <div class="panel-heading">
             <div class="panel-title">Add GrowBox</div>
        </div>
         <div class="panel-body">
             <form:form action="saveGrowBox" method="post" modelAttribute="growBox">

             <!-- need to associate this data with customer id -->
             <form:hidden path="id" />

             <div class="form-group">
                    <label for="length" class="col-md-3 control-label">Length</label>
                    <div class="col-md-9">
                    <form:input path="length" />
             </div>
             </div>

             <div class="form-group">
                    <label for="width" class="col-md-3 control-label">Width</label>
                    <div class="col-md-9">
                    <form:input path="width"/>
             </div>
             </div>

             <div class="form-group">
                    <label for="height" class="col-md-3 control-label">Height</label>
                    <div class="col-md-9">
                    <form:input path="height"/>
             </div>
             </div>
            </form:form>
         </div>
        </div>
       </div>
    </div>
</body>
</html>


все действия описаны в контроллерах
@Controller    // This means that this class is a Controller
@RequestMapping
public class AuthSuccessController {

    @Autowired
    UserRepo userRepo;

    @Autowired
    GrowBoxRepo growBoxRepo;

    @RequestMapping(value = "/personalAccount", method = RequestMethod.GET)
    public String personalAccount(Model model, Principal principal){

        User user = userRepo.findByUsername(principal.getName());

        model.addAttribute("userInfo", user.getUsername());

        List<GrowBox> growBoxes = growBoxRepo.findByResponsibleUserId(user.getId());

        model.addAttribute("growboxes", growBoxes);

        return "personalAccount";
    }

    @RequestMapping(value = "/showForm", method = RequestMethod.GET)
    public String showFormForAdd(Model theModel) {
        GrowBox growBox = new GrowBox();
        theModel.addAttribute("growBox", growBox);
        return "growBoxForm";
    }

    @RequestMapping(value = "/saveGrowBox", method = RequestMethod.POST)
    public String saveCustomer(@ModelAttribute("growBox") GrowBox growBox, Principal principal) {
        User user = userRepo.findByUsername(principal.getName());

        growBox.setResponsibleUser(user);

        growBoxRepo.save(growBox);

        return "redirect:/personalAccount";
    }

    @RequestMapping(value = "/updateForm", method = RequestMethod.GET)
    public String showFormForUpdate(@RequestParam("growBoxId") Long theId,
                                    Model theModel) {
        GrowBox growBox = growBoxRepo.getOne(theId);
        theModel.addAttribute("growBox", growBox);
        return "growBoxForm";
    }

    @RequestMapping(value = "/delete", method = RequestMethod.GET)
    public String deleteCustomer(@RequestParam("growBoxId") Long theId) {
        growBoxRepo.deleteById(theId);
        return "redirect:/personalAccount";
    }
}

это написано на основе туториала https://www.javaguides.net/2018/12/spring-mvc-spri... и https://o7planning.org/ru/11681/spring-boot-and-js... (читал про то, как использовать и thymeleaf и jsp,и понял что у многих возникает с этим куча проблем)
Вот моя ссылка на гит , если это будет удобнее https://github.com/DennisKingsman/NetCracker
Сейчас необходимо эти jsp переделать под обычный html на thymeleaf опираясь на функционал в контроллерах , если есть какие то замечания по поводу контроллеров , буду только рад , потому что у меня есть некоторые сомнения на счет правильности работы со связанными сущностями
Заранее спасибо
  • Вопрос задан
  • 279 просмотров
Решения вопроса 1
azerphoenix
@azerphoenix Куратор тега Java
Java Software Engineer
Вот, пример метода в контроллере и соответственно шаблонизатор.

Предположим, что у вас есть страница со списком "коробок".
Например,

@GetMapping("/boxes")
public String getBoxesList(
	Model model
) {

	model.addAttribute("boxes", boxService.getBoxesList());
	return "/boxes-template";
}

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>

	<!-- тут итерируем по списку -->
	<div th:each="box : ${boxes}">
		<span th:inline="text">[[${box.boxTitle}]]</span> <!-- или можно так -->
		<span th:text="${box.boxTitle}">Название коробки</span>
		<a th:href="'/boxes/edit/'+${box.boxId}">Изменить</a> <!--обратите внимание на эту ссылку -->
	</div>

</body>
</html>


По клику на кнопку изменить открываем форму с информацией о боксе
@GetMapping("/boxes/edit/{id}") 
public String boxEditForm(
	@Pathvariable("id") Long id,
	Model model
) {
	Box box = boxRepository.findById(id);
	model.addAttribute("box", box);
	return "box-edit-template";
}

А все остальное уже делается также....

Вы можете по-разному реализовать. Например, передавать id бокса не в виде pathVariable, а RequestParam. Можно использовать POST запрос, если вы не хотите передавать id в URL и т.д. Я описал простой вариант.

Если я правильно понял ваш вопрос, то это то, что вам нужно...
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы