Angular+SSM+Ajax的簡單購物車實例

使用Angular+SSM+Ajax實現簡單的增刪改查功能

sql：

drop table if exists shopCar;
create table if not exists shopCar
(
  cid int primary key auto_increment comment '商品編號',
  shopname varchar(128) not null comment '商品名稱',
  shopprice decimal(10,2) not null comment '商品單價',
  shopsum int default 1 comment '商品數量'
);
insert into shopCar (shopname, shopprice, shopsum) values ('鋼筆',9.9,10);
insert into shopCar (shopname, shopprice, shopsum) values ('橡皮擦',5.6,8);
insert into shopCar (shopname, shopprice, shopsum) values ('鉛筆',3.2,4);
insert into shopCar (shopname, shopprice, shopsum) values ('簽字筆',2.9,3);
insert into shopCar (shopname, shopprice, shopsum) values ('圓規',12.5,10);
insert into shopCar (shopname, shopprice, shopsum) values ('文具盒',29.7,10);
insert into shopCar (shopname, shopprice, shopsum) values ('彩鉛',89.2,5);

select * from shopCar;

html：

<div ng-app="shop" ng-controller="shopping">
    <table border="1" cellspacing="0" cellpadding="0" width="100%">
        <caption style="font-size: 28px;">Angular</caption>
        <tr><th>序號</th><th>名稱</th><th>單價</th><th>數量</th><th>小計</th><th>操作</th></tr>
        <tr ng-repeat="item in products">
            <td>{{item.cid}}</td>
            <td>{{item.shopname}}</td>
            <td>{{item.shopprice}}</td>
            <td>
                <button ng-click="updatesum(item.shopsum-1,item.cid)" id="reduce">-</button>
                <input type="text" ng-model="item.shopsum">
                <button ng-click="updatesum(item.shopsum+1,item.cid)">+</button>
            </td>
            <!--計算后保留后兩位小數-->
            <td>{{(item.shopsum*item.shopprice).toFixed(2)}}</td>
            <td><a href="#" ng-click="remove(item.cid)">刪除</a>&#12288;<a href="#" ng-click="edit(item.cid,item.shopname,item.shopprice,item.shopsum)">編輯</a></td>
        </tr>
        <tr>
            <td colspan="6" align="right" style="padding: 0px 50px;">合計：<span ng-bind="total()"></span></td>
        </tr>
    </table>
    <fieldset>
        <legend>添加/修改</legend>
        <input type="text" hidden="hidden" id="cid">
        <p>
            <label for="shopname">名稱：</label>
            <input type="text" id="shopname" placeholder="名稱"/>
        </p>
        <p>
            <label for="shopprice">價格：</label>
            <input type="text" id="shopprice" placeholder="價格">
        </p>
        <p>
            <label for="shopsum">數量：</label>
            <input type="text" id="shopsum" placeholder="數量">
        </p>
        <p>
            <button type="button" ng-click="insert()">添加</button>
            <button type="button" ng-click="update()">修改</button>
        </p>
    </fieldset>
</div>

模塊js  getAll(數據查詢)：

//getAll
        $scope.products=[];
        function getAll(){
            $.ajax({
                url:'/ShopApi/getAll',
                type:'post',
                contentType: "application/json; charset=UTF-8",
                success:function (data) {
                    $scope.products=data.data;
                    $scope.$apply();
                },error:function (xhr, textStatus, errorThrown,data) {
                    console.log("錯誤，"+textStatus+","+errorThrown+data);
                }
            });
        };
        getAll();

delete(刪除):

$scope.remove=function(index){
            if(confirm('您確定要刪除嗎？')){
                $.ajax({
                    type: "post",
                    url: '/ShopApi/deleteShop',
                    data: {cid:index},
                    success: function (data) {
                        alert("刪除成功！");
                        getAll();
                    },
                    error:function (xhr, textStatus, errorThrown,data) {
                        console.log("錯誤，"+textStatus+","+errorThrown+data);
                    }
                });
            }
        };

 

insert(添加):

//insert
        $scope.insert=function () {
            $.ajax({
                url:'/ShopApi/insertShop',
                type:"post",
                data:{shopname:$("#shopname").val(),shopprice:$("#shopprice").val(), shopsum:$("#shopsum").val()},
                success:function (data) {
                    alert("添加成功！");
                    getAll();
                    $(":input").val('');
                },
                error:function (xhr, textStatus, errorThrown,data) {
                    console.log("錯誤，"+textStatus+","+errorThrown+data);
                    alert("添加失敗！");
                    console.log(shopdata);
                }
            });
        };

edit(編輯):

//edit
        $scope.edit=function(cid,shopname,shopprice,shopsum){
            $("#cid").val(cid);
            $("#shopname").val(shopname);
            $("#shopprice").val(shopprice);
            $("#shopsum").val(shopsum);
        }

update(修改):

//update
        $scope.update=function () {
            $.ajax({
                url:'/ShopApi/updateShop',
                type:'post',
                data:{cid:$("#cid").val(),shopname:$("#shopname").val(),shopprice:$("#shopprice").val(),shopsum:$("#shopsum").val()},
                success:function (data) {
                    alert("修改成功！");
                    getAll();
                    $(":input").val('');
                },
                error:function (xhr, textStatus, errorThrown,data) {
                    console.log("錯誤，"+textStatus+","+errorThrown+data);
                    alert("修改失敗");
                }
            });
        };

updatesum(加減號修改數量):

//updatesum
        $scope.updatesum=function (sum,id) {
            $.ajax({
                url:'/ShopApi/updateSum',
                type:'post',
                data:{shopsum:sum,cid:id},
                success:function (data) {
                    getAll();
                },
                error:function (xhr, textStatus, errorThrown,data) {
                    console.log("錯誤，"+textStatus+","+errorThrown+data);
                }
            });
        };

get count(合計總數)：

//get count
        $scope.total=function(){
            var priceAll = 0;
            for(var i= 0;i<$scope.products.length;i++){
                priceAll+=$scope.products[i].shopprice*$scope.products[i].shopsum;
            }
            return priceAll.toFixed(2);
        };

 

源碼下載請點擊