How to organize the client side on thymeleaf?

D

Denis Kuznetsov2019-06-03 10:24:55

Java

Denis Kuznetsov, 2019-06-03 10:24:55

Hello, I had a problem with the client side
after registration and authentication, the user gets to the personalAccount page where he sees his name and a list of his boxes (they are not there initially) and he has the opportunity to add them there as well as redo and delete them, that is,
initially by id the user has all the boxes, if the user adds a new box, then it is created and attached to it and then placed in the database, if the box already exists, then by the id of this box it is pulled out to the form page for customization, after which it is again saved to the database
here 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>

box costumes take place on the growBoxForm page

<%@ 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>

all actions are described in controllers

@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";
    }
}

this is based on the tutorial https://www.javaguides.net/2018/12/spring-mvc-spri... and https://o7planning.org/ru/11681/spring-boot-and-js... (I read about how to use both thymeleaf and jsp, and I realized that many people have a lot of problems with this)
Here is my link to git, if it is more convenient https://github.com/DennisKingsman/NetCracker
Now you need to remake these jsp under normal html on thymeleaf relying on functionality in controllers, if there are any comments about controllers, I will only be glad, because I have some doubts about the correctness of working with related entities
Thanks in advance

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

O

Orkhan, 2019-06-03
@DennisKingsman

Here is an example of a method in a controller and, accordingly, a template engine.
Suppose you have a page with a list of "boxes".
For example,

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

</body>
</html>

By clicking on the change button, we open a form with information about the box

@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";
}

And everything else is already being done as well ....
You can implement it in different ways. For example, pass the box id not as a pathVariable, but as a RequestParam. You can use a POST request if you don't want to pass the id in the URL etc. I described a simple option.
If I understood your question correctly, then this is what you need...