您的位置：首页 > Web前端 > AngularJS

bootstrap angularjs 实现jsp页面购物车

2017-08-23 21:19 435 查看
商品展示页面

<html>

<head>

<base href="<%=basePath%>">

<title>My JSP 'Pshow.jsp' starting page</title>

<link rel="stylesheet"

    href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"

    integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"

    crossorigin="anonymous">

<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->

<link rel="stylesheet"

    href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"

    integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp"

    crossorigin="anonymous">

<script type="text/javascript" src="js/jquery-1.11.0.js"></script>

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->

<script

    src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"

    integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"

    crossorigin="anonymous"></script>

<%

    if (session.getAttribute("user") != null) {

%>

<nav class="navbar navbar-default navbar-fixed-top">

<div class="container">

    <!-- Brand and toggle get grouped for better mobile display -->

    <div class="navbar-header">

        <a class="navbar-brand" href="#">Brand</a>

    </div>

    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

        <ul class="nav navbar-nav">

            <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>

            <li><a href="#">欢迎${user.name }</a></li>

            <li><a href="user/quit">退出</a></li>

        </ul>

        <ul class="nav navbar-nav navbar-right">

            <li><a href="#">首页</a></li>

            <li><a href="#">购物专区</a></li>

            <li><a href="#">我的收藏</a></li>

            <li><a href="Cart.jsp">我的购物车</a></li>

            <li class="dropdown"><a href="#" class="dropdown-toggle"

                data-toggle="dropdown" role="button" aria-haspopup="true"

                aria-expanded="false">联系客服<span class="caret"></span></a></li>

        </ul>

    </div>

    <!-- /.navbar-collapse -->

</div>

<!-- /.container-fluid --> </nav>

</div>

<%

    } else {

%>

<nav class="navbar navbar-default navbar-fixed-top">

<div class="container">

    <!-- Brand and toggle get grouped for better mobile display -->

    <div class="navbar-header">

        <a class="navbar-brand" href="#">Brand</a>

    </div>

    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

        <ul class="nav navbar-nav">

            <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>

            <li><a href="index.jsp">请登录</a></li>

            <li><a href="#">注册</a></li>

        </ul>

        <ul class="nav navbar-nav navbar-right">

            <li><a href="product/show">首页</a></li>

            <li><a href="product/show">购物专区</a></li>

            <li><a href="#">我的收藏</a></li>

            <li><a href="#">我的购物车</a></li>

            <li class="dropdown"><a href="#" class="dropdown-toggle"

                data-toggle="dropdown" role="button" aria-haspopup="true"

                aria-expanded="false">联系客服<span class="caret"></span></a></li>

        </ul>

    </div>

</div>

</nav>

<%

    }

%>

<script type="text/javascript" src="js/angularjs.js"></script>

<script>

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

    app.controller('mycontroller', function($scope, $http) {

        $scope.car = null;

        $scope.quit = function(id) {

            $http.post("product/showtwo?pid=" + id).success(function(obj) {

                $scope.car = obj;

            });

        };

        $scope.select = function(name) {

            location.href = "product/showName?name=" + name;

        };

    });

</script>

</head>

<body ng-app="myapp">

    <div class="container" ng-controller="mycontroller">

        <br>

        <br>

        <br>

        <br>

        <div class="row">

            <div class="col-lg-3"></div>

            <div class="col-lg-6">

                <div class="input-group">

                    <input type="text" class="form-control" placeholder="请输入商品名字"

                        ng-model="all"> <span class="input-group-btn">

                        <button class="btn btn-default" type="button"

                            ng-click="select(all)">Go!</button>

                    </span>

                </div>

                <!-- /input-group -->

            </div>

        </div>

        <br>

        <div class="row">

            <c:if test="${not empty list }">

                <c:forEach items="${list
ac2c
}" var="x">

                    <div class="col-sm-6 col-md-4">

                        <div class="thumbnail">

                            <img src="../../image/${x.describe}"

                                style="width: 500px;height: 300px;">

                            <div class="caption">

                                <h3>${x.pname}</h3>    

                                <p>￥${x.price}</p>

                                <p>

                                    <c:if test="${not empty user}">

                                        <button class="btn btn-primary" role="button"

                                            data-toggle="modal" data-target="#myModal"

                                            ng-click="quit(${x.pid})">立即购买</button>

                                        <a href="shop/Shoppingadd?p.pid=${x.pid }&p.price=${x.price}"

                                            class="btn btn-default" role="button">加入购物车</a>

                                    </c:if>

                                    <c:if test="${empty user}">

                                        <button href="#" class="btn btn-primary" role="button"

                                            onclick="alert('请登录')">立即购买</button>

                                        <button href="#" class="btn btn-default" role="button"

                                            onclick="alert('请登录')">加入购物车</button>

                                    </c:if>

                                </p>

                            </div>

                        </div>

                    </div>

                </c:forEach>

            </c:if>

            <c:if test="${empty list }">

                <h2>

                    <center>

                        商场没有此物品,再<a href="product/show">去逛逛</a>

                    </center>

                </h2>

            </c:if>

        </div>

    </div>

购物车页面

<html>

  <head>

    <base href="<%=basePath%>">

    

    <title>My JSP 'Cart.jsp' starting page</title>

    

  

    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->

    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

    <script type="text/javascript" src="js/angularjs.js" ></script>

    <script>

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

            app.controller('mycontroller',function($scope,$http){

                $http.post('shop/show').success(function(obj){

                    $scope.cart=obj;

                });

                $scope.money=function(){

                var count = 0;

                angular.forEach($scope.cart,function(obj,key){

                        count+=obj.count*obj.p.price;

                    });

                return count;

                };

                $scope.jian=function(id){

                    location.href="shop/jian?id="+id;

                };

                $scope.jia=function(id){

                    location.href="shop/add?id="+id;

                };

                $scope.sub=function(){

                var ids = [];

                angular.forEach($scope.cart,function(obj,key){

                        ids.push(obj.id);

                    });

                     location.href="order/add?id="+ids.join(",");

                };

                $scope.chu=function(){

                var ids = [];

                angular.forEach($scope.cart,function(obj,key){

                        ids.push(obj.id);

                    });

                     $http.post("shop/deleteall?id="+ids.join(","));

                     location.reload();

                };

                $scope.remove=function(id){

                    $http.post("shop/delete?id="+id);

                    location.reload();

                };

            });

    </script>

    

  </head>

 

  <body ng-app="myapp">

      <div ng-controller="mycontroller" class="container">

      <div class="page-header">

      <h1>我的购物车 <small>Subtext for header</small></h1>

     </div>

     <div class="col-md-offset-11">

            <button class="btn btn-danger"  ng-show="cart.length" ng-click="chu()">清空购物车</button>

        </div>

        <table class="table table-striped table-bordered table-hover text-center" ng-show="cart.length">

            <tr>

                <td>商品名称</td>

                <td>商品价格</td>

                <td>商品数量</td>

                <td>小计</td>

                <td>操作</td>

            </tr>

            <tr ng-repeat="x in cart">

                <td>{{x.p.pname}}</td>

                <td>{{x.p.price}}</td>

                <td>

                <button class="btn btn-default" ng-click="jian(x.id)">-</button>

                <input value="{{x.count}}" style="width:30px" ng-model="x.count">

                <button class="btn btn-default" ng-click="jia(x.id)">+</button>

                </td>

                <td>{{x.count*x.p.price}}</td>

                <td><button class="btn btn-danger" ng-click="remove(x.id)">删除</button></td>

            </tr>

            <tr>

                <td colspan="4">总价￥{{money()}}</td>

                <td><button class="btn btn-warning glyphicon glyphicon-grain" ng-click="sub()">提交订单</button></td>

            </tr>

        </table>

        <div ng-show="!cart.length">

                您购物车没东西,<a href="product/show">去逛逛广场</a>

            </div>

        </div>

  </body>

</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航