品优购项目对接

首页搜索页详情页购物车确认订单页

首页和搜索页的对接

页面跳转 location.href ，使用 angularjs 的 $location 服务进行参数传递。

$scope.search = function () {
    if($scope.keywords.trim().length > 0){
        location.href = "http://localhost:9104/search.html#?keywords=" + $scope.keywords;
    }
}

app.controller('itemSearchController', function ($scope, $location) {
    $scope.loadkeywords = function(){
        //获取查询参数
        $scope.searchMap.keywords = $location.search().keywords;
        $scope.search();
    }
};

搜索页和详情页对接

用户点击搜索到的商品，超链接跳转 a 标签 到对应的商品详情页。

<a href="http://localhost:9105/{{pojo.goodsId}}.html" target="_blank"><img ng-src="pojo.image" /></a>

详情页和购物车对接

详情页用户点击 加入购物车 ，异步发送跨域请求，将商品添加到购物车。获取添加结果，成功则 location.href 跳转到购物车页面，失败则给出提示。跨域方案使用 CORS 。

//加入购物车
$scope.addToCart = function(){
    $http.get("http://localhost:9107/cart/addGoodsToCartList.do?itemId=" + $scope.sku.id +"&num=" + $scope.orderCount, {withCredentials:true}).success(
        function (response) {
            if(response.success){
                location.href = "http://localhost:9107/cart.html";
            }else{
                alert(response.message);
            }
        }
    );
};

@Autowired
private HttpServletResponse response;

// springMVC >= 4.2 可以使用 @CrossOrigin 注解实现跨域
@CrossOrigin(origins = "http://localhost:9105", allowCredentials = "true")

response.setHeader("Access-Control-Allow-Origin", "http://localhost:9105");
response.setHeader("Access-Control-Allow-Credentials", "true");

购物车和确认订单页对接

购物车点击 去结算 ，超链接直接跳转到确认订单页，然后在确认订单页进行收获地址和订单商品的查询。

<a class="sum-btn" href="getOrderInfo.html" target="_blank">结算</a>

ng-init="findAddressList();findCartList();"

确认订单页和支付页对接

确认订单页点击 提交订单 ，请求购物车后台添加订单，购物车后台调用订单服务添加订单。并返回结果，前台根据响应结果进行页面跳转。location.href 到支付页。

//提交订单
$scope.submitOrder = function () {
    $scope.order.receiver = $scope.address.contact;
    $scope.order.receiverAreaName = $scope.address.address;
    $scope.order.receiverMobile = $scope.address.mobile;

    cartService.submitOrder($scope.order).success(
        function (response) {
            if(response.success){
                //跳转到支付页
                if($scope.order.paymentType == "1"){//微信
                    location.href="pay.html";
                }else{//货到付款，跳转到相应页面
                    location.href="paysuccess.html";
                }
            }else{
                alert(response.message);
            }
        }
    );
};

// cartService.js
this.submitOrder = function (order) {
    return $http.post("/order/add.do", order);
};

来源：https://www.cnblogs.com/mozq/p/11729826.html

标签

response

localhost

购物车