购物车Demo,前端使用AngularJS,后端使用ASP.NET Web API(2)--前端,以及前后端Session

 

chsakell分享了前端使用AngularJS,后端使用ASP.NET Web API的购物车案例,非常精彩,这里这里记录下对此项目的理解。


文章:
http://chsakell.com/2015/01/31/angularjs-feat-web-api/
http://chsakell.com/2015/03/07/angularjs-feat-web-api-enable-session-state/

 

源码:
https://github.com/chsakell/webapiangularjssecurity

 

本系列共三篇,本篇是第二篇。


购物车Demo,前端使用AngularJS,后端使用ASP.NET Web API(1)--后端
购物车Demo,前端使用AngularJS,后端使用ASP.NET Web API(2)--前端,以及前后端Session
购物车Demo,前端使用AngularJS,后端使用ASP.NET Web API(3)--Idetity,OWIN前后端验证

 

HomeController用来展示主页面,并接受前端传来的Order的编号。

 

public calss HomeCOntroller : Controller
{
    public ActionReuslt Index()
    {
        retun View();
    }
    
    public ActionResult ViewOrder(int id)
    {
        using(var context = new SotreContext())
        {
            //这时候Order的导航属性Gadgets还没有加载出来呢
            var order = context.Orders.Find(id);
            
            //根据Order编号获取中间表
            var gadgetOrders = context.GadgetOrders.Where(go => go.OrderID == id);
            
            foreach(GadgetOrder gadgetOrder in gadgetOrders)
            {
                //加载中间表某个记录中对应的导航属性
                context.Entry(gadgetOrder).Reference(g => g.Gadget).Load();
                order.Gadgets.Add(gadgetOrder.Gadget);
            }
            return View(order);
        }
    }
}

 

Home/Index.cshtml视图。

 

<html ng-app="gadgetsStore">
    ...
    <body ng-controller='gadgetStoreCtrl'>
        <div ng-hide="checkoutComplete()">
            <div ng-show="showFilter()">
                <form>
                    <input type="text" ng-model="searchItem">
                </form>
            </div>
            <cart-details></cart-details>
        </div>
        <div ng-show="data.error" ng-cloak>
            {{data.error.status}}
        </div>
        <ng-view />
        
        <script src="../../Scripts/angular.js" type="text/javascript"></script>
        <script src="../../Scripts/angular-route.js" type="text/javascript"></script>
        
        <script src="../../app/mainApp.js"></script>
        <script src="../../app/controllers/gadgetsStore.js" type="text/javascript"></script>
        <script src="../../app/filters/storeFilters.js" type="text/javascript"></script>
        <script src="../../app/controllers/gadgetsControllers.js" type="text/javascript"></script>
        <script src="../../app/components/cartCmp.js" type="text/javascript"></script>
        <script src="../../app/controllers/checkoutController.js" type="text/javascript"></
    </body>
</html>

 

以上,ng-hide="checkoutComplete()"决定着是否显示所在div,ng-show="data.error" 决定是否显示报错,<ng-view />根据路由显示不同视图,ng-cloak用来避免在切换视图时页面的闪烁,<cart-details></cart-details>是自定义的directive,和angularjs有关的js文件放在顶部,applicaiton相关js文件放在其下面,在mainApp.js文件中坐落着一个顶级module名称是gadgetStore,而顶级controller被放在了gadgetsStoreCtrl.js这个js文件中了。


最终的界面如下:

 

main.js 声明顶级module,以及配置路由。

 

angular.module("gadgetsStore", ["storeFilters", "storeCart", "ngRoute"])
    .config(function($routeProvider){
        $routeProvider.when("/gadgets",{templateUrl: "app/views/gadgets.html"});
        $routeProvider.when("/checkout",{templateUrl: "app/views/checkout.html"});
        $routeProvider.when("/submitorder",{templateUrl: "app/views/submitOrder.html"});
        $routeProvider.when("/complete",{templateUrl: "app/views/orderSubmitted.html"});
        $routeProvider.otherwise({templateUrl: "app/views/gadgets.html"});
    });

 

storeFilters, storeCart是我们自定义的,这里注入进来。

 

有了gadgetsStore这个module,现在就为这个module添加controller等。

 

angular.module('gadgetsStore')
    .constant('gadgetsUrl', 'http://localhost:8888/api/gadgets')
    .constant('ordersUrl', 'http://localhost:8888/api/orders')
    .constant('categoreisUrl', 'http://localhost:8888/api/categories')
    .controller('gadgetStore', function($scope, $http, $location, gadgetsUrl, categoresUrl, ordersUrl, cart){//因为gadgetsStore依赖引用了storeCart,所以这里可以引用cart
    
        //这里的data被用在主视图上,所以data的数据会被其它部分视图共享
        // $scope.data.gadgets
        // scope.data.erro
        // $scope.data.categories
        // $scope.data.OrderLocation
        // $scope.data.OrderID
        // $scope.data.orderError
        $scope.data = {};
        
        $http.get(gadgetsUrl)
            .success(function(data){
                $scope.data.gadgets = data;
            })
            .error(function(error){
                $scope.data.error = error;
            });
            
        $http.get(categoresUrl)
            .success(function(data){
                $scope.data.categories = data;
            })
            .error(function(error){
                $scope.data.error = error;
            });
            
        $scope.sendOrder = function(shippingDetails){
            var order = angular.copy(shippingDetails);
            order.gadgets = cart.getProducts();
            $http.post(ordersUrl, order)
                .success(function(data, status, headers, config){
                    $scope.data.OrderLocation = headers('Location');
                    $scope.data.OrderID = data.OrderID;
                    cart.getProducts().length = 0;
                })
                .error(function(error){
                    $scope.data.orderError = error;
                }).finally(function(){
                    $location.path("/complete");
                });
        }
        
        $scope.showFilter = function(){
            return $location.path() == '';
        }
        
        $scope.checkoutComplete = function(){
            return $location.path() == '/complete';
        }
    });

 

以上,为gadgetsStore这个module定义了常量以及controller。把一些规定的uri定义成某个moudule的常量是很好的习惯。通过$location.path方法可以获取或设置当前窗口的uri。

 

好了,顶级的module和顶级的controller有了,Gadget部分如何显示呢?

 

根据路由$routeProvider.when("/gadgets",{templateUrl: "app/views/gadgets.html"}), Gadget的视图被放在了app/views/gadgets.html中了,来看gadgets.html这个视图。

 

<div ng-controller="gadgetsCtrl" ng-hide="data.error">

    <!--左侧导航部分-->
    <div>
        <!--这里的selectCategory方法实际是把controller内部的一个变量selectedCategory设为null-->
        <a ng-click="selectCategory()">Home</a>
        <a ng-repeat="item in data.categoires | orderBy: 'CategoryID'" ng-click="selectCategory(item.CategoryID)" ng-class="getCategoryClass(item.CategoryID)">{{item.Name}}</a>
    </div>
    
    <!--右侧Gadgets部分-->
    <div>
        <div ng-repeat="item in data.gadgets | filter: categoryFilterFn | filter: searchItem | range:selectedPage:pageSize">
            {{item.Name}}
            {{item.Price | currency}}
            <img ng-src="../../images/{{item.Images}}" />
            {{item.Description}}
            
            <a ng-click="addProductToCart(item)">Add To Cart</a>
        </div>
        
        <!--分页部分-->
        <div>
            <a ng-repeat="page in data.gadgets | filter:categoryFilterFn | filter:searchItem | pageCount:pageSize" ng-click="selectPage($index + 1)" ng-class="getPageClass($index + 1)">
                {{$index + 1}}
            </a>
        </div>
    </div>
</div>

 


以上,把视图的来源交给了gadgetsCtrl这个controller, 这个controller也被定义在了gadgetsStore这个module中。

 

gadgetsCtr.js

 

angular.module("gadgetsStore")
    .constant("gadgetsActiveClass", 'btn-primary')
    .constant('gadgetsPageCount', 3)
    .controller("gadgetsCtrl", function($scope, $filter, gadgetsActiveClass, gadgetsPageCount, cart){
    
        //存储Category的主键CategoryID
        var selectedCategory = null;
        
        //这里是传给range和pageCount过滤器的
        $scope.selectedPage = 1;
        $scope.pageSise = gadgetsPageCount;
        
        //实际就是未selectedPage这个变量赋新值
        $scope.selectPage = function(newPage){
            $scope.selectedPage = newPage;
        }
        
        //这里把Category的编号CategoryID传了进来
        $scope.selecteCategory = function(newCategory)
        {
            $selectedCategory = newCategory;
            $scope.selectedPage = 1; 
        }
        
        //这里的product实际就是Gadget
        //过滤出Gadget的CategoryID和这里的selectedCateogory一致的那些Gadgets
        $scope.categoryFilterFn = fucntion(product){
            return selectedCategory == null || product.CategoryID == selectedCategory;
        }
        
        //category实际是Category的主键CategoryID
        $scope.getCategoryClass = function(category){
            return selectedCategory == category ? gadgetsActiveClass : "";
        }
        
        $scope.getPageClass = function(page){
            return $scope.selectedPage = page ? gadgetsActiveClass : "";
        }
        
        $scope.addProductToCart = function(product){
            cart.addProduct(product.GadgetID, product.Name, product.Price, product.CategoryID);
        }
    });

 

在显示Gadget列表的时候,<div ng-repeat="item in data.gadgets | filter: categoryFilterFn | filter: searchItem | range:selectedPage:pageSize">,这里用到了一个自定的过滤器range,这个过滤器被定义在了storeFilters.js中。

 

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

storeFitlers.filter("range", function($filter){
    return function(data, page, size){
        if(angular.isArray(data) && angular.isNumber(page) && angular.isNumber(size)){
            var start_index = (page - 1)*size;
            if(data.legnth < start_index){
                return [];
            } else {
                return $filter("limitTo")(data.splice(start_index), size);
            }
        } else{
            return data;
        }
    }
});

sortFilters.filter("pageCount", function(){
    return function(data, size){
        if(angular.isArray(data))
        {
            var result = [];
            for(var i = 0; i < Math.ceil(data.length/size); i++){
                result.push(i);
            }
        } else {
            return data;
        }
    }
});

 

再来看$routeProvider.when("/checkout",{templateUrl: "app/views/checkout.html"});这个路由,checkout.html这个部分视图如下:

 

<div ng-controller = "cartDetailsController">
    <div ng-show="cartData.length==0">
        no item in the shopping cart
    </div>
    <div ng-hide="cartData.length == 0">
        {{item.count}}
        {{item.Name}}
        {{item.Price | currency}}
        {{(item.Price * item.count) | currency}}
        <button ng-click="remove(item.GadgetID)"></button>
        {{total() | currency}}
        <a href="#">Continue shopping</a>
        <a href="#/submitorder">Place order now</a>
    </div> 
</div>

 

对应的界面如下:

 

 

cartDetailsController这个controller也被放在了顶级module里。如下:

 

 

angular.module("gadgetsStore")
    .controller("cartDetailsController", function($scope, cart){
        $scope.cartData = cart.getProducts();
        
        $scope.total = function(){
            var total  = 0;
            for(var i = 0; i < $scope.cartData.length;i++)
            {
                total += ($scope.cartData[i].Price * $scope.cartData[i].count);
            }
            return total;
        }
        
        $scope.remove = function(id){
            cart.removeProduct(id);
        }
    });

 

我们注意到,我们已经在多个地方注入cart这个服务 ,这个自定义的服务可以以factory的方式来创建,如果要用这个cart服务,它所在的module就要被其它module所引用。下面来创建cart服务:

 

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

storeCart.factory('cart', function(){
    var cartData = [];
    
    return {
        addProduct: function(id, name, price, category){
        
            //用来标记是否已经向购物车里加了产品
            var addedToExistingItem = false;
            for(var i=0; i < cartData.length;i++)
            {
                if(cartData[i].GadgetID == id){
                    cartData[i].count++;
                    addedToExistingItem = true;
                    break;
                }
            }
            if(!addedToExistingItem)
            {
                cartData.push({
                    count:1, GadgetID: id, Price: price, Name: name, CategoryID:category
                });
            }
        },
        removeProduct: function(id){
            for(var i = 0; i < cartData.legnth; i++){
                if(cartData[i].GadgetID == id){
                    cartData.splice(i, 1);
                    break;
                }
            }
        },
        getProducts:function(){
            return cartData;
        }
    
    };
});

 

关于购物车部分,我们还记得,在主视图用了<cart-details></cart-details>这个自定义的directive,实际也是在storeCart这个module中定义的。

 

sortCart.directive("cartDetails", function(cart){
    return {
        restrict: "E",
        templateUrl: "app/components.cartDetails.html",
        controller: function($scope){
            var cartData = cart.getProducts();
            
            $scope.total = function(){
                var total =0;
                for(var i = 0; i < cartData.legnth; i++){
                    total += (cartData[i].Price * cartData[i].count);
                }
                return total;
            }
            
            $scope.itemCount = function(){
                var total = 0;
                for(var i = 0; i < cartData.length; i++){
                    total += cartData[i].count;
                }
                return total;
            }
        }
    };
});

 

以上,对应的视图为:

 

Your cart: {{itemCount()}} items
{total() | currency}
<a href="#/checkout">Checkout</a>

 

在显示购物车明细的时候,给出了提交订单的链接:

<a href="#/submitorder">Place order now</a>

 

根据路由$routeProvider.when("/submitorder",{templateUrl: "app/views/submitOrder.html"}),是会加载app/views/submitOrder.html部分视图,界面如下:

 

 

对应的html为:

 

<form name="shippingForm" novalidate>
    <input name="companyName" ng-model="data.shipping.CompanyName" required />
    <span ng-show="shippingForm.companyName.$error.required"></span>
    
    <input name="name" ng-model="data.shipping.OwnerName" required />
    <span ng-show="shippingorm.name.$error.required"></span>
    
    ...
    <button ng-disabled="shippingForm.$invalid" ng-click="sendOrder(data.shipping)">Complete Order</button>
</form>

 

sendOrder被定义在了顶级module中:

 

$scope.sendOrder = function (shippingDetails) {
            var order = angular.copy(shippingDetails);
            order.gadgets = cart.getProducts();
            $http.post(ordersUrl, order)
            .success(function (data, status, headers, config) {
                $scope.data.OrderLocation = headers('Location');
                $scope.data.OrderID = data.OrderID;
                cart.getProducts().length = 0;
            })
            .error(function (error) {
                $scope.data.orderError = error;
            }).finally(function () {
                $location.path("/complete");
            });
        }

 

/complete会路由到$routeProvider.when("/complete",{templateUrl: "app/views/orderSubmitted.html"}), app/views/orderSubmitted.html部分视图如下:

 

 

其html部分为:

 

<div ng-show="data.orderError">
    {{data.orderError.status}}the order could not be placed, <a href="#/submitorder">click here to try again</a>
</div>
<div ng-hide="data.orderError">
    {{data.OrderID}}
    <a href="#">Back to gadgets</a>
    <a href="{{data.OrderLocation}}">View Order</a>
</div>

 

■ 实现购物车的Session

 

现在为止,还存在的问题是:当刷新页面的时候,购物车内的产品就会消失,即还么有Session机制。

 

与ASP.NET Web API路由相关的HttpControllerRouteHandler, HttpControllerHandler, IRequireSessionState。

 

首先一个继承内置的HttpControllerHandler,并实现内置的IRequiresSessionState接口。

 

public class SessionEnabledControllerHandler : HttpControllerHandler, IRequiresSessionState
{
    public SessionEnabledControllerHandler(RouteData routeData)
        : base(routeData)
    { }
}

 

然后实现一个内置HttpControllerRouteHandler的继承类。

 

public class SessionEnabledHttpControllerRouteHandler : HttpControllerRouteHandler
{
    protected override IHttpHandler GetHttpHandler(RequestContext requestContext)
    {
        return new SessionEnabledControllerHandler(requestContext.RouteData);
    }
}

 

注释掉WebApiConfig.cs中的代码:

 

public static class WebApiConfig
{
    public static void Register(HttpConfiguration config)
    {
        // Web API configuration and services

        // Web API routes
        config.MapHttpAttributeRoutes();

        // Moved to RouteConfig.cs to enable Session
        /*
        config.Routes.MapHttpRoute(
            name: "DefaultApi",
            routeTemplate: "api/{controller}/{id}",
            defaults: new { id = RouteParameter.Optional }
        );
         */
    }
}

 

在RouteConfig中配置如下:

 

public class RouteConfig
{
    public static void RegisterRoutes(RouteCollection routes)
    {
        routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

        #region Web API Routes

        // Web API Session Enabled Route Configurations
        routes.MapHttpRoute(
            name: "SessionsRoute",
            routeTemplate: "api/sessions/{controller}/{id}",
            defaults: new { id = RouteParameter.Optional }
        ).RouteHandler = new SessionEnabledHttpControllerRouteHandler(); ;

        // Web API Stateless Route Configurations
        routes.MapHttpRoute(
            name: "DefaultApi",
            routeTemplate: "api/{controller}/{id}",
            defaults: new { id = RouteParameter.Optional }
        );
        #endregion

        #region MVC Routes
        routes.MapRoute(
            name: "Default",
            url: "{controller}/{action}/{id}",
            defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
        );
        #endregion
    }
}

 

以上,需要引用System.Web.Http。

 

现在,如果希望ItemsController中使用Session,那就这样请求:

http://localhost:61691/api/sessions/items

 

如果不想用Session,那就这样请求:

http://localhost:61691/api/items

 

现在,在前端,向购物车添加产品相关代码为:

 

addProduct: function (id, name, price, category) {
    var addedToExistingItem = false;
    for (var i = 0; i < cartData.length; i++) {
        if (cartData[i].GadgetID == id) {
            cartData[i].count++;
            addedToExistingItem = true;
            break;
        }
    }
    if (!addedToExistingItem) {
        cartData.push({
            count: 1, GadgetID: id, Price: price, Name: name, CategoryID: category
        });
    }
}

 

类似地,创建一个模型:

 

public class CartItem
{
    public int Count { get; set; }
    public int GadgetID { get; set; }
    public decimal Price { get; set; }
    public string Name { get; set; }
    public int CategoryID { get; set; }
}

 

对应的控制器为:

 

public class TempOrdersController : ApiController
{
    //get api/TempOrders
    public List<CartItem> GetTempOrders()
    {
        List<CartItem> cartItems = null;
        
        if(System.Web.HttpContext.Current.Session["Cart"] != null){
            cartItems = (List<CartItem>)System.Web.HttpContext.Current.Session["Cart"];
        }
        
        return cartItems;
    }
    
    //post api/TempOrders
    [HttpPost]
    public HttpResponseMessage SaveOrder(List<CarItem> cartItems)
    {
        if (!ModelState.IsValid)
        {
            return new HttpResponseMessage(HttpStatusCode.BadRequest);
        }

        System.Web.HttpContext.Current.Session["Cart"] = cartItems;

        return new HttpResponseMessage(HttpStatusCode.OK);
    }
}

 

再回到前端,首先在gadgetsStore这个顶级module中增加有关缓存API的uri常量。

 

angular.module('gadgetsStore')
    .constant('gadgetsUrl', 'http://localhost:61691/api/gadgets')
    .constant('ordersUrl', 'http://localhost:61691/api/orders')
    .constant('categoriesUrl', 'http://localhost:61691/api/categories')
    .constant('tempOrdersUrl', 'http://localhost:61691/api/sessions/temporders')
    .controller('gadgetStoreCtrl', function ($scope, $http, $location, gadgetsUrl, categoriesUrl, ordersUrl, tempOrdersUrl, cart) {
// Code omitted

 

重新定义cart这个服务:

 

storeCart.factory('cart', function(){
    var cartData = [];
    
    return {
        addProduct: function(id, name, price, category){
            var addedToExistingItem = false;
            for(var i = 0; i < cartData.length; i++){
                if(cartData[i].GadgetID == id){
                    cartData[i].count++;
                    addedToExistingItem = true;
                    break;
                }
            }
            if(!addedToExistingItem){
                cartData.push({
                    count:1, GadgetID: id, Price: price, Name: name, Category: category
                });
            }
        },
        removeProduct: fucntion(id){
            for(var i = 0; i < cartData.length; i++){
                if(cartData[i].GadgetID == id){
                    cartData.splice(i, 1);
                    break;
                }
            }
        },
        getProducts: fucntion(){
            return cartData;
        },
        pushItem: function(item){
            cartData.push({
                count: item.Count, GadgetID:item.GadgetID, Price: Item.Price, Name: item.Name, CategoryID: item.CategoryID
            })
        }
    };
});

 


为了在页面每次刷新的时候保证Session的状态,在主module中添加如下方法:

 

//用来把每次更新保存到后端的Session中
$scope.saveOrder = function () {
    var currentProducts = cart.getProducts();

    $http.post(tempOrdersUrl, currentProducts)
        .success(function (data, status, headers, config) {
        }).error(function (error) {
        }).finally(function () {
        });
}

//用来每次刷新向后端Session要数据
$scope.checkSessionGadgets = function(){
    $http.get(tempOrdersUrl)
        .success(function(data){
            if(data){
                for(var i = 0; i < data.length; i++){
                    var item = data[i];
                    cart.pushItem(item);
                }
            }
        })
        .error(function(error){
            console.log('error checking session: ' + error) ;
        });
}

 

然后checkSessionGadgets这个方法就要被运用到主视图上去,当页面每次加载的时候调用它。

 

<body ng-controller='gadgetStoreCtrl' class="container" ng-init="checkSessionGadgets()">

 

每次向购车添加的时候需要重新更新后端的Session状态。

 

$scope.addProductToCart = function (product) {
    cart.addProduct(product.GadgetID, product.Name, product.Price, product.CategoryID);
    $scope.saveOrder();
}

 

每次从购物车一处的时候需要重新更新后端的Session状态。

 

$scope.remove = function (id) {
    cart.removeProduct(id);
    $scope.saveOrder();
}

 

在用户提交订单的时候,需要一出购物车内的产品,再更新后端的Session状态。

 

$scope.sendOrder = function (shippingDetails) {
    var order = angular.copy(shippingDetails);
    order.gadgets = cart.getProducts();
    $http.post(ordersUrl, order)
    .success(function (data, status, headers, config) {
        $scope.data.OrderLocation = headers('Location');
        $scope.data.OrderID = data.OrderID;
        cart.getProducts().length = 0;
        $scope.saveOrder();
    })
    .error(function (error) {
        $scope.data.orderError = error;
    }).finally(function () {
        $location.path("/complete");
    });
}

 

待续~~

 

posted @ 2015-11-12 17:26  Darren Ji  阅读(2401)  评论(0编辑  收藏  举报

我的公众号:新语新世界,欢迎关注。