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);
        };

 

源码下载请点击