5.加入购物车,购物车删除,购买,发布商品管理等

1.加入购物车

基本实现思路:

点击获得商品的id,再获取session中用户的id,传入后台存到cart(购物车表格)。
image

views.py部分代码:

def join_cart(request):
    result = 1
    good_id = request.GET.get("id")
    # good = Goods()
    # good = Goods.objects.get(id=good_id)
    # cart_check = Cart()
    # cart_check = Cart.objects.get(goods=good)
    # if cart_check is not None:
    #     result = 2
    #     return HttpResponse(json.dumps(result))
    user_id = request.session.get('userid')
    cart = Cart()
    cart.user = User.objects.get(id=user_id)
    cart.goods = Goods.objects.get(id=good_id)
    try:
        cart.save()
    except Exception:
        print(Exception)
        result = 0
    return HttpResponse(json.dumps(result))

函数部分代码:

 function join_cart(id) {
        $.ajax({
            url: "join_cart",
            type: "GET",
            data: {"id": id},
            dataType: "json",
            success: function (data) {
                if (data == 1) {   //询问框
                    layer.confirm('加入成功', {
                        btn: ['确定', '取消'] //按钮
                    }, function () {
                        window.location.href = "user_center";
                    }, function () {

                    });
                }
                if (data == 2) {
                     layer.msg("商品已经加入购物车");
                }
            },
            error: function () {
                layer.msg("未知错误");
            }
        });
    }

2.用户中心页面动态显示

需要实现的效果:

1.点击左边div,右边出现对应模块

2.各个模块获取对应列表传进来动态显示

image

js部分代码:
左边部分id分别为fun_1,fun_2,fun_3,fun_4
右边显示部分背景div,id取#show_1,#show_2,#show_3,#show_4
利用div.hide和show属性实现这个效果

  $(document).ready(function () {
        $("#show_1").hide();
        $("#show_3").hide();
        $("#show_4").hide();
        $("#show_2").show();
        $("#fun_1").click(function () {
            $("#show_2").hide();
            $("#show_3").hide();
            $("#show_4").hide();
            $("#show_1").show();
        });
        $("#fun_2").click(function () {
            $("#show_1").hide();
            $("#show_3").hide();
            $("#show_4").hide();
            $("#show_2").show();
        });
        $("#fun_3").click(function () {
            $("#show_1").hide();
            $("#show_2").hide();
            $("#show_4").hide();
            $("#show_3").show();
        });
        $("#fun_4").click(function () {
            $("#show_1").hide();
            $("#show_3").hide();
            $("#show_2").hide();
            $("#show_4").show();
        });
    });

html动态显示部分代码:

{% for foo in cart_list %}
                

{{ foo.goods.name }}

{{ foo.goods.price }}
{% endfor %}

3.发布商品删除

需要实现的效果:点击删除按钮删除

实现思路:点击删除按钮,获取商品id,然后删除goods表格

部分代码:

def del_goods(request):
    result = 1
    user_id = request.GET.get("id")
    print("id:" + user_id)
    try:
        Goods.objects.filter(id=user_id).delete()
    except Exception:
        result = 0
    return HttpResponse(json.dumps(result))

ajax部分代码:

    function del_goods(id) {
        //询问框
        layer.confirm('是否要删除?', {
            btn: ['确定', '取消'] //按钮
        }, function () {
            $.ajax({
                url: "del_good",
                type: "GET",
                data: {"id": id},
                dataType: "json",
                success: function (data) {
                    console.log(data);
                    if (data == 1) {
                        window.location.reload();
                    }
                    if (data == 0) {
                        layer.msg("删除失败");
                    }
                },
                error: function () {
                    layer.msg("上传失败");
                }
            })
        }, function () {
        });
    }

4.购物车删除

需要实现的效果:点击删除按钮删除购物车信息

实现思路:点击删除按钮,获取商品id,然后在cart表格删除该条信息

部分代码:

   function del_cart(id) {
        $.ajax({
            url: "del_cart",
            type: "GET",
            data: {"id": id},
            dataType: "json",
            success: function (data) {
                if (data == 1) {   //询问框
                    layer.confirm('是否删除', {
                        btn: ['确定', '取消'] //按钮
                    }, function () {
                        window.location.reload();
                    }, function () {

                    });
                }
                if (data == 0) {
                    layer.msg("删除失败");
                }
            },
            error: function () {
                layer.msg("未知错误");
            }
        });

    }

ajax部分代码:


    function del_cart(id) {
        $.ajax({
            url: "del_cart",
            type: "GET",
            data: {"id": id},
            dataType: "json",
            success: function (data) {
                if (data == 1) {   //询问框
                    layer.confirm('是否删除', {
                        btn: ['确定', '取消'] //按钮
                    }, function () {
                        window.location.reload();
                    }, function () {

                    });
                }
                if (data == 0) {
                    layer.msg("删除失败");
                }
            },
            error: function () {
                layer.msg("未知错误");
            }
        });
    }

5.用户头像修改和信息修改

需要实现的效果:填写好信息,点击保存修改修改用户信息存到后台数据库,同时修改右部头像

image

实现思路:点击删除按钮,获取商品id,然后在cart表格删除该条信息

部分代码:

选择图片,左边头像更改

$(function () {
        layui.use(['layer', 'form'], function () {
            var layer = layui.layer
                , form = layui.form;
            form.render();
        });
        $("#head_pic").change(function () {
                var $file = $(this);
                var fileObj = $file[0];
                var windowURL = window.URL || window.webkitURL;
                var dataURL;
                var $img_1 = $("#img_show_1");
                var $img_2 = $("#img_show_2");
                if (fileObj && fileObj.files && fileObj.files[0]) {
                    dataURL = windowURL.createObjectURL(fileObj.files[0]);
                    $img_1.attr('src', dataURL);
                    $img_2.attr('src', dataURL);
                } else {
                    dataURL = $file.val();
                    var imgObj = document.getElementById("preview");
                    // 两个坑:
                    // 1、在设置filter属性时,元素必须已经存在在DOM树中,动态创建的Node,也需要在设置属性前加入到DOM中,先设置属性在加入,无效;
                    // 2、src属性需要像下面的方式添加,上面的两种方式添加,无效;
                    imgObj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
                    imgObj.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = dataURL;

                }
            }
        );
    });

并且储存到数据库:
这部分代码和发布页面类似不再贴出

6.商品购买

需要实现的效果:点击购买生成订单存到order表格

实现思路:点击购买按钮,把商品id,用户id传到后台order表

部分代码:

    function buy_allgood(id) {
        //询问框
        layer.confirm('是否购买所有商品?', {
            btn: ['确定', '取消'] //按钮
        }, function () {
            $.ajax({
                url: "buy_allgood",
                type: "GET",
                data: {"id": id},
                dataType: "json",
                success: function (data) {
                    console.log(data);
                    if (data == 1) {
                        layer.msg('生成订单成功', {icon: 1});
                    }
                },
                error: function () {
                    layer.msg("未知错误");
                }
            })
        }, function () {
        });
    }

views部分代码不再给出都一样

你可能感兴趣的:(5.加入购物车,购物车删除,购买,发布商品管理等)