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 опираясь на функционал в контроллерах , если есть какие то замечания по поводу контроллеров , буду только рад , потому что у меня есть некоторые сомнения на счет правильности работы со связанными сущностями
Заранее спасибо
  • Вопрос задан
  • 267 просмотров
Решения вопроса 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 и т.д. Я описал простой вариант.

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

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

Войти через центр авторизации
Похожие вопросы
Bell Integrator Ульяновск
До 400 000 ₽
Bell Integrator Ижевск
До 400 000 ₽
Bell Integrator Хабаровск
До 400 000 ₽