Question

我正在尝试制作简单的网上商店应用程序，但我在处理向购物车添加商品时遇到问题。我想使用角度js添加项目。一切似乎都没问题，“addToCart”方法成功，“产品已成功添加到购物车！”警报。但是车里什么都没有。

浏览器控制台中还有声明：

angular.min.js：96 GET http://localhost:8080/rest/cart/F976565EA460D3FDB0125FA7FAF868E3 400 （）

其中F976565EA460D3FDB0125FA7FAF868E3为cartId

REST控制器：

@Controller
@RequestMapping(value = "rest/cart")
public class CartRestController {

@Autowired
private CartService cartService;

@Autowired
private ProductService productService;


/**
 * POST - Creates new Cart object
 * GET - Sends new Cart object with id = cartId
 * PUT - Updates Cart object with id = cartId
 * DELETE - Delete Cart object with id  = cartId
 */

@RequestMapping(method = RequestMethod.POST)
public @ResponseBody Cart create(@RequestBody Cart cart){
    System.out.println("Kontroler create");
    return cartService.create(cart);}


@RequestMapping(value = "/{cartId}", method = RequestMethod.GET)
public @ResponseBody Cart read(@PathVariable(value = "cartId") String cartId)
{

    System.out.println("Kontroler read");

    return cartService.read(cartId);
}

@RequestMapping(value = "/{cartId}", method = RequestMethod.PUT)
@ResponseStatus(value = HttpStatus.NO_CONTENT)
public void update(@PathVariable(value = "cartId") String cartId, @RequestBody Cart cart){
    System.out.println("Kontroler update");

    cartService.update(cart,cartId);
}

@RequestMapping(value = "/{cartId}", method = RequestMethod.DELETE)
@ResponseStatus(value = HttpStatus.NO_CONTENT)
public void delete(@PathVariable(value = "cartId") String cartId){
    System.out.println("Kontroler delete");

    cartService.delete(cartId);
}


@RequestMapping(value = "/add/{productId}", method = RequestMethod.PUT)
@ResponseStatus(value = HttpStatus.NO_CONTENT)
public void addItem(@PathVariable Integer productId, HttpServletRequest request)
{
    String sessionId = request.getSession().getId();
    Cart cart = cartService.read(sessionId);
    if(cart== null)
    {
        cart = cartService.create(new Cart(sessionId));
    }
    Product product = productService.findById(productId);
    if(product == null)
    {
        throw new IllegalArgumentException();
    }
    cart.addItemToCart(new Item(product));
    cartService.update(cart, sessionId);
}
@RequestMapping(value = "/remove/{productId}", method = RequestMethod.PUT)
@ResponseStatus(value = HttpStatus.NO_CONTENT)
public void removeItem(@PathVariable Integer productId, HttpServletRequest request)
{
    System.out.println("Kontroler remove item");

    String sessionId = request.getSession().getId();
    Cart cart = cartService.read(sessionId);
    if(cart== null)
    {
        cart = cartService.create(new Cart(sessionId));
    }
    Product product = productService.findById(productId);
    if(product == null)
    {
        throw new IllegalArgumentException();
    }
    cart.removeItem(new Item(product));
    cartService.update(cart, sessionId);
}
@ExceptionHandler(IllegalArgumentException.class)
@ResponseStatus(value = HttpStatus.BAD_REQUEST, reason="Incorrect request,     check request data")
public void handleClientErrors(Exception ex) { }
@ExceptionHandler(Exception.class)
@ResponseStatus(value = HttpStatus.INTERNAL_SERVER_ERROR, reason="Internal server error")
public void handleServerErrors(Exception ex) { }}

购物车模型类：

public class Cart {

private String cartId;
private Map<String, Item> products = new HashMap<String, Item>();
private BigDecimal totalValue = new BigDecimal(0);

public Cart(String cartId) {
    this.cartId = cartId;
}


public String getCartId() {
    return cartId;
}

public void setCartId(String cartId) {
    this.cartId = cartId;
}

public Map<String, Item> getProducts() {
    return products;
}

public void setProducts(Map<String, Item> products) {
    this.products = products;
}

public BigDecimal getTotalPrice() {
    return totalValue;
}

public void setTotalPrice(BigDecimal totalPrice) {
    this.totalValue = totalPrice;
}

@Override
public String toString() {
    return "CartDao{" +
            "cartId='" + cartId + '\'' +
            ", products=" + products +
            ", totalValue=" + totalValue +
            '}';
}
@Override
public boolean equals(Object o) {
    if (this == o) return true;
    if (o == null || getClass() != o.getClass()) return false;

    Cart cart = (Cart) o;

    if (cartId != null ? !cartId.equals(cart.cartId) : cart.cartId != null) return false;
    if (products != null ? !products.equals(cart.products) : cart.products != null) return false;
    return totalValue != null ? totalValue.equals(cart.totalValue) : cart.totalValue == null;

}
@Override
public int hashCode() {
    int result = cartId != null ? cartId.hashCode() : 0;
    result = 31 * result + (products != null ? products.hashCode() : 0);
    result = 31 * result + (totalValue != null ? totalValue.hashCode() : 0);
    return result;
}

public void addItemToCart(Item item) {
    String itemId = String.valueOf(item.getProduct().getId());

    if (products.containsKey(itemId)) {
        Item alreadyInCart = products.get(itemId);
        alreadyInCart.setQuantity(alreadyInCart.getQuantity() + item.getQuantity());
        products.put(itemId, alreadyInCart);
    } else {
        products.put(itemId, item);
    }
    updateTotalValue();
}

public void updateTotalValue() {
    totalValue = new BigDecimal(0);
    for (Item item : products.values()) {
        totalValue = totalValue.add(item.totalValue());
    }
}

public void removeItem(Item item){
    products.remove(item.getProduct().getId());
    updateTotalValue();

}

}

项目模型类：

public class Item {


private Product product;
private Integer quantity;


public Item(){
    this.quantity = 1;
}

public Item(Product product){
    this.quantity = 1;
    this.product = product;
}

public Item(Product product, Integer quantity){
    this.quantity = quantity;
    this.product = product;
}

public BigDecimal totalValue() {
    return this.product.getProductPrice().multiply(new BigDecimal(this.quantity));
}

public Product getProduct() {
    return product;
}

public void setProduct(Product product) {
    this.product = product;
}

public Integer getQuantity() {
    return quantity;
}

public void setQuantity(Integer quantity) {
    this.quantity = quantity;
}

@Override
public String toString() {
    return "Item{" +
            "product=" + product +
            ", quantity=" + quantity +
            '}';
}

@Override
public boolean equals(Object o) {
    if (this == o) return true;
    if (o == null || getClass() != o.getClass()) return false;

    Item item = (Item) o;

    if (product != null ? !product.equals(item.product) : item.product != null) return false;
    return quantity != null ? quantity.equals(item.quantity) : item.quantity == null;

}

@Override
public int hashCode() {
    int result = product != null ? product.hashCode() : 0;
    result = 31 * result + (quantity != null ? quantity.hashCode() : 0);
    return result;
}
}

产品型号：

@Entity
@Table(name = "PRODUCT")
public class Product {

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

@Size(min = 4, max = 40, message = "{Size.Product.productName.validation}")
@Column(name = "PRODUCT_NAME")
private String productName;

@Min(value = 0,    message = "{Min.Product.productPrice.validation}")
@Digits(integer = 8,fraction = 2,message = "{Digits.Product.productPrice.validation}")
@NotNull(message = "{NotNull.Product.productPrice.validation}")
@Column(name = "PRODUCT_PRICE")
private BigDecimal productPrice;

@NotBlank(message = "{NotBlank.Product.productDescription.validation}")
@Column(name = "PRODUCT_DESCRIPTION")
private String productDescription;

@NotNull(message = "NotNull.Product.category.validation")
@ManyToOne(cascade = CascadeType.MERGE)
private Category category;

//    private MultipartFile productImage;

public Product() {
}

public Product(String productName, BigDecimal productPrice, String productDescription, Category category) {
    this.productName = productName;
    this.productPrice = productPrice;
    this.productDescription = productDescription;
    this.category = category;
}

public int getId() {
    return id;
}

public void setId(int id) {
    this.id = id;
}

public String getProductName() {
    return productName;
}

public void setProductName(String productName) {
    this.productName = productName;
}

public BigDecimal getProductPrice() {
    return productPrice;
}

public void setProductPrice(BigDecimal productPrice) {
    this.productPrice = productPrice;
}

public String getProductDescription() {
    return productDescription;
}

public void setProductDescription(String productDescription) {
    this.productDescription = productDescription;
}

public Category getCategory() {
    return category;
}

public void setCategory(Category category) {
    this.category = category;
}

@Override
public boolean equals(Object o) {
    if (this == o) return true;
    if (o == null || getClass() != o.getClass()) return false;

    Product product = (Product) o;

    if (id != product.id) return false;
    if (productName != null ? !productName.equals(product.productName) : product.productName != null) return false;
    if (productPrice != null ? !productPrice.equals(product.productPrice) : product.productPrice != null)
        return false;
    if (productDescription != null ? !productDescription.equals(product.productDescription) : product.productDescription != null)
        return false;
    return category != null ? category.equals(product.category) : product.category == null;

}

@Override
public int hashCode() {
    int result = id;
    result = 31 * result + (productName != null ? productName.hashCode() : 0);
    result = 31 * result + (productPrice != null ? productPrice.hashCode() : 0);
    result = 31 * result + (productDescription != null ? productDescription.hashCode() : 0);
    result = 31 * result + (category != null ? category.hashCode() : 0);
    return result;
}


@Override
public String toString() {
    return "Product{" +
            "id=" + id +
            ", productName='" + productName + '\'' +
            ", productPrice=" + productPrice +
            ", productDescription='" + productDescription + '\'' +
            ", category=" + category +
            '}';
}
}

购物车DAO：

@Repository("cartDao")
public class CartDaoImpl implements CartDao {


    private Map<String, Cart> listOfCarts;

    public CartDaoImpl() {
        listOfCarts = new HashMap<String, Cart>();
    }

    public Cart create(Cart cart) {
        if(listOfCarts.containsKey(cart.getCartId()))
        {
            throw new IllegalArgumentException(String.format("Can not create cart"
                    + "Cart with specified id (%) already exists.",cart.getCartId()));
        }
        listOfCarts.put(cart.getCartId(), cart);
        return cart;
    }

    public Cart read(String cartId) {
        return listOfCarts.get(cartId);
    }


    public void update(Cart cart, String cartId) {
        if(!listOfCarts.containsKey(cartId))
        {
            throw new IllegalArgumentException(String.format("Can not update cart. "
                    + "Cart with specified id (%) does not exists.",cartId));
        }
        listOfCarts.put(cartId, cart);
    }

    public void delete(String cartId) {
        if(!listOfCarts.containsKey(cartId))
        {
            throw new IllegalArgumentException(String.format("Can not update cart. "
                    + "Cart with specified id (%) does not exists.",cartId));
        }
        listOfCarts.remove(cartId);
    }
}

Controller.js

var cartApp = angular.module('cartApp', []);

cartApp.controller('cartCtrl',  function ($scope, $http) {

    $scope.refreshCart = function(cartId) {

        $http.get('/rest/cart/'+$scope.cartId)
            .success(function(data) {
                $scope.cart = data;
            });
    };

    $scope.clearCart = function() {

        $http.delete('/rest/cart/'+$scope.cartId)
            .success($scope.refreshCart($scope.cartId));

    };

    $scope.initCartId = function(cartId) {

        $scope.cartId=cartId;
        $scope.refreshCart($scope.cartId);
    };

    $scope.addToCart = function(productId) {
        $http.put('/rest/cart/add/'+productId)
            .success(function(data) {

                $scope.refreshCart($http.get('/rest/cart/get/cartId'));
                alert("Product has been succesfully added to cart!");
            });
    };
    $scope.removeFromCart = function(productId) {


        $http.put('/rest/cart/remove/'+productId)
            .success(function(data) {
                $scope.refreshCart($http.get('/rest/cart/get/cartId'));
            });
    };
});

cart.jsp

<%@page pageEncoding="UTF-8" contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link rel="stylesheet"
          href="<c:url value="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"/>">

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>
    <script src="<c:url value="/resources/js/controllers.js"/>"></script>

    <title>Cart</title>
</head>
<section class="container" ng-app="cartApp">
    <div ng-controller="cartCtrl" ng-init="initCartId('${cartId}')" class="col-md-5">

        <div>
            <a class="btn btn-danger pull-left"
               ng-click="clearCart()"> <span
                    class="glyphicon glyphicon-remove-sign"></span> Erase Cart
            </a> <a href="<spring:url value="/checkout?cartId=${cartId}"/>" class="btn btn-success pull-right"> <span
                class="glyphicon-shopping-cart glyphicon"></span> Confirm
        </a>
        </div>
        <table class="table table-hover">
            <tr>
                <th>Product</th>
                <th>Unit price</th>
                <th>Quantity</th>
                <%--<th>Total price</th>--%>
                <th>Action</th>
            </tr>
            <tr ng-repeat="item in cart.products">
                <td>{{item.product.id}}-{{item.product.productName}}</td>
                <td>{{item.product.productPrice}}</td>
                <td>{{item.quantity}}</td>
                <%--<td>{{item.totalPrice}}</td>--%>
                <td><a href="#" class="label label-danger" ng-click="removeFromCart(item.product.id)">
                    <span class="glyphicon glyphicon-remove" ></span> Delete
                </a></td>
            </tr>
            <tr>
                <th></th>
                <th></th>
                <th>Total</th>
                <th>{{cart.totalValue}} PLN</th>
                <th></th>
            </tr>
        </table>

        <a href="<spring:url value="/products" />" class="btn btn-default">
            <span class="glyphicon-hand-left glyphicon"></span> Continue shopping
        </a>
    </div>
</section>
</html>


<%--&lt;%&ndash;--%>
  <%--Created by IntelliJ IDEA.--%>
  <%--User: artur--%>
  <%--Date: 31.08.2016--%>
  <%--Time: 22:22--%>
  <%--To change this template use File | Settings | File Templates.--%>
<%--&ndash;%&gt;--%>
<%--<%@ page contentType="text/html;charset=UTF-8" language="java" %>--%>
<%--<html>--%>
<%--<head>--%>
    <%--<title>Cart</title>--%>
<%--</head>--%>
<%--<body>--%>

<%--<div class="container">--%>
    <%--<div class="row">--%>
        <%--<div class="col-xs-8">--%>
            <%--<div class="panel panel-info">--%>
                <%--<div class="panel-heading">--%>
                    <%--<div class="panel-title">--%>
                        <%--<div class="row">--%>
                            <%--<div class="col-xs-6">--%>
                                <%--<h5><span class="glyphicon glyphicon-shopping-cart"></span> Shopping Cart</h5>--%>
                            <%--</div>--%>
                            <%--<div class="col-xs-6">--%>
                                <%--<button type="button" class="btn btn-primary btn-sm btn-block">--%>
                                    <%--<span class="glyphicon glyphicon-share-alt"></span> Continue shopping--%>
                                <%--</button>--%>
                            <%--</div>--%>
                        <%--</div>--%>
                    <%--</div>--%>
                <%--</div>--%>
                <%--<div class="panel-body">--%>
                    <%--<div class="row">--%>
                        <%--<div class="col-xs-2"><img class="img-responsive" src="http://placehold.it/100x70">--%>
                        <%--</div>--%>
                        <%--<div class="col-xs-4">--%>
                            <%--<h4 class="product-name"><strong>Product name</strong></h4><h4><small>Product description</small></h4>--%>
                        <%--</div>--%>
                        <%--<div class="col-xs-6">--%>
                            <%--<div class="col-xs-6 text-right">--%>
                                <%--<h6><strong>25.00 <span class="text-muted">x</span></strong></h6>--%>
                            <%--</div>--%>
                            <%--<div class="col-xs-4">--%>
                                <%--<input type="text" class="form-control input-sm" value="1">--%>
                            <%--</div>--%>
                            <%--<div class="col-xs-2">--%>
                                <%--<button type="button" class="btn btn-link btn-xs">--%>
                                    <%--<span class="glyphicon glyphicon-trash"> </span>--%>
                                <%--</button>--%>
                            <%--</div>--%>
                        <%--</div>--%>
                    <%--</div>--%>
                    <%--<hr>--%>
                    <%--<div class="row">--%>
                        <%--<div class="col-xs-2"><img class="img-responsive" src="http://placehold.it/100x70">--%>
                        <%--</div>--%>
                        <%--<div class="col-xs-4">--%>
                            <%--<h4 class="product-name"><strong>Product name</strong></h4><h4><small>Product description</small></h4>--%>
                        <%--</div>--%>
                        <%--<div class="col-xs-6">--%>
                            <%--<div class="col-xs-6 text-right">--%>
                                <%--<h6><strong>25.00 <span class="text-muted">x</span></strong></h6>--%>
                            <%--</div>--%>
                            <%--<div class="col-xs-4">--%>
                                <%--<input type="text" class="form-control input-sm" value="1">--%>
                            <%--</div>--%>
                            <%--<div class="col-xs-2">--%>
                                <%--<button type="button" class="btn btn-link btn-xs">--%>
                                    <%--<span class="glyphicon glyphicon-trash"> </span>--%>
                                <%--</button>--%>
                            <%--</div>--%>
                        <%--</div>--%>
                    <%--</div>--%>
                    <%--<hr>--%>
                    <%--<div class="row">--%>
                        <%--<div class="text-center">--%>
                            <%--<div class="col-xs-9">--%>
                                <%--<h6 class="text-right">Added items?</h6>--%>
                            <%--</div>--%>
                            <%--<div class="col-xs-3">--%>
                                <%--<button type="button" class="btn btn-default btn-sm btn-block">--%>
                                    <%--Update cart--%>
                                <%--</button>--%>
                            <%--</div>--%>
                        <%--</div>--%>
                    <%--</div>--%>
                <%--</div>--%>
                <%--<div class="panel-footer">--%>
                    <%--<div class="row text-center">--%>
                        <%--<div class="col-xs-9">--%>
                            <%--<h4 class="text-right">Total <strong>$50.00</strong></h4>--%>
                        <%--</div>--%>
                        <%--<div class="col-xs-3">--%>
                            <%--<button type="button" class="btn btn-success btn-block">--%>
                                <%--Checkout--%>
                            <%--</button>--%>
                        <%--</div>--%>
                    <%--</div>--%>
                <%--</div>--%>
            <%--</div>--%>
        <%--</div>--%>
    <%--</div>--%>
<%--</div>--%>


<%--</body>--%>
<%--</html>--%>

product.jsp

<%@page pageEncoding="UTF-8" contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@ taglib prefix="sec" uri="http://www.springframework.org/security/tags" %>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link href="<c:url value='/resources/css/bootstrap.css' />" rel="stylesheet"/>
    <%--<link href="<c:url value='https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js' />" rel="script"/>--%>
    <%--<link href="<c:url value='/resources/js/controllers.js' />" rel="script"/>--%>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>
    <script src="<c:url value="/resources/js/controllers.js"/>"></script>
    <title>Products</title>
</head>
<section class="container" ng-app="cartApp">
    <div class="row">
        <div class="col-md-5">
            <img src="<c:url value="/resources/img/product.jpg"/>" alt="image"  style = "width:100%"/>
        </div>

        <div class="col-md-5">
            <h3>${product.productName}</h3>
            <p>${product.productDescription}</p>
            <p>
                <strong>Product category: </strong><span class="label label-warning">${product.category.categoryName}</span>
            </p>


            <h4>$${product.productPrice} USD</h4>
            <p ng-controller="cartCtrl">
                <a href="#" class="btn btn-warning btn-large" ng-click="addToCart('${product.id}')">
                    <span class="glyphicon-shopping-cart glyphicon"></span> Order now
                </a>
                <a href="<spring:url value="/cart" />" class="btn btn-default">
                    <span class="glyphicon-hand-right glyphicon"></span> Cart
                </a>
                <sec:authorize access="hasRole('ADMIN')">
                    <a href="<spring:url value="edit/${product.id}" />" class="btn btn-default">
                        <span class="glyphicon-hand-right glyphicon"></span> Edit
                    </a>
                </sec:authorize>
                <a href="<spring:url value="/products" />" class="btn btn-default">
                    <span class="glyphicon-hand-left glyphicon"></span> Back
                </a>

            </p>

        </div>
    </div>
</section>
</html>

链接到git repository

Answer 1

似乎你需要检查你的js代码（我想你检查是否在UI上添加了购物车）

$scope.addToCart = function(productId) {
    $http.put('/rest/cart/add/'+productId)
        .success(function(data) {
            // here is the problem, you need to check what the $http.get return, supporse here should be the cartID as the parameter, or you need to update your refreshCart method which take the cart as the parameter
            $scope.refreshCart($http.get('/rest/cart/get/cartId'));
            alert("Product has been succesfully added to cart!");
        });
};

Answer 2

您没有将cartId传递给refreshCart函数，而是传递了 promise

    if (balance[index] == 0 && acctNum[index] != 0) {
    numaccts--;
    acctNum[index] = 0;//handles case when index is at the end
    for(int count=index;count<numaccts;count++){//start from hole, shift over from beyond there
        acctNum[count]=acctNum[count+1];
        balance[count]=balance[count+1];
    }
acctNum[numaccts]=0;
balance[numaccts]=0;
}

您的initCartId函数中已经存储了cartId：

$http.get('/rest/cart/get/cartId') //this isn't what you think it is...

改为使用此：

   $scope.cartId=cartId;

Spring和Angular JS。无法向HashMap添加新对象

2 个答案: