我有一个预订应用程序，它使用jpa将票存储在h2数据库中。当有人预订座位时，下一个人的复选框应该处于非活动/禁用状态，因为现在你可以一次又一次地预订座位——用户应该看到一些座位已经预订好了。。如何解决这个问题？我必须在reservation-seat.html中添加一些内容吗？
reservation-seat.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Movies</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container my-2">
<div class="card">
<div class="card-body">
<div class="container my-5">
<h1 th:text="${movieName}"> Movie Name</h1>
<form th:action="@{'/reservation/save/' + ${repertoireId}}" th:object="${seatInfo}" method="post">
<div class="seatStructure">
<center>
<table id="seatsBlock">
<p id="notification"></p>
<tr>
<td colspan="14">
<div class="screen">SCREEN</div>
</td>
<br/>
</tr>
<tr>
<td></td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td></td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
<tr>
<td>A</td>
<td><input th:field="*{seatReservation.seat}" type="checkbox" class="seats" value="A1"></td>
<td><input th:field="*{seatReservation.seat}" type="checkbox" class="seats" value="A2"></td>
<td><input th:field="*{seatReservation.seat}" type="checkbox" class="seats" value="A3"></td>
<td><input th:field="*{seatReservation.seat}" type="checkbox" class="seats" value="A4"></td>
<td><input th:field="*{seatReservation.seat}" type="checkbox" class="seats" value="A5"></td>
<td class="seatGap"></td>
<td><input th:field="*{seatReservation.seat}" type="checkbox" class="seats" value="A6"></td>
<td><input th:field="*{seatReservation.seat}" type="checkbox" class="seats" value="A7"></td>
<td><input th:field="*{seatReservation.seat}" type="checkbox" class="seats" value="A8"></td>
<td><input th:field="*{seatReservation.seat}" type="checkbox" class="seats" value="A9"></td>
<td><input th:field="*{seatReservation.seat}" type="checkbox" class="seats" value="A10"></td>
<td><input th:field="*{seatReservation.seat}" type="checkbox" class="seats" value="A11"></td>
<td><input th:field="*{seatReservation.seat}" type="checkbox" class="seats" value="A12"></td>
</tr>
</table>
<input type = "hidden" th:value="${movieName}">
<input type = "hidden" th:value="${repertoireId}">
</br>
<button type="submit">Order.</button>
</center>
</div>
</form>
<br/><br/>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
ReserveController.java
@Controller
// @Transactional
public class ReservationController {
TicketRepo ticketRepo;
ReservationRepo reservationRepo;
AppUserRepo appUserRepo;
MovieRepo movieRepo;
RepertoireRepo repertoireRepo;
@Autowired
public ReservationController(TicketRepo ticketRepo, ReservationRepo reservationRepo, AppUserRepo appUserRepo,
MovieRepo movieRepo, RepertoireRepo repertoireRepo) {
this.ticketRepo = ticketRepo;
this.reservationRepo = reservationRepo;
this.appUserRepo = appUserRepo;
this.movieRepo = movieRepo;
this.repertoireRepo = repertoireRepo;
}
@GetMapping("/movies/{movieName}/reservation")
public String reservationPage(Model model, @PathVariable ("movieName") String movieName) {
Movie movie = movieRepo.findByTitle(movieName);
List<Repertoire> repertoires = repertoireRepo.findByMovieId(movie.getId());
// model.addAttribute("seat", new SeatReservation());
// model.addAttribute("movieName", movirepertoireseName);
model.addAttribute("repertoires", repertoires);
return "reservation";
}
@GetMapping("/movies/{movieName}/reservation/{repertoireId}")
public String reservationSeatPage(Model model, @PathVariable("movieName") String movieName,
@PathVariable("repertoireId") Long repertoireId) {
Testing testing1 = new Testing();
testing1.setSeatReservation(new SeatReservation());
model.addAttribute("seatInfo", testing1);
model.addAttribute("movieName", movieName);
model.addAttribute("repertoireId", repertoireId);
return "reservation-seat";
}
@PostMapping("/reservation/save/{repertoireId}")
public String reserve(@ModelAttribute ("seatInfo") Testing testing, Principal principal,
@ModelAttribute("repertoireId") Long repertoireId) {
UUID uuid = UUID.randomUUID();
Ticket ticket = new Ticket();
ticket.setSeat(testing.getSeatReservation().getSeat());
ticket.setPrice(20);
ticket.setUuid(uuid);
ticketRepo.save(ticket);
Reservation reservation = new Reservation();
reservation.setTicket(ticketRepo.findByUuid(uuid).get());
Repertoire repertoire = repertoireRepo.findById(repertoireId).get();
reservation.setMovie(movieRepo.findByTitle(repertoire.getMovie().getTitle()));
reservation.setRepertoire(repertoire);
reservation.setAppUser(appUserRepo.findByUsername(principal.getName()));
reservationRepo.save(reservation);
return "redirect:/movies/list";
}
}
SeatReserve.java
import lombok.Data;
@Data
public class SeatReservation {
private String seat;
private boolean active;
public boolean isActive() {
return active;
}
}
测试.java
import lombok.Data;
@Data
public class Testing {
private SeatReservation seatReservation;
private Long id;
private String string;
private boolean active;
public boolean isActive() {
return active;
}
}
Ticket.java
import lombok.Data;
import javax.persistence.*;
import java.util.UUID;
@Data
@Entity
public class Ticket {
@GeneratedValue(strategy = GenerationType.IDENTITY)
@Id
@Column(name = "id")
private Long id;
private UUID uuid;
private String seat;
private Integer price;
public Ticket() {
}
}
我已经做过类似的工作，所以将发布我的方法。
我使用ajax提交以发布座位预订信息，如果响应成功，我将禁用单击的复选框。
正如您在评论部分所说，您希望在没有javascript的情况下实现这一点，然后选择下面的方法。
每次提交表单时，将已占用座位映射(座位id键、状态值(保存在模型属性中，然后通过检查座位id和状态(活动/非活动(来遍历映射，并根据标志禁用/未禁用呈现复选框。