Pycharm--当当网项目
Published in:2020-09-22 |

PyCharm–当当网项目的实现,实现注册登陆,图书分类,详情展示,购物车,订单等功能

PyCharm–当当网项目的实现

一.项目的开发流程

(1) 需求分析

1
明确项目需要实现的功能,不用关心具体实现

(2)库表设计

1
2
3
4
5
表先行
涉及的数据有哪些
表之间的联系
表内需要的字段
专用工具实现

(3)详细设计

1
每一块的功能实现,具体怎么做

(4)编码

(5)测试

1
2
3
测试人员测试项目,提交测试文档-bug,bug日清
黑白盒测试
写测试代码

(6)环境部署

1
购买云服务器,开发人员或运维做环境部署

(7)项目上线运行

(8)运维/运营

二.库表设计

1
2
3
4
5
6
7
8
1. 安装PowerDesigner并破解
2. 找当当网的实体表,表中的字段,表与表之间的联系
3. 使用PowerDesigner设计出当当的库表的模型
4. 使用PD导出数据库表.sql文件,再导入到Navicat中
- 如果导入失败/出错,检查.sql文件,找到错误,修改PD中的物理模型,再重新导出.sql文件
5. 使用Pycharm建好当当网的项目,分好模块,建好app,再生成model类
python manage.py inspectdb 预览model类
python manage.py inspectdb > app名/models.py

三.添加数据,完成图书分类展示

模块化设计

index模块

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
# Create your views here.
def index(request):
time = datetime.now().date() - timedelta(days=3650) # 获取当前时间的上一个时间
cate1 = TCategory.objects.filter(level=1) # 一级标签
cate2 = TCategory.objects.filter(level=2) # 二级标签
booklist1 = TBook.objects.order_by("-publish_time")[:10] # 根据上架时间排名
booklist2 = TBook.objects.filter(publish_time__gte=time).order_by("-sales") # 根据最新上架时间,销售排名

# 通过cookice判断是否免登陆状态
user_name = request.COOKIES.get('txtUsername')
user_pwd = request.COOKIES.get('txtPassword')
res = TUser.objects.filter(user_name=user_name, user_pwd=user_pwd)
if res:
return render(request, 'index/index.html',
{"user_name": user_name, "cates1": cate1, "cates2": cate2, "booklist1": booklist1,
"booklist2": booklist2, })
return render(request, 'index/index.html',
{"cates1": cate1, "cates2": cate2, "booklist1": booklist1, "booklist2": booklist2})

index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<ul class="slides_container clearfix">
<li >
{% for book in booklist1 %}
{% if forloop.counter0 < 8 %}
<dl class="clearfix">
<dt><a class="img" href="{% url 'book:bookdetails' %}?id={{ book.id }}" target="_blank"><img src="/static/book_pic/{{ book.picture }}" alt=""></a></dt>
<dd>
<p class="name" ><a title="" href="{% url 'book:bookdetails' %}?id={{ book.id }}" target="_blank" style=" ">{{ book.book_name }}</a></p>
<p class="author"><span class="author_t"></span>{{ book.author }} 著</p>
<p class="price"><span class="rob"><span class="sign"></span><span class="num">{{ book.new_price }}</span><span class="tail"></span></span><span class="price_r"><span class="sign"></span><span class="num">{{ book.old_price }}</span><span class="tail"></span></span></p>
<span style="background: url(http://img4.ddimg.cn/00035/pic/xsq.png) no-repeat 0px 0px; _background-image: none; _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://img4.ddimg.cn/00035/pic/xsq.png',sizingMethod='noscale');" class="product_tags"></span></dd>
</dl>
{% endif %}
{% endfor %}
</li>
</ul>


<div id="con_two_1" style="display:block;" >
<ul class="list01">
{% for book in booklist2 %}
{% if forloop.counter < 6 %}
{% if forloop.counter == 1 %}
<li class="active"> <span class="num num1">{{ forloop.counter }}</span>
{% elif forloop.counter <= 3 %}
<li ><span class="num num1">{{ forloop.counter }}</span>
{% else %}
<li ><span class="num">{{ forloop.counter }}</span>
{% endif %}
<div> <a class="list_name" href="">{{ book.book_name }}</a>
<dl class="list_con clearfix">
<dt><a href="{% url 'book:bookdetails' %}?id={{ book.id }}"><img src="/static/book_pic/{{ book.picture }}"></a></dt>
<dd>
<p class="name"><a href="{% url 'book:bookdetails' %}?id={{ book.id }}">{{ book.author }}</a></p>
<b>¥{{ book.new_price }}</b><em>¥{{ book.old_price }}</em><a class="pl" href="#">销售量{{ book.sales }}</a></dd>
</dl>
</div>
{% endif %}
{% endfor %}
</ul>
</div>


<div id="con_four_1">
<ul class="list01">
{% for book in booklist2 %}
{% if forloop.counter < 11 %}
{% if forloop.counter == 1 %}
<li class="active"> <span class="num num1">{{ forloop.counter }}</span>
{% elif forloop.counter <= 3 %}
<li ><span class="num num1">{{ forloop.counter }}</span>
{% else %}
<li ><span class="num">{{ forloop.counter }}</span>

{% endif %}
<div> <a class="list_name" href="">{{ book.book_name }}</a>
<dl class="list_con clearfix">
<dt><a href="{% url 'book:bookdetails' %}?id={{ book.id }}"><img src="/static/book_pic/{{ book.picture }}"></a></dt>
<dd>
<p class="name"><a href="{% url 'book:bookdetails' %}?id={{ book.id }}">{{ book.author }}</a></p>
<b>¥{{ book.new_price }}</b><em>¥{{ book.old_price }}</em><a class="pl" href="#">销售量{{ book.sales }}</a></dd>
</dl>
</div>
</li>
{% endif %}
{% endfor %}
</ul>
</div>

四.图书的详情和图书列表

book模块

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
def booklist(request):
cate1 = request.GET.get("cate1") # 获取一级标签的id
cate2 = request.GET.get("cate2") # 获取二级标签的id
cates1 = TCategory.objects.filter(level=1) # 一级标签
cates2 = TCategory.objects.filter(level=2) # 二级标签
# #根据标签id获取其model对象
# title1 = TCategory.objects.filter(pk=cate1)
# title2 = TCategory.objects.filter(pk=cate2)[0]
# print(title2.category_id,6545645645646)
if cate1 and cate1 != 'None':
# 获取到属于一级标题下二级标题的所有书籍
paginator = Paginator(TBook.objects.filter(category__parent_id=cate1), per_page=3)
else:
paginator = Paginator(TBook.objects.filter(category_id=cate2), per_page=3)
# 实现分页
num = request.GET.get("num", 1)
page = paginator.page(num)
# 通过cookice判断是否免登陆状态
user_name = request.COOKIES.get('txtUsername')
user_pwd = request.COOKIES.get('txtPassword')
res = TUser.objects.filter(user_name=user_name, user_pwd=user_pwd)
if res:
return render(request, 'book/booklist.html', {"user_name":user_name,"cates1": cates1, "cates2": cates2,"page": page,"cate1":cate1,"cate2":cate2})
return render(request, 'book/booklist.html', {"cates1": cates1, "cates2": cates2,"page": page,"cate1":cate1,"cate2":cate2})


def bookdetails(request):
id = request.GET.get("id") # 获取前端返回的图书id
book = TBook.objects.filter(pk=id)[0] # 根据id查询到书的信息
# discount 折扣计算返回给前端
discount = round((book.new_price / book.old_price * 10), 2)
# 通过cookice判断是否免登陆状态
user_name = request.COOKIES.get('txtUsername')
user_pwd = request.COOKIES.get('txtPassword')
res = TUser.objects.filter(user_name=user_name, user_pwd=user_pwd)
if res:
return render(request, 'book/bookdetails.html', {"user_name":user_name,"book": book, "discount": discount})
return render(request, 'book/bookdetails.html', {"book": book, "discount": discount})

booklist.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
<div class="con flq_body" >
{% for cate1 in cates1 %}
<div class="level_one" >
<dl class="con primary_dl" >
<dt class="con " name="m403752_pid5367_t10276"><a href="{% url 'book:booklist' %}?cate1={{ cate1.id }}"><span>{{ cate1.category_id }}</span></a></dt>
<dd class="con sec_cate dd_level1" >
{% for cate2 in cates2 %}
{% if cate2.parent_id == cate1.id %}
<a href="{% url 'book:booklist' %}?cate2={{ cate2.id }}" target="_blank" title="{{ cate2.category_id }}" class="title1" > {{ cate2.category_id }} </a>
{% endif %}
{% endfor %}
</dd>
</dl>
</div>
{% endfor %}
</div>


<div class="data" name="Fy"><span>{{ page.paginator.count }}</span>个商品
{% if page.has_previous %}
<a href="{% url 'book:booklist' %}?num={{ page.previous_page_number }}&cate1={{ cate1 }}&cate2={{ cate2 }}" class="arrow_l arrow_l_on"></a>
{% else %}
<a class="arrow_l "></a>
{% endif %}
<span class="or">{{ page.number }}</span>
<span>/{{ page.paginator.num_pages }}</span>
{% if page.has_next %}
<a href="{% url 'book:booklist' %}?num={{ page.next_page_number }}&cate1={{ cate1 }}&cate2={{ cate2 }}" class="arrow_r arrow_r_on"></a>
{% else %}
<a class="arrow_r " ></a>
{% endif %}
</div>


{% for book in page.object_list %}
<li class="line1" id="23668351">
<div class="inner"> <a title=" {{ book.book_name }} " class="pic" href="{% url 'book:bookdetails' %}?id={{ book.id }}" target="_blank"><img src="/static/book_pic/{{ book.picture }}" alt=" {{ book.book_name }} "></a>
<p class="name"><a title=" {{ book.book_name }} " href="{% url 'book:bookdetails' %}?id={{ book.id }}" target="_blank"> {{ book.book_name }} </a></p>
<p class="star"><span class="level"><span style="width: 100%;"></span></span><a href="#" target="_blank" name="P_pl">{{ book.sales }}销售量</a></p>
<div class="publisher_info">
<p class="author"><span></span><a href="#" name="P_zz" title="{{ book.author }}">{{ book.author }}</a></p>
<p class="publishing_time"><span></span>/ {{ book.publish_time }} </p>
<p class="publishing"><span></span>/ <a href="#" name="P_cbs" title="{{ book.publish }}">{{ book.publish }}</a></p>
</div>
<p class="detail">
{{ book.content_introduction }}
<p class="dang" style="display: block;">当当自营</p>
<p class="buy_button"><a class="listbtn_info" name="area_buy" dd_name="查看详情" href="{% url 'book:bookdetails' %}?id={{ book.id }}" >查看详情</a></p>
<p class="price"> <span class="price_n">¥{{ book.new_price }}</span><a style="color: #878787;text-decoration:none;">定价:</a><span class="price_r">¥{{ book.old_price }}</span>(<span class="price_s">{{ book.discount }}折</span>)</p>
<div class="ebook_buy">
<p class="buy_button">
<a class="listbtn_buy" id="A13" id1="{{ book.id }}" dd_name="加入购物车" href="javascript:void (0);" class="buy_book" name="Buy"></a></p>
</div>
</div>
</li>
{% endfor %}


<ul class="paging" name="Fy">
<li class="next">
{% if page.has_previous %}
<a href="{% url 'book:booklist' %}?num={{ page.previous_page_number }}&cate1={{ cate1 }}&cate2={{ cate2 }}">
上一页</a>
{% endif %}</li>
{% for foo in page.paginator.page_range %}
{% if foo == page.number %}
<li><a href="{% url 'book:booklist' %}?num={{ foo }}&cate1={{ cate1 }}&cate2={{ cate2 }}"
class="current">{{ foo }}</a></li>
{% else %}
<li><a href="{% url 'book:booklist' %}?num={{ foo }}&cate1={{ cate1 }}&cate2={{ cate2 }}"
class="null">{{ foo }}</a></li>
{% endif %}
{% endfor %}
<li><span>...<span></span></span></li>
<li class="next">
{% if page.has_next %}
<a href="{% url 'book:booklist' %}?num={{ page.next_page_number }}&cate1={{ cate1 }}&cate2={{ cate2 }}">
下一页</a>
{% endif %}</li>
</li>
<li class="page_input"><span>共{{ page.paginator.num_pages }}页 到第</span>
<input id="t__cp" type="text" class="number" name="num" value="{{ page.number }}">
<span></span>
<input class="button" id="click_get_page" value="确定" type="button" onclick="f()">
</li>
</ul>
<script type="text/javascript">
function f() {
num = $('#t__cp').val();
console.log(num);
if (num < 1) {
alert('超出下限')
} else if (num > {{ page.paginator.num_pages }}) {
alert('超出上限')
} else {
location.href = '{% url 'book:booklist' %}?cate1={{ cate1 }}&cate2={{ cate2 }}&num=' + num
}
}
</script>

五.登录和注册

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
def regist(request):
url = request.GET.get('url')
print(url)
return render(request, 'user/register.html', {"url": url})
def login(request):
# 判断是否有登录状态
user_name = request.COOKIES.get('txtUsername')
user_pwd = request.COOKIES.get('txtPassword')
url = request.GET.get('url')
print(url, 22222)
if url == None:
url = "http://127.0.0.1:8000/index/"
req = TUser.objects.filter(user_name=user_name, user_pwd=user_pwd)
if req:
request.session['login'] = 'ok'
return render(request, 'user/login.html', {"txtUsername": user_name, "txtPassword": user_pwd, 'url': url})
return render(request, 'user/login.html')
def regist_ok(request):
url = request.GET.get('url')
print(url)
txt_username = request.GET.get("txt_username")
return render(request, 'user/register ok.html', {"txt_username": txt_username, "url": url})
# 生成验证码
def getCaptcha(request):
# 生成img对象
img = ImageCaptcha()
code = random.sample(string.ascii_uppercase + string.ascii_lowercase + string.digits, 4)
# 拼接字符,通过session传递验证码
random_code = ''.join(code)
request.session['code'] = random_code
# 生成验证码图片
data = img.generate(random_code)
return HttpResponse(data, 'image/png')

# 验证码校验
def check_code(request):
txt_vcode = request.POST.get("txt_vcode") # 验证码
code = request.session['code']
print(code)
if code.lower() == txt_vcode.lower():
return JsonResponse({"msg": "验证码正确", "error": 0})
return JsonResponse({"msg": "验证码错误", "error": 1})

def regist_logic(request):
url = request.GET.get('url')
print(url)
txt_username = request.POST.get("txt_username")
txt_password = request.POST.get("txt_password")
txt_repassword = request.POST.get("txt_repassword")
txt_vcode = request.POST.get("txt_vcode") # 验证码
chb_agreement = request.POST.get("chb_agreement") # 霸王条款
code = request.session['code']
try:
with transaction.atomic():
if txt_username == '' or txt_password == '' or txt_repassword == '' or txt_vcode == '':
10 / 0
if code.lower() == txt_vcode.lower():
res = TUser.objects.filter(user_name=txt_username)
if res:
return JsonResponse({"msg": "用户已存在", "error": 0})
elif txt_password == txt_repassword:
resp = JsonResponse({"msg": "创建成功", "error": 1, "url": url})
TUser.objects.create(user_name=txt_username, user_pwd=txt_password)
resp.set_cookie('txtUsername', txt_username, max_age=7 * 24 * 3600)
resp.set_cookie('txtPassword', txt_password, max_age=7 * 24 * 3600)
return resp
else:
return JsonResponse({"msg": "两次密码不一致", "error": 2})
return JsonResponse({"msg": "验证码错误", "error": 3})
except Exception as e:
traceback.print_exc()
print(e)
return JsonResponse({"msg": "输入数据非法", "error": 4})
# 检查用户名
def check_username(request):
txtUsername = request.GET.get("txtUsername")
print(txtUsername, "检查用户名是否存在")
res = TUser.objects.filter(user_name=txtUsername)
if res:
return JsonResponse({"msg": "用户名存在", "error": 0})
return JsonResponse({"msg": "该用户名不存在请检查!", "error": 1})

def login_logic(request):
txtUsername = request.POST.get("txtUsername")
txtPassword = request.POST.get("txtPassword")
txtVerifyCode = request.POST.get("txtVerifyCode")
code = request.session['code']
url = request.GET.get('url')
autologin = request.POST.get("autologin") # 是否勾选免登录
try:
if txtUsername == '' or txtPassword == '' or txtVerifyCode == '':
10 / 0
if code.lower() == txtVerifyCode.lower():
res = TUser.objects.filter(user_name=txtUsername, user_pwd=txtPassword)
if res:
request.session['login'] = 'ok'
resp = JsonResponse({"msg": "登陆成功!", "error": 0, "url": url})
if autologin:
resp.set_cookie('txtUsername', txtUsername, max_age=7 * 24 * 3600)
resp.set_cookie('txtPassword', txtPassword, max_age=7 * 24 * 3600)
return resp
else:
return JsonResponse({"msg": "用户名或密码错误!", "error": 1})
else:
return JsonResponse({"msg": "验证码错误", "erro": 2})
except Exception as e:
print(e)
traceback.print_exc()
return JsonResponse({"msg": "请输入有效数据", "error": 3})
# 退出登陆状态,删除session
def exit(request):
username = request.GET.get("username") # 获取到需要退出的用户名
request.session.flush()
resp = JsonResponse({"msg": "退出成功!", "error": 0})
resp.delete_cookie('txtUsername')
resp.delete_cookie('txtPassword')
if username:
return resp
else:
return JsonResponse({"msg": "发生错误!", "error": 1})

regist.javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
<script src="/static/js/jquery.1.4.2-min.js"></script>
<script type="text/javascript">
{# 验证码刷新 #}
$(function () {
$("#vcodeImgBtn").click(function () {
$("#imgVcode")[0].src = "{% url 'user:getCaptcha' %}?"+new Date().getTime();
});
$("#imgVcode").click(function () {
$("#imgVcode")[0].src = "{% url 'user:getCaptcha' %}?"+new Date().getTime();
});

{#table下的所有的收入框失焦验证信息#}
$('#txt_username').blur(function () {
var re_phone = /^1[34578]\d{9}$/;
var re_email = /^[a-zA-Z0-9_-]+@([a-zA-Z0-9_-])+\.[A-Za-z]{2,3}/;
if (re_phone.test($("#txt_username").val()) || re_email.test($("#txt_username").val())) {
$("#spn_username_ok").css('display','inline-block');
$("#spn_username_ok").attr('class','icon_yes');
$("#spn_username_ok").html('');
return true
}else {
$("#spn_username_ok").css('display','inline-block');
$("#spn_username_ok").attr('class','');
$("#spn_username_ok").html('请检查手机号或邮箱的格式!');
return false
}
});

{# 密码强弱 #}
$('#txt_password').blur(function () {
var re_medium = /^.*(?=.{6,})(?=.*\d)(?=.*[A-Za-z]).*$/;
var re_week = /^.*(?=.{6,})(?=.*\d).*$|^.*(?=.{6,})(?=.*[A-Za-z]).*$/;
var re_strong = /^.*(?=.{6,})(?=.*\d)(?=.*[A-Za-z])(?=.*[!@#$%^&*?]).*$/;
var pwd = $("#txt_password").val();
if (pwd.length < 6){
$("#spn_epassword_ok").css('display','none');
$("#spn_epassword_ok").attr('class','icon_wrong');
$("#spnPwdStrong2").css('display','none');
$("#spnPwdStrong1").css('display','none');
$("#spnPwdStrong3").css('display','none');
$("#J_tipPassword").html("密码长度小于6位")
return false
} else if (re_strong.test(pwd)) {
$("#spnPwdStrong3").css('display', 'inline-block');
$("#spnPwdStrong2").css('display','none');
$("#spnPwdStrong1").css('display','none');
$("#J_tipPassword").html('');
$("#spn_epassword_ok").css('display', 'inline-block');
$("#spn_epassword_ok").attr('class', 'icon_yes');
return true
}else if (re_medium.test(pwd)) {
$("#spnPwdStrong2").css('display','inline-block');
$("#spnPwdStrong1").css('display','none');
$("#spnPwdStrong3").css('display','none');
$("#J_tipPassword").html('');
$("#spn_epassword_ok").css('display','inline-block');
$("#spn_epassword_ok").attr('class','icon_yes');
return true
}else if (re_week.test(pwd)){
$("#spnPwdStrong1").css('display','inline-block');
$("#spnPwdStrong2").css('display','none');
$("#spnPwdStrong3").css('display','none');
$("#J_tipPassword").html('');
$("#spn_epassword_ok").css('display','inline-block');
$("#spn_epassword_ok").attr('class','icon_yes');
return true
}
});

{# 检验密码 #}
$("#txt_repassword").blur(function () {
var pwd = $("#txt_password").val();
var repwd = $("#txt_repassword").val();
if (repwd==pwd && repwd !==''){
$("#spn_repassword_ok").css('display','inline-block');
$("#spn_repassword_ok").attr('class','icon_yes');
return true
}else {
$("#spn_repassword_ok").css('display','inline-block');
$("#spn_repassword_ok").attr('class','icon_wrong');
return false
}
});

{# 验证码校验 #}
$("#txt_vcode").blur(function () {
$.ajax({
type: "post",
url: "{% url 'user:check_code' %}",
data: "txt_vcode="+$("#txt_vcode").val()+"&csrfmiddlewaretoken={{ csrf_token }}",
success: function (msg) {
console.log(msg);
if (msg.error == 1) {
console.log('验证码错误');
$("#spn_vcode_ok").css('display','inline-block');
$("#spn_vcode_ok").attr('class','icon_wrong pin_i');
$("#J_tipVcode").html('验证码输入不正确!');
return false
}else {
console.log('验证码正确');
$("#spn_vcode_ok").css('display','inline-block');
$("#spn_vcode_ok").attr('class','icon_yes pin_i');
$("#J_tipVcode").html('');
return true
}
}
});
});

{# 霸王条款 #}
$("#J_submitRegister").click(function () {
var chb_agreement = $("#chb_agreement");
if (chb_agreement.attr('checked')){
$.ajax({
type: "POST",
url: "{% url 'user:regist_logic' %}",
data: "txt_username="+$("#txt_username").val() +"&txt_password="+$("#txt_password").val()+"&txt_repassword="+$("#txt_repassword").val()+"&txt_vcode="+$("#txt_vcode").val()+"&chb_agreement="+$("#chb_agreement").val()+"&csrfmiddlewaretoken={{ csrf_token }}",
success:function (msg) {
console.log(msg);
if (msg.error == 0){
$("#J_tipUsername")[0].innerHTML='此手机号已注册,请更换其它手机号,或使用该<a href="{% url 'user:login' %}" name="mobile_login _link" class="more">手机号登录</a>'
}else if (msg.error == 1){
location.href = "{% url 'user:regist_ok' %}?txt_username="+$("#txt_username").val();
}else if (msg.error == 2){
$("#J_tipSurePassword")[0].innerHTML='两次密码验证不一致,请重新输入!'
}else if (msg.error == 3){
$("#J_tipVcode")[0].innerHTML = '验证码验证不正确'
}else if (msg.error == 4){
alert(msg.msg)
}
}
})
}else {
alert('请阅读并同意本网站协议!')
}
})
});
</script>

login.javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
<script type="text/javascript">
$(function () {
$("#imgVcode").click(function () {
$("#imgVcode")[0].src = "{% url 'user:getCaptcha' %}?"+new Date().getTime();
});
$("#vcodeImgBtn").click(function () {
$("#imgVcode")[0].src = "{% url 'user:getCaptcha' %}?"+new Date().getTime();
});
{# 校验登录名是否为邮箱或者手机号 #}
$('#txtUsername').blur(function () {
var re_phone = /^1[34578]\d{9}$/;
var re_email = /^[a-zA-Z0-9_-]+@([a-zA-Z0-9_-])+\.[A-Za-z]{2,3}/;
var txtUsername = $("#txtUsername").val();
if (re_phone.test(txtUsername) || re_email.test(txtUsername)) {
$("#liDivErrorMessage").css('display','none');
$.ajax({
type: "get",
url: "{% url 'user:check_username' %}",
data: "txtUsername="+$("#txtUsername").val(),
success: function (msg) {
console.log(msg,'判断用户是否存在');
if (msg.error == 0){
$("#liDivErrorMessage").css('display','none');
}else {
$("#liDivErrorMessage").css('display','inline-block');
$("#liDivErrorMessage").html(msg.msg)
}
}
});
}else {
$("#liDivErrorMessage").css('display','inline-block');
$("#liDivErrorMessage").html("请输入邮箱/昵称/手机号码")
}
});
{# 密码校验 #}
$("#txtPassword").blur(function () {
var re_week = /^.*(?=.{6,})(?=.*\d).*$|^.*(?=.{6,})(?=.*[A-Za-z]).*$/;
var txtPassword = $("#txtPassword").val();
if (re_week.test(txtPassword)){
$("#login_password_error").css('display','none');
}else {
$("#login_password_error").css('display','inline-block');
}
});
{# 验证码校验 #}
$("#txtVerifyCode").blur(function () {
$.ajax({
type: "post",
url: "{% url 'user:check_code' %}",
data: "txt_vcode="+$("#txtVerifyCode").val()+"&csrfmiddlewaretoken={{ csrf_token }}",
success: function (msg) {
if (msg.error == 1) {
console.log('验证码错误');
$("#vcode_mindstyle").html('验证码错误')
}else {
console.log('验证码正确');
$("#vcode_mindstyle").html('')
}
}
});
});
{# 七天免登录 #}
$("#autologin").click(function () {
var autologin = $("#autologin").attr('checked');
if (autologin){
console.log('免登录');
$("#s1").css("display","inline-block");
$("#s2").css("display","none");
}else {
console.log('需要登陆');
$("#s2").css("display","inline-block");
$("#s1").css("display","none");
}
});
{# 点击登录按钮 #}
$("#submitLoginBtn").click(function () {
$.ajax({
type: "POST",
url: "{% url 'user:login_logic' %}",
data: "txtUsername="+$("#txtUsername").val()+"&txtPassword="+$("#txtPassword").val()+"&txtVerifyCode="+$("#txtVerifyCode").val()+"&autologin="+$("#autologin").val()+"&csrfmiddlewaretoken={{ csrf_token }}",
success:function (msg) {
if (msg.error == 0){
location.href = "{{ url }}";
}else if (msg.error == 1){
alert(msg.msg)
}else if (msg.error ==2){
alert(msg.msg)
}else if (msg.error == 3){
alert(msg.msg)
}
}
})
});
{# 注册跳转 #}
$("#J_loginToRegister").click(function () {
var url = location.href;
console.log(url);
location.href = "{% url 'user:regist' %}?url="+url;
});
});
</script>

六.购物车实现以及订单实现

通过构建购物车对象,实现添加,删除,修改,查询

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
import time,uuid,datetime
from django.db import transaction
from django.http import JsonResponse, HttpResponse
from django.shortcuts import render, redirect
from user.models import TCar, TBook, TUser, TOrder, TAddress, TOrderItem
# Create your views here.
# 面向对象实现购物车,方法:添加,删除,修改,查询
class Book:
def __init__(self, id, count):
book = TBook.objects.get(pk=id)
self.id = id
self.count = count
self.new_price = book.new_price
self.picture = book.picture
self.book_name = book.book_name
def totalprice(self):
return round(float(self.new_price) * float(self.count), 2)
class Car:
def __init__(self):
self.book_list = [] # 空列表
self.index = 0
def add_book(self, id, count=1):
book = self.get_book(id) # 查询bookid是否存在
if book:
book.count = int(book.count) + int(count) # 存在直接修改数量
else: # 不存在创建book对象存放
book = Book(id=id, count=count)
self.book_list.append(book)
# 根据id查询某本书是否存在购物车
def get_book(self, id):
for book in self.book_list:
if book.id == id:
return book
# 根据id删除
def remove_book(self, id):
book = self.get_book(id)
self.book_list.remove(book)
def __iter__(self):
self.index = 0
return self
def __next__(self):
if self.index < len(self.book_list):
item = self.book_list[self.index]
self.index += 1
return item
else:
raise StopIteration
def __len__(self):
return len(self.book_list)
def rem_book(request):
book_id = request.GET.get("id") # 书的id
car = request.session.get('car')
# 判断是否有登录状态
user_name = request.COOKIES.get('txtUsername')
user_pwd = request.COOKIES.get('txtPassword')
req = TUser.objects.filter(user_name=user_name, user_pwd=user_pwd)
if req:
id = TUser.objects.get(user_name=user_name) # 用户id
try:
with transaction.atomic():
car = TCar.objects.filter(user_id=id) # 用户的购物车
book_item = TCar.objects.get(book_id=book_id) # 需要删除的book对象
print(book_item)
book_item.delete()
sum_price = 0
for i in car:
sum_price += round(float(i.book.new_price) * float(i.count), 2)
return JsonResponse({"error": 0, "msg": "删除成功", "sum_price": sum_price})
return JsonResponse({"error": 1, "msg": "删除失败"})
except Exception as e:
print(e)
return JsonResponse({"error": 1, "msg": "删除失败"})
else:
if car:
totalprice = 0
sum_price = 0
for i in car:
totalprice = round(float(i.new_price) * float(i.count), 2)
sum_price += round(float(i.new_price) * float(i.count), 2)
with transaction.atomic():
car.remove_book(book_id)
request.session['car'] = car
return JsonResponse({"error": 0, "msg": "删除成功", "sum_price": sum_price, "totalprice": totalprice})
return JsonResponse({"error": 1, "msg": "删除失败"})

def add_car(request):
book_id = request.GET.get("bookid")
book_num = request.GET.get("booknum")
book_num1 = request.GET.get("booknum1") # 数量失焦的返回值
user_name = request.COOKIES.get('txtUsername')
user_pwd = request.COOKIES.get('txtPassword')
car = request.session.get('car') # 存放的未登陆的car
# 判断是否有登录状态
req = TUser.objects.filter(user_name=user_name, user_pwd=user_pwd)
sum_price = 0
totalprice = 0
if req:
id = TUser.objects.get(user_name=user_name) # 用户id
car = TCar.objects.filter(user_id=id) # 用户的购物车
if car:
# 判断book是否存在
book_item = TCar.objects.filter(book_id=book_id)
if book_item: # 存在book
if book_num1: # 失焦直接赋值给count
book_item[0].count = int(book_num1)
book_item[0].save()
totalprice = book_item[0].totalprice()
else:
book_item[0].count += int(book_num)
book_item[0].save()
else:
with transaction.atomic():
TCar.objects.create(book_id=book_id, count=book_num, user_id=id.id)
else:
with transaction.atomic():
TCar.objects.create(book_id=book_id, count=book_num, user_id=id.id)
for i in car:
sum_price += round(float(i.book.new_price) * float(i.count), 2)
return JsonResponse({"msg": "添加购物车成功!快去看看吧!", "error": 0, "totalprice": totalprice, "sum_price": sum_price})
else:
if car:
pass
else:
car = Car()
car.add_book(book_id, int(book_num))
request.session['car'] = car
sum_price = 0 # 总计
totalprice = 0 # 小计
for book in car.book_list:
if int(book.id) == int(book_id):
totalprice = round(float(book.new_price) * float(book.count), 2)
sum_price += round(float(book.new_price) * float(book.count), 2)
return JsonResponse({"msg": "添加购物车成功!快去看看吧!", "error": 0, "sum_price": sum_price, "totalprice": totalprice})

def car(request):
# 判断是否有登录状态
user_name = request.COOKIES.get('txtUsername')
user_pwd = request.COOKIES.get('txtPassword')
req = TUser.objects.filter(user_name=user_name, user_pwd=user_pwd)
car = request.session.get('car') # 存放的未登陆的car
if req:
request.session['login'] = 'ok'
# 将session中的数据迁移到购物车表中,相同数据应该合并数量,同时还需要清空session
try:
with transaction.atomic():
id = TUser.objects.get(user_name=user_name) # 用户id
if car:
# 判断book是否存在
for i in car:
book_item = TCar.objects.filter(book_id=i.id)
if book_item:
book_item[0].count += int(i.count)
book_item[0].save()
print(i.id, i.count)
else:
with transaction.atomic():
TCar.objects.create(book_id=i.id, count=i.count, user_id=id.id)
request.session.flush()
else:
with transaction.atomic():
car = TCar.objects.filter(user_id=id)
sum_price = 0 # 总计
for i in car:
sum_price += round(float(i.book.new_price) * float(i.count), 2)
return render(request, 'car/car.html',
{"car": car, "sum_price": sum_price, "user_name": user_name})
except Exception as e:
print(e)
else:
if car:
totalprice = 0
sum_price = 0 # 总计
for i in car:
totalprice = round(float(i.new_price) * float(i.count), 2)
sum_price += round(float(i.new_price) * float(i.count), 2)
return render(request, 'car/car.html',
{"car": car, "totalprice": totalprice, "sum_price": sum_price, })
return render(request, 'car/car.html')

def order(request):
# 判断是否有登录状态
user_name = request.COOKIES.get('txtUsername')
user_pwd = request.COOKIES.get('txtPassword')
req = TUser.objects.filter(user_name=user_name, user_pwd=user_pwd)
sum_price = 0
if req:
id = TUser.objects.get(user_name=user_name) # 用户id
car = TCar.objects.filter(user_id=id)
with transaction.atomic():
address = TAddress.objects.filter(user_id=id)
for i in car:
sum_price += round(float(i.book.new_price) * float(i.count), 2)
return render(request, "car/indent.html",
{"address": address, "car": car, "sum_price": sum_price, "user_name": user_name})
return redirect("user:login")


def order_ok(request):
user_name = request.COOKIES.get('txtUsername')
id = TUser.objects.get(user_name=user_name) # 用户id
car = TCar.objects.filter(user_id=id) # 用户的car
sum_price = 0 # 总计
# 获取到提交订单的地址
address = request.GET.get("address")
address_id = TAddress.objects.filter(address=address)[0]
# 生成订单号
order_id = str(time.strftime('%Y%m%d%H%M%S', time.localtime(time.time()))) + str(time.time()).replace('.', '')[-7:]
create_time = datetime.datetime.now().strftime('%Y-%m-%d')
# 订单项
for i in car:
sum_price += round(float(i.book.new_price) * float(i.count), 2)
with transaction.atomic():
order = TOrder.objects.create(order_id=order_id, create_time=create_time, price=sum_price,
address_id=address_id.id,
user_id=id.id)

count = 0
for i in car:
with transaction.atomic():
order_item = TOrderItem.objects.create(count=i.count, book_id=i.id, order_id=order.id)
count += i.count
i.delete()
return render(request, 'car/indent ok.html',
{"user_name": user_name, "order": order, "count": count, "order_item": order_item,
"address": address_id})


def order_submit(request):
user_name = request.COOKIES.get('txtUsername')
id = TUser.objects.get(user_name=user_name) # 用户
t_address = TAddress.objects.filter(user_id=id) # 用户的地址

ship_man = request.POST.get("ship_man")
address = request.POST.get("address")
addr_mobile = request.POST.get("addr_mobile")
cellphone = request.POST.get("cellphone")
post = request.POST.get("post")

print(ship_man, address, addr_mobile, cellphone, post)
# 判断地址是否存在,不存在添加
if t_address[0].address == address:
return JsonResponse({"msg": "地址已经存在", "error": 1})
else:
TAddress.objects.create(address=address, name=ship_man, post_code=post, cellphone=cellphone,
addr_mobile=addr_mobile,
user_id=id.id)
return JsonResponse({"msg": "订单生成", "error": 0})

car.Javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
<script type="text/javascript">
$(function () {
{#修改数量以及价格#}
$(".num_del").click(function () {
var num1 = $(this).next().val();
var num2 = Number(num1) - 1;
if (num2 == 0){
alert("商品个数不能再减了!")
}else {
$(this).next().val(num2);
var price2 = $(this).parent().parent().prev().text();
var count = Number(price2) * num2;
$(this).parent().parent().next().text(count.toFixed(2)) //修改小计
$.ajax({
type:"get",
url:"{% url 'car:add_car' %}",
data: "bookid="+$(this).next().attr('id1')+"&booknum="+(-1),
success: function (msg) {
$("#payAmount").html(msg.sum_price.toFixed(2));
$("#count").html(msg.sum_price.toFixed(2));
}
})
}
});
$(".num_add").click(function () {
var num1 = $(this).prev().val();
var num2 = Number(num1) + 1;
$(this).prev().val(num2);
var price2 = $(this).parent().parent().prev().text();
var count = Number(price2) * num2;
$(this).parent().parent().next().text(count.toFixed(2));
$.ajax({
type:"get",
url:"{% url 'car:add_car' %}",
data: "bookid="+$(this).prev().attr('id1')+"&booknum="+1,
success: function (msg) {
$("#payAmount").html(msg.sum_price.toFixed(2));
$("#count").html(msg.sum_price.toFixed(2));
}
})
});
{#删除产品#}
$(".delete").click(function () {
var td = $(this).parent().parent().parent();
$.ajax({
type: "get",
url: "{% url 'car:rem_book' %}",
data: "id="+$(this).attr('value'),
success: function (msg) {
console.log(msg);
if (msg.error == 0){
alert(msg.msg);
td.remove();
$("#payAmount").html(msg.sum_price.toFixed(2));
$("#count").html(msg.sum_price.toFixed(2));
}else{
td.remove();
$("#payAmount").html(msg.sum_price.toFixed(2));
$("#count").html(msg.sum_price.toFixed(2));
alert("删除失败!")
}
}
})
});
{# 输入框失焦 #}
$(".book_num").blur(function () {
var booknum= $(this).val();
var price = $(this).parent().parent().prev().text();
var totalprice = $(this).parent().parent().next().text();
console.log(totalprice);
totalprice = Number(booknum)* Number(price);
$(this).parent().parent().next().text(totalprice.toFixed(2));
if (booknum == parseInt(booknum) && booknum > 0){
$.ajax({
type: "get",
url: "{% url 'car:add_car' %}",
data: "booknum1="+$(this).val() + "&bookid="+$(this).attr('id1'),
success: function (msg){
console.log(msg);
$("#payAmount").html(msg.sum_price.toFixed(2));
$("#count").html(msg.sum_price.toFixed(2));
}
})
}else {
alert("输入数据不合法")
}
});
{# 登陆跳转 #}
$(".login_link").click(function () {
var url = location.href;
console.log(url);
location.href= "{% url 'user:login' %}?url="+url;
});
{# 注册跳转 #}
$("#regist").click(function () {
var url = location.href;
console.log(url);
location.href = "{% url 'user:regist' %}?url="+url;
});
{# 退出 #}
$("#exit").click(function () {
var url = location.href;
$.ajax({
type: 'get',
url: "{% url 'user:exit' %}",
data: "username="+$(this).attr('name'),
success: function (msg) {
console.log(msg);
if (msg.error==0){
alert(msg.msg);
location.href = "{% url 'car:car' %}"
$(".login_link")[0].innerHTML =' <a class="login_link" href="#" >登录</a>'
}else {
alert("发生错误")
}
}
})
});
});
</script>

car.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<table width="100%" border="0" cellspacing="0" cellpadding="0">
{% if user_name %}
{% for foo in car %}
<tbody data-stock="22388" data-offline="false" data-productid="24147882" data-timestamp="1484488454000" data-orderforspupormo="0">
<tr id="tr_424893864" class=" ">
<td class="row1">
<a href="javascript:void(0)" data-item="424893864" class="fn-product-check checknow check_on">选中</a> </td>
<td class="row_img">
<a href="{% url 'book:bookdetails' %}?id={{ foo.book.id }}" target="_blank" dd_name="查看详情">
<img onmouseout="$(this).parent().next().hide()" onmouseover="$(this).parent().next().show()" src="/static/book_pic/{{ foo.book.picture }}" width="80" height="80"> </a>
<div style="display: none;" class="img_big"><a href="/static/book_pic/{{ foo.book.picture }}" dd_name="查看详情" target="_blank">
<img src="/static/book_pic/{{ foo.book.picture }}"></a><span class="arrow"></span></div> </td>
<td class="row_name">
<div class="name">
<a href="{% url 'book:bookdetails' %}?id={{ foo.book.id }}" title="{{ foo.book.name }}" target="_blank" dd_name="查看详情" style="word-break:break-all; word-wrap:break-word;">{{ foo.book.book_name }}</a></div> </td>
<td class="row3"><span id="price1">{{ foo.book.new_price }}</span></td>
<td data-minbuy="0" class="fn-count-tip row3 ">
<span class="amount fn-updatecount " data-value="1">
<a class="num_del" dd_name="减少数量" href="javascript:void(0)" >-</a>
<input id1="{{ foo.book.id }}" class="book_num" data-value="{{ foo.count }}" value="{{ foo.count }}" type="text">
<a class="num_add" dd_name="增加数量" href="javascript:void(0)" >+</a></span></td>
<td class="row4"><span class="red" class="price2">{{ foo.totalprice }}</span></td>
<td class="row5 ">
<span>
<a href="javascript:void(0)" data-item="424893864" class="fn-add-wish" dd_name="加入收藏按钮">移入收藏</a>
</span>
<span>
<a value ="{{ foo.book.id }}" class="delete" href="javascript:void(0)" data-item="424893864" class="fn-remove-product" dd_name="删除普通品">删除</a></span></td> </tr></tbody>
{% endfor %}
{% else %}
{% for foo in car %}
<tbody data-stock="22388" data-offline="false" data-productid="24147882" data-timestamp="1484488454000" data-orderforspupormo="0">
<tr id="tr_424893864" class=" ">
<td class="row1">
<a href="javascript:void(0)" data-item="424893864" class="fn-product-check checknow check_on">选中</a> </td>
<td class="row_img">
<a href="{% url 'book:bookdetails' %}?id={{ foo.id }}" target="_blank" dd_name="查看详情">
<img onmouseout="$(this).parent().next().hide()" onmouseover="$(this).parent().next().show()" src="/static/book_pic/{{ foo.picture }}" width="80" height="80"> </a>
<div style="display: none;" class="img_big"><a href="/static/book_pic/{{ foo.picture }}" dd_name="查看详情" target="_blank">
<img src="/static/book_pic/{{ foo.picture }}"></a><span class="arrow"></span></div> </td>
<td class="row_name">
<div class="name">
<a href="{% url 'book:bookdetails' %}?id={{ foo.id }}" title="{{ foo.name }}" target="_blank" dd_name="查看详情" style="word-break:break-all; word-wrap:break-word;">{{ foo.book_name }}</a></div> </td>
<td class="row3"><span id="price1">{{ foo.new_price }}</span></td>
<td data-minbuy="0" class="fn-count-tip row3 ">
<span class="amount fn-updatecount " data-value="1">
<a class="num_del" dd_name="减少数量" href="javascript:void(0)" >-</a>
<input id1="{{ foo.id }}" class="book_num" data-value="{{ foo.count }}" value="{{ foo.count }}" type="text">
<a class="num_add" dd_name="增加数量" href="javascript:void(0)" >+</a></span></td>
<td class="row4"><span class="red" class="price2">{{ foo.totalprice }}</span></td>
<td class="row5 ">
<span>
<a href="javascript:void(0)" data-item="424893864" class="fn-add-wish" dd_name="加入收藏按钮">移入收藏</a>
</span>
<span>
<a value ="{{ foo.id }}" class="delete" href="javascript:void(0)" data-item="424893864" class="fn-remove-product" dd_name="删除普通品">删除</a></span></td> </tr></tbody>
{% endfor %}
{% endif %}
<tfoot>
<tr class="total">
<td class="row1">&nbsp;</td>
<td class="row_img">店铺合计</td>
<td colspan="2">&nbsp;</td>
<td colspan="3" class="row4">
<span id="count"class="red big ooline alignright">¥{{ sum_price }}</span></td> </tr></tfoot></table>

indent.Javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
<script type="text/javascript">
$(function () {
var ship_man = $("#ship_man").val();
var addr_mobile = $("#phone").val();
var cellphone = $("#cellphone").val();
var post = $("#post").val();
var address = $("#address").val();
{# 退出 #}
$("#exit").click(function () {
$.ajax({
type: 'get',
url: "{% url 'user:exit' %}",
data: "username="+$(this).attr('name'),
success: function (msg) {
console.log(msg);
if (msg.error==0){
alert(msg.msg);
location.href = "{% url 'index:index' %}"
}else {
alert(msg.msg)
}
}
})
});
{# 收货人校验 #}
$("#ship_man").blur(function () {
f4()
});
function f4() {
var ship_man = $("#ship_man").val();
console.log(ship_man);
if (ship_man == ''){
$("#spn_ship_man").css('display','inline-block')
return false
}else {
$("#spn_ship_man").css('display','none')
return true
}
}
{# 详细地址校验 #}
$("#address").blur(function () {
f3()
});
function f3() {
var address = $("#address").val();
var patrn = /.*省(.+)市.*/;
if (patrn.test(address)){
console.log("地址格式正确!");
$("#spn_ship_address").css('display','none');
return true
} else {
$("#spn_ship_address").css('display','inline-block');
return false
}
}
{# 邮箱校验 #}
$("#post").blur(function () {
f2()
});
function f2() {
var patrn = /^[a-zA-Z0-9 ]{3,12}$/;
var post = $("#post").val();
if (patrn.test(post)) {
console.log("邮政编码正确");
$("#spn_ship_post").css('display','none')
return true
}else {
$("#spn_ship_address").css('display','inline-block');
return false
}
}
{# 手机校验 #}
$("#cellphone").blur(function () {
f1()
});
function f1() {
var patrn = /^1[34578]\d{9}$/;
var cellphone = $("#cellphone").val();
var phone = $("#phone").val();
if (patrn.test(cellphone)){
console.log("手机号输入正确!");
$("#spn_ship_phone").css('display','none');
return true
} else {
console.log("手机号输入错误!");
$("#spn_ship_phone").css('display','inline-block');
return false
}
}
{# 固定电话校验 #}
$("#addr_mobile").blur(function () {
f();
});
function f() {
var patrn = /^(\+\d{1,3})(\s{1}[1-9]\d{1,2}\s{1})(\d{7,8})$/;
var addr_mobile = $("#addr_mobile").val();
if (patrn.test(addr_mobile)){
console.log("固定电话格式正确");
$("#spn_ship_phone").css('display','none');
return true
} else {
$("#spn_ship_phone").css('display','inline-block');
return false
}
}
{# 提交订单 #}
$("#order_sumbit").click(function () {
var ship_man = $("#ship_man").val();
var addr_mobile = $("#phone").val();
var cellphone = $("#cellphone").val();
var post = $("#post").val();
var address = $("#address").val();
console.log(ship_man,addr_mobile)
if ((f1() && f2() && f3() && f4()) || (f() && f2() && f3() && f4())){
console.log(1);
$.ajax({
type: "post",
url: "{% url 'car:order_submit' %}",
data: "ship_man="+ship_man+"&address="+address+"&addr_mobile="+addr_mobile+"&cellphone="+cellphone+"&post="+post+"&csrfmiddlewaretoken={{ csrf_token }}",
success: function (msg) {
console.log(msg);
if (msg.error == 0){
location.href = "{% url 'car:order_ok' %}?address="+address
}else if (msg.error ==1) {
console.log("地址已经存在")
location.href = "{% url 'car:order_ok' %}?address="+address
}else {
alert("产生错误!")
}
}
})
}
else {
alert("存在非法数据")
}

});
{# 选择配送地址 #}
$('#select').change(function () {
var a = $('#select option:selected');
if (a.val() !== "") {
$('input[type="text"]').attr('readonly','readonly');
$($('input[type="text"]')[0]).val(a.attr('name'));
$($('input[type="text"]')[1]).val(a.attr('address'));
$($('input[type="text"]')[2]).val(a.attr('post_code'));
$($('input[type="text"]')[3]).val(a.attr('addr_mobile'));
$($('input[type="text"]')[4]).val(a.attr('cell_phone'));
}else {
$('input[type="text"]').attr('readonly','');
for (var i=0; i < $('input[type="text"]').size();i++) {
$($('input[type="text"]')[i]).val("")
}
}
})
})
</script>

indent.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
<div class="address" id="dp_adress">
<span class="icon_adr">&nbsp;</span>配送地址:
{% if address %}
<div class="select_add">
<select name="" id="select" class="text fn-select-address">
<option value="" class="select_add1">请选择收货地址</option>
{% for address1 in address %}
<option class="select_add1" value="{{ address1.id }}" name="{{ address1.name }}" address="{{ address1.address }}" post_code="{{ address1.post_code }}" cellphone="{{ address1.cellphone }}" addr_mobile="{{ address1.addr_mobile }}" class="address_select">{{ address1.address }}</option>
{% endfor %}
</select>
{% else %}
<div class="select_add">
<select name="" id="select_add" class="text fn-select-address">
<option value="请选择收货地址">您还没有添加收货地址</option>
</select>
</div>
</div>
{% endif %}

<!--<a href="#" class="tip"></a>-->
<span class="tip_c" style="display:none;">针对不同配送地址,您的货物可能出现缺货或无货状态,敬请谅解。</span>
</div>

<ul class="shdz_con">
<p>▪ 收货地址</p>
<li><label><strong>*</strong>&nbsp;&nbsp;&nbsp;&nbsp;人:</label>
<input type="text" name="ship_man" id="ship_man" style="pointer-events: inherit;">
<span id="spn_ship_man" class="hint new_tip" style="display: none;" >请填写收货人姓名</span></li>
<li>
<label><strong>*</strong>收货地区:</label>
<select id="country_id" name="country_id" onfocus="check_focus('spn_country_province_city');" onblur="check_country_province_city();" onchange="set_province(this.options[this.selectedIndex].value);" style="display: block;"><option value="9000">中国</option><option value="16767">阿尔及利亚</option><option value="11717">阿根廷</option><option value="16161">阿联酋</option><option value="12020">埃及</option><option value="12525">爱尔兰</option><option value="11919">奥地利</option><option value="10909">澳大利亚</option><option value="14747">巴基斯坦</option><option value="12828">巴拿马</option><option value="10707">巴西</option><option value="16868">白俄罗斯</option><option value="16969">保加利亚</option><option value="13535">比利时</option><option value="15656">波多黎各</option><option value="14949">波兰</option><option value="17272">玻利维亚</option><option value="14444">丹麦</option><option value="10505">德国</option><option value="15353">俄罗斯</option><option value="10404">法国</option><option value="12222">菲律宾</option><option value="12323">芬兰</option><option value="17474">古巴</option><option value="12424">关岛</option><option value="10808">韩国</option><option value="12121">荷兰</option><option value="11010">加拿大</option><option value="15151">柬埔寨</option><option value="11111">捷克</option><option value="17373">喀麦隆</option><option value="14848">科威特</option><option value="15858">老挝</option><option value="16262">黎嫩</option><option value="15959">列支敦士登</option><option value="16060">卢森堡</option><option value="17070">卢旺达</option><option value="13030">罗马尼亚</option><option value="15555">马尔代夫</option><option value="13636">马来西亚</option><option value="10101">美国</option><option value="14545">蒙古</option><option value="17171">孟加拉</option><option value="11818">秘鲁</option><option value="11212">墨西哥</option><option value="13232">南非</option><option value="16666">南斯拉夫</option><option value="16363">尼日利亚</option><option value="11313">挪威</option><option value="12929">葡萄牙</option><option value="10303">日本</option><option value="11414">瑞典</option><option value="13737">瑞士</option><option value="13838">塞浦路斯</option><option value="16464">沙特阿拉伯</option><option value="13333">斯里兰卡</option><option value="13434">泰国</option><option value="13939">坦桑尼亚</option><option value="15757">土耳其</option><option value="15252">委内瑞拉</option><option value="15050">文莱</option><option value="14040">乌克兰</option><option value="16565">乌拉圭</option><option value="11515">西班牙</option><option value="14343">希腊</option><option value="13131">新加坡</option><option value="12727">新西兰</option><option value="14141">匈牙利</option><option value="12626">牙买加</option><option value="11616">意大利</option><option value="10606">印度</option><option value="14646">印度尼西亚</option><option value="10202">英国</option><option value="14242">越南</option><option value="15454">智利</option><option value="19999">其他国家或地区</option></select>
<select id="province_id" name="province_id" onfocus="check_focus('spn_country_province_city');" onblur="check_country_province_city();" onchange="set_city(this.options[this.selectedIndex].value);" style="display: block;"><option value="0">--请选择--</option><option value="111">北京</option><option value="112">天津</option><option value="113">河北</option><option value="114">山西</option><option value="115">内蒙古</option><option value="121">辽宁</option><option value="122">吉林</option><option value="123">黑龙江</option><option value="131">上海</option><option value="132">江苏</option><option value="133">浙江</option><option value="134">安徽</option><option value="135">福建</option><option value="136">江西</option><option value="137">山东</option><option value="141">河南</option><option value="142">湖北</option><option value="143">湖南</option><option value="144">广东</option><option value="145">广西</option><option value="146">海南</option><option value="150">重庆</option><option value="151">四川</option><option value="152">贵州</option><option value="153">云南</option><option value="154">西藏</option><option value="161">陕西</option><option value="162">甘肃</option><option value="163">青海</option><option value="164">宁夏</option><option value="165">新疆</option><option value="171">台湾</option><option value="172">香港</option><option value="173">澳门</option><option value="33">其他省份</option></select>
<select id="city_id" name="city_id"><option value="0">请选择</option></select>
<select id="town_id" name="town_id" ><option value="0">请选择</option></select>
<select id="quarter_id" name="quarter_id" ><option value="0">请选择</option></select></li>
<li><label><strong>*</strong>详细地址:</label>
<input type="text" name="ship_man" id="address" style="pointer-events: inherit;">
<span id="spn_ship_address" class="hint new_tip" style="display: none;">详细地址格式为xx省xx市</span></li>
<li><label><strong>*</strong>邮政编码:</label>
<input type="text" name="ship_man" id="post" style="pointer-events: inherit;">
<span id="spn_ship_post" class="hint new_tip" style="display: none;">邮编输入错误</span></li>
</li>
<li><label><strong>*</strong>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;机:</label>
<input type="text" name="ship_man" id="cellphone" style="pointer-events: inherit;">
<label>&nbsp;&nbsp;固定电话</label>
<input type="text" name="ship_man" id="addr_mobile" style="pointer-events: inherit;">
<span id="spn_ship_phone" class="hint new_tip" style="display: none;">请输入手机号或者固定电话</span></li>
</li>

</ul>
<div class="balance"><p>商品金额:¥{{ sum_price }}</p><p class="yfze">应付总额(含运费):<em>¥{{ sum_price }}</em></p><p>
<a href="javascript:void (0);" id="order_sumbit">提交订单</a></p></div>
</div>
<div class="shdz">
<h3>订单1(百知网配送)</h3>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tbody><tr style="height:30px; line-height:30px;">
<th width="34%">商品名称</th>
<th width="11%">所在仓库</th>
<th width="13%">百知价</th>
<th width="11%">促销价</th>
<th width="9%">数量</th>
<th width="11%">小计</th>
<th width="11%">操作</th>
</tr>
{% for foo in car %}
<tr>
<td>{{ foo.book.book_name }}</td>
<td align="center">{{ foo.book.publish }}</td>
<td align="center">¥{{ foo.book.new_price }}({{ foo.book.discount }}折)</td>
<td align="center">--</td>
<td align="center">{{ foo.count }}</td>
<td align="center">¥{{ foo.totalprice }}</td>
<td align="center"><a href="javascript:void (0);">放回购物车</a></td>
</tr>
{% endfor %}

<tr>
<td colspan="2"><input type="checkbox" >此订单作为礼品赠送他人</td>
<td colspan="2"><strong>运费:</strong>当确认送货方式后显示</td>
<td class="table_zj" colspan="3"><strong>小计总额:</strong><em>¥{{ sum_price }}</em></td>
</tr>
</tbody></table>
</div>
Prev:
Crawler --爬虫爬取百度图片
Next:
jQuery-配送地址下拉框