Thymeleaf - Построение URL на основе данных формы

Question

В настоящее время я пишу веб-приложение для электронной коммерции и работаю над функцией добавления в корзину.

При добавлении в корзину создается запрос на публикацию, который отправляет данные в корзину пользователя. , Я хочу знать, есть ли лучший способ написать это (как поместить данные формы в URL).

Когда кто-то нажимает добавить в корзину, он должен отправить запрос на публикацию, основанную на текущем вошедшем в систему пользователе. (с пружинной защитой) в URL этого типа: / cart / {productId} / {amount} - тогда он будет добавлен в корзину пользователя.

Код Thymeleaf:

    <div th:each="product : ${popularProducts}">
<form action="#" th:action="@{/cart/} + ${product.getId() + @{/} + ${quantity}" th:object="${product}" method="POST">
  <div class="card">
    <img class="card-img" th:src="${product.getPictureUrl()}">
      <a href="#" class="card-link text-danger like">
        <i class="fas fa-heart"></i>
      </a>
    </div>
    <div class="card-body">
      <h4 class="card-title"  th:text="${product.getName()}"></h4>
      <h6 class="card-subtitle mb-2 text-muted"  th:text="${product.getCategory()}"></h6>
      <p class="card-text" th:text="${product.getDescription()}">
      <div class="buy d-flex justify-content-between align-items-center">
        <div class="price text-success"><h5 class="mt-4" th:text="'$' + ${product.getPrice()}"></h5></div>
        <div class="form-group blu-margin">
         <div class="form-label-group">
              <input th:field="*{quantity}" type="text" id="quantity" name="quantity" class="form-control" placeholder="1" required="required">
           </div>
        </div>
         <a href="#" class="btn btn-danger mt-3"><i class="fas fa-shopping-cart"></i> Add to Cart</a>
      </div>
    </div>
    </form>

CartController:

@PostMapping("/cart/{productId}/{quantity}")
public void addProduct(@PathVariable String productId, @PathVariable String quantity, Model model) {
    Object principal = SecurityContextHolder.getContext().getAuthentication().getPrincipal();
    User user = ((User) principal);

    if (productService.findById(Long.parseLong(productId)) != null) {
        Optional<Product> product = productService.findById(Long.parseLong(productId));
        int quantityAmount = Integer.parseInt(quantity);
        user.getCart().getCartItems().add(new CartItems(product.get(), quantityAmount,
                product.get().getPrice() * quantityAmount, user.getCart()));
    }

    List<CartItems> itemsInCart = user.getCart().getCartItems();
    int numItems = itemsInCart.size() + 1;

    model.addAttribute("amountOfItems", numItems);

}

Класс продукта:

@Table(name = "products")
public class Product {

@Id
@GeneratedValue(strategy = GenerationType.IDENTITY)
@Column(name = "product_id")
private Long id;

@Column(name = "name")
private String name;

@Column(name = "category")
private String category;

@Column(name = "description")
private String description;

@Column(name = "price")
private Double price;

@Column(name = "stock")
private int stock;

@Column(name = "picture_url")
private String pictureUrl;

public Product() {

}

public Product(String name, String category, String description, Double price, int stock, String pictureUrl) {
    this.name = name;
    this.category = category;
    this.description = description;
    this.price = price;
    this.stock = stock;
    this.pictureUrl = pictureUrl;
}
// and getters/setters...

Класс CartItems:

@Table(name = "cartitems")
public class CartItems implements Serializable {

private static final long serialVersionUID = -3426230490106082532L;

@Id
@GeneratedValue(strategy = GenerationType.AUTO)
private int id;

@Column(name = "quantity")
private int quantity;

@Column(name = "price")
private double price;

@OneToOne
@JoinColumn(name = "product_id")
private Product product;

@ManyToOne
@JoinColumn(name = "cart_id")
private Cart cart;

public CartItems() {

}

public CartItems(Product product, int quantity, double price, Cart cart) {
    this.quantity = quantity;
    this.price = price;
    this.product = product;
    this.cart = cart;
}
// all getters and setters..

Answer 1

URL Thymeleaf с использованием данных формы

как поместить данные формы в URL?

Невозможно создать URL Thymeleaf, используя данные, введенные пользователем в веб-форме. Thymeleaf - это препроцессор HTML на стороне сервера. Он использует данные, уже имеющиеся на сервере, для «заполнения пробелов» в шаблоне Thymeleaf. Полученный HTML затем отправляется с сервера в браузер. В этот момент в браузере нет Thymeleaf.

Использование данных POST

Вы вправе использовать операцию http POST для данных формы. Это означает, что все предоставленные пользователем данные будут отправлены на сервер в теле запроса, как я уверен, вы уже знаете.

Как правило, не стоит добавлять такие данные в URL. Вы можете сделать это, используя JavaScript на стороне клиента - но это плохая идея по разным причинам - не в последнюю очередь это: URL-адреса могут быть добавлены в закладки, сохранены и легко воспроизведены. Данные формы обычно представляют транзакцию. Вы не хотите повторно отправлять большинство транзакций таким способом (повторяющиеся заказы и т. Д. c.). Некоторое фоновое чтение: здесь .

Итак, используйте более общий c URL, а затем извлеките данные формы из тела запроса. В любом случае данные в теле в основном совпадают с данными, которые вы пытаетесь добавить в URL.

URL-адреса Thymeleaf - в целом

Последнее замечание: только для дальнейшего использования и , не относящиеся непосредственно к этому параметру c URL , по причинам, уже упомянутым выше ...

Вместо использования этого:

"@{/cart/} + ${product.getId() + @{/} + ${quantity}"

... ссылка должна быть создана следующим образом:

"@{/cart/{id}/{qty}(id=${product.id},qty=${quantity})}"

В этом примере {id} является заполнителем (называйте его как хотите), который получает свое значение из параметра в скобках ():

id=${product.id}

И те же пункты относятся к {qty}.

Кроме того, вам не нужно использовать геттеры, такие как getId() напрямую. Используйте имя поля id. Thymeleaf будет обрабатывать вызов соответствующего получателя (при условии, что он определен правильно).

См. Документацию для Thymeleaf URL-ссылки .