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 %}
<div class="show_1_1">
<div class="tou_20 div_in_chuizhi">
<a>{{ foo.goods.create_time }}</a>
</div>
<div class="last_zuo div_in_juzhong">
<div class="last_zuo_bg">
<img src="{{ MEDIA_URL }}{{ foo.goods.img }}">
</div>
</div>
<div class="last_middle">
<div class="last_middle_1">
<h2>{{ foo.goods.name }}</h2>
</div>
<div class="last_middle_2">
<h2 style="float: left">￥</h2>
<div class="jiage">{{ foo.goods.price }}</div>
</div>
</div>
<div class="last_you div_in_juzhong">
<button class="del_buttun2" onclick="buy_good({{ foo.goods.id }})" style="cursor:pointer">立刻购买
</button>
<button class="del_buttun" onclick="del_cart({{ foo.goods.id }})" style="cursor:pointer">删除
</button>
</div>
</div>
{% 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部分代码不再给出都一样
网友评论