Как редактировать пользователей на одной странице с помощью Thymeleaf и Spring boot (с JS) - PullRequest
Новая
       7

Как редактировать пользователей на одной странице с помощью Thymeleaf и Spring boot (с JS)

1 голос
/ 02 августа 2020

Я новичок в Spring Boot и Java Script. Моя проблема в том, что я пытаюсь создать таблицу с помощью Spring Boot и JS, где вы можете добавлять пользователей, редактировать их и удалять (простая задача), но хотите сделать это на одной странице. Собственно, это задача для JS и HTML. Успешно добавленные пользователи, я не могу их редактировать, потому что в Spring Boot вам нужно создать другую форму (что означает другую страницу), поэтому я решил использовать JS. Но я не знаю, почему мой скрипт не работает (вероятно, проблема в типе текста).

Я пробовал много способов исправить это, например: используя PutMapping, создавая main. js с простым кодом, поиск ответов в Inte rnet (конечно), но все равно не может найти. Так что, если вы можете просто взглянуть на мой код и увидеть, в чем проблема, я был бы очень благодарен!

На данный момент я могу добавлять пользователей с помощью @RequestMapping в Spring Boot, а также удалять их с помощью Spring Boot и пытаюсь отредактировать их с помощью JS (возможно, но я думаю, что лучше использовать Spring Boot, не знаю как). А также я хочу изменить значение кнопки «Редактировать» на «Сохранить» при редактировании пользователя, используя JS.

Большое спасибо!

Вот мой контроллер и HTML.

Контроллер: 

import org.springframework.http.ResponseEntity;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.validation.BindingResult;
import org.springframework.web.bind.annotation.*;

import model.User;
import repository.UserRepository;
import service.UserValidator;

import java.util.Optional;


@Controller
public class UserController {

    private final UserRepository userRepository;
    private final UserValidator userValidator;

    public UserController(UserRepository userRepository, UserValidator userValidator) {
        this.userRepository = userRepository;
        this.userValidator = userValidator;
    }


    @RequestMapping(value = "/", method = {RequestMethod.GET, RequestMethod.POST})
    public String findAll(@ModelAttribute("addUser") User user, Model model, BindingResult bindingResult) {
        model.addAttribute("user", userRepository.findAll());
        model.addAttribute("addUser", user);
        String firstName = user.getFirstName();
        String lastName = user.getLastName();
        String phoneNumber = user.getPhoneNumber();
        String email = user.getEmail();
        userValidator.validate(user, bindingResult);
        if (bindingResult.hasErrors()){
            return "users";
        }
        user = new User(firstName.substring(0,1).toUpperCase()+firstName.substring(1),
                lastName.substring(0,1).toUpperCase()+lastName.substring(1),
                phoneNumber, email);
        userRepository.save(user);
        return "redirect:/";
    }

    @GetMapping("/user-delete/{id}")
    public String deleteUser(@PathVariable("id") Long id) {
        userRepository.deleteById(id);
        return "redirect:/";
    }

//    @RequestMapping(value = "/user-update/{id}", method = RequestMethod.PUT)
//    public ResponseEntity<User> updateUser(@PathVariable (value = "id") Long id, @RequestParam(required = false) String firstName,
//                                           @RequestParam(required = false) String lastName,
//                                           @RequestParam(required = false) String phoneNumber,
//                                           @RequestParam(required = false) String email){
//       Optional<User> user = userRepository.findById(id);
//           User u = user.get();
//               u.setFirstName(firstName);
//               u.setLastName(lastName);
//               u.setPhoneNumber(phoneNumber);
//               u.setEmail(email);
//           User updatedUser = userRepository.save(u);
//           return ResponseEntity.ok(updatedUser);
//    }
}

HTML -страница «пользователи» 

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<http pattern="/**" security="none"/>
<head>
    <meta charset="UTF-8">
    <title>Users</title>
    <style type="text/css">
        .tg {
            border-collapse: collapse;
            border-spacing: 0;
            border-color: #ccc;
        }

        .tg td {
            font-family: Arial, sans-serif;
            font-size: 14px;
            padding: 10px 5px;
            border-style: solid;
            border-width: 1px;
            overflow: hidden;
            word-break: normal;
            border-color: #ccc;
            color: #333;
            background-color: #fff;
        }

        .tg th {
            font-family: Arial, sans-serif;
            font-size: 14px;
            font-weight: normal;
            padding: 10px 5px;
            border-style: solid;
            border-width: 1px;
            overflow: hidden;
            word-break: normal;
            border-color: #ccc;
            color: #333;
            background-color: #f0f0f0;
        }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>

<h1>Users</h1>
<br/><br/>
<div>
    <table class="tg" id="table">
        <tr> <form action="#" th:action="@{/}" th:object="${addUser}" method = "POST">
            <td></td>
            <td> <input type="text" th:field="*{firstName}" pattern="^[a-zA-Z]+$"/></td>
            <td> <input type="text" th:field="*{lastName}" pattern="^[a-zA-Z+$"/></td>
            <td> <input type="text" th:field="*{phoneNumber}" pattern="^[0-9]+$" minlength="11" maxlength="11" /></td>
            <td> <input type="text" th:field="*{email}" pattern="^[\w-\.]+@[\w-]+\.[a-z]{2,4}$"/></td>
            <td><input type="submit" value="Add"/></td></form>
        </tr>
            <tr>
                <th width="80">ID</th>
                <th width="120">First Name</th>
                <th width="120">Last Name</th>
                <th width="120">Phone Number</th>
                <th width="150">Email</th>
                <th width="60">Edit</th>
                <th width="60">Delete</th>
            </tr>
            <tr  th:each ="user : ${user}">
                    <td th:utext="${user.id}" id="id" ></td>
                    <td th:utext="${user.firstName}" id="firstName" th:class ="editable"></td>
                    <td th:utext="${user.lastName}" id="lastName" th:class ="editable"></td>
                    <td th:utext="${user.phoneNumber}" id="phoneNumber" th:class ="editable"></td>
                    <td th:utext="${user.email}" id="email" th:class ="editable"></td>
                <td><button id="editBtn" type="button" onclick="Edit(id)">Edit</button></td>
                <script type="text/javascript">
                        function Edit(id){
                            let button = document.getElementById('editBtn');
                            button.innerText = "Save";
                        let table = document.getElementById('table'); 
                        let tr = id.parentNode.parentNode; 
                        tr.style.backgroundColor = 'yellow';                      
                           table.currentLine = tr;

                        document.getElementById('firstName').value = tr.childNodes[0].textContent;
                        document.getElementById('lastName').value = tr.childNodes[1].textContent;
                        document.getElementById('phoneNumber').value = tr.childNodes[2].textContent;
                        document.getElementById('email').value = tr.childNodes[3].textContent;
                            let firstName = document.getElementById('firstName').value; 
                            let lastName = document.getElementById('lastName').value;
                            let phoneNumber = document.getElementById('phoneNumber').value;
                            let email = document.getElementById('email').value;

                            tr = table.currentLine;
                            tr.childNodes[0].textContent = firstName;
                            tr.childNodes[1].textContent = lastName;
                            tr.childNodes[2].textContent = phoneNumber;
                            tr.childNodes[3].textContent = email;
                            button.innerText = "Edit";
                    }
                </script>
                <td><a th:href="@{/user-delete/{id}(id=${user.id})}" class="btn btn-success btn-sm pull-left">Delete</a></td>
                </tr>

        </table>
</div>
</body>
</html>
...