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

 

源码下载请点击

作者: 沐宇

出处: http://www.cnblogs.com/combat

做得可能不够好,感谢你的认真阅读

本文版权归作者所有,欢迎转载,但请保留该声明。

posted @ 2018-12-19 02:34  文斌呐  阅读(966)  评论(0编辑  收藏  举报