用户不能有第二次输入的机会如果第一次输入错误的数据

Question

我有一个控制器可以向用户显示表单。用户获得该表单，例如，如果他输入了错误的数据，例如金额字段只是正数，但用户插入-1用户将在屏幕上得到错误消息，但当用户更改该值并输入例如3的金额和提交表单时，用户得到404Whitelabel Error Page。

第一个URL是:

http://localhost:8080/api/transaction/expenseTransaction/4，现在，用户输入-1金额并点击提交，URL是http://localhost:8080/api/transaction/saveExpense/4，所以有什么办法留在同一页面，并允许用户在插入正确的数据后保存表单?

我有这个控制器来显示表单:

@GetMapping("/expenseTransaction/{id}")
public String expenseTransaction(@PathVariable(value = "id") long id, Transaction transaction, Model model) {
Authentication authentication = SecurityContextHolder.getContext().getAuthentication();
UserDetailsImpl user = (UserDetailsImpl) authentication.getPrincipal();
long userId = user.getId();
model.addAttribute("userId", userId);

model.addAttribute("transaction", transaction);
model.addAttribute("expenseCategories", ExpenseCategories.values());
return "expense_transaction";
}

格式是:

<div class="container my-5">
<h3> Expense transaction</h3>
<div class="card">
<div class="card-body">
<div class="col-md-8">
<form action="#"
th:action="@{/api/transaction/saveExpense/{walletId} (walletId=${id})}"
th:object="${transaction}" method="post">
<div class="row">
<div class="form-group col-md-6">
<label for="amount" class="col-form-label">Amount</label> <input
type="text" th:field="*{amount}" class="form-control" id="amount"
placeholder="amount"> <span
th:if="${#fields.hasErrors('amount')}" th:errors="*{amount}"
class="text-danger"></span>
</div>
<div class="form-group col-md-8">
<label for="note" class="col-form-label">Note</label> <input
type="text" th:field="*{note}" class="form-control" id="note"
placeholder="note"> <span
th:if="${#fields.hasErrors('note')}" th:errors="*{note}"
class="text-danger"></span>
</div>
<div class="form-group col-md-8">
<label for="date" class="col-form-label">Date</label> <input
type="date" th:field="*{date}" class="form-control"
id="date" placeholder="date"> <span
th:if="${#fields.hasErrors('date')}" th:errors="date"
class="text-danger"></span>
</div>
<div class="form-group col-md-8">
<label for="date" class="col-form-label">Category</label>
<select th:field="${transaction.expenseCategories}">
<option value="0">Select expense category</option>
<option
th:each="expenseCategories : ${expenseCategories}"
th:value="${expenseCategories}"
th:text="${expenseCategories.displayName}"
></option>
</select>
</div>
<div class="form-group col-md-8">
<input type="submit" class="btn btn-primary"
value="Update Student">
</div>
</div>
</form>
</div>
</div>
</div>

这是保存表单的控制器:

@PostMapping("/saveExpense/{walletId}")
public String saveExpense(@PathVariable(value = "walletId") long walletId,
@Valid Transaction transaction, BindingResult result, Model model) {
Authentication authentication = SecurityContextHolder.getContext().getAuthentication();
UserDetailsImpl user = (UserDetailsImpl) authentication.getPrincipal();
long userId = user.getId();
Wallet wallet = walletService.getWalletById(walletId);
boolean thereAreErrors = result.hasErrors();
if (thereAreErrors) {
transaction.setId(walletId);
model.addAttribute("expenseCategories", ExpenseCategories.values());
return "expense_transaction";
}
transaction.setWallet(wallet);
transactionService.saveExpense(transaction, walletId, userId);
return "redirect:/api/wallet/userWallet/balance/" + userId;
}

Answer 1

问题出在你的代码上。

get方法是用@GetMapping("/expenseTransaction/{id}")定义的，POST方法是用@PostMapping("/saveExpense/{walletId}")定义的。

GET方法将在模型中公开一个名为id的变量，并用路径变量的值填充该变量。

你的POST方法将在你的模型中公开一个名为walletId的变量，并用路径变量的值填充它。

在th:action中，您希望id被填充。这对于GET是正确的，而对于POST不是，因为名称不同。

要么修复您的路径变量名，要么显式地将id添加到POST方法中的模型中，并使用walletId的值。