Я новичок в 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>