项目演示：
Django实现简易淘宝网站
一、安装Django
在之前的博客中有相关文章，介绍了Django项目的搭建，今天在这里来给大家分享一下，之前课程设计做的一个由Django实现的简单淘宝网站。
Django的入门开发教程——搭建第一个项目（Windows系统）
二、目录介绍
taobao/
├── manage.py # 管理文件
└── taobao # 项目目录
├── __init__.py
├── settings.py # 配置
├── urls.py # 路由 --> URL和函数的对应关系
└── wsgi.py # runserver命令就使用wsgiref模块做简单的web server
三、运行Django项目
先cd taobao切换进入Django项目路径，然后执行以下命令：
python manage.py runserver
四、Setting配置文件
- 模板文件配置
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [BASE_DIR + '/templates/'],
'APP_DIRS': True,
'OPTIONS': {
'context_processors': [
'django.template.context_processors.debug',
'django.template.context_processors.request',
'django.contrib.auth.context_processors.auth',
'django.contrib.messages.context_processors.messages',
],
},
},
]
- 静态文件配置
STATIC_URL = '/templates/'
STATICFILES_DIRS = [
os.path.join(BASE_DIR, "templates"),
]
五、创建的App
一个Django项目可以分为很多个APP，用来隔离不同功能模块的代码。
在控制台切换路径到当前Django项目下，直接使用以下命令创建：
python manage.py startapp cart：创建购物车
python manage.py startapp items：创建商品类目
python manage.py startapp pay：创建支付
python manage.py startapp user：创建用户
创建App的应用如下：
创建出来的app还需要到setting.py注册才能用
INSTALLED_APPS = [
'django.contrib.admin',#这是一个管理站点,管理后台应用
'django.contrib.auth',#这是一个权限框架。
'django.contrib.contenttypes',#这是一个内容类型的框架
'django.contrib.sessions',#这是一个会话（session）框架。
'django.contrib.messages',#这是一个消息框架。
'django.contrib.staticfiles',#这是一个用来管理静态文件的框架
'items.apps.ItemsConfig',
'user.apps.UsersConfig',
]
重定向：
六、简单淘宝网的前端
1. 购物车
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="/templates/style.css">
<title>王菜鸟的淘宝网--我的购物车</title>
</head>
<body class='relative cart-list'>
{% if list %}
<div class='item-list'>
{% for l in list %}
<div class='item-container'>
<img class='items' src={{l.image}} />
<div class="inline-block item-desc">
{{ l.price }}
{% if l.postal %}
包邮
{% endif %}
{{ l.title | safe}}
{{ l.shopNick }}
{{ l.payNum }}
</div>
<div class='option'>
<div class='count inline-block'>
数量 {{l.count}}
</div>
</div>
</div>
{% endfor %}
<form action="{%url 'pay:success' %}" method="POST">
{% csrf_token %}
<button class="to-pay">去结算</button>
</form>
</div>
{% else %}
<p>亲，您的购物车是空的呢！请去添加商品到购物车吧~</p>
<a href="{%url 'items:index' %}">点击此处返回首页</a>
{% endif %}
</body>
</html>
2. 商品页
<html lang="en">
<head>
<meta charset="utf -8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>王菜鸟的淘宝网</title>
<style> form { display: inline; } .add-to-cart { color: #fff; border-color: #f40; background: #f40; cursor: pointer; width: 100px; height: 22px; text-align: center; font-family: 'Hiragino Sans GB', 'microsoft yahei', sans-serif; font-size: 10px; border-width: 1px; border-style: solid; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; } .to-pay { position: absolute; bottom: 10px; right: 50%; color: #fff; border-color: #f40; background: #f40; cursor: pointer; width: 100px; height: 35px; text-align: center; font-family: 'Hiragino Sans GB', 'microsoft yahei', sans-serif; font-size: 20px; line-height: 35px; border-width: 1px; border-style: solid; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; } .relative { position: relative; } .hidden { display: none; } .inline-block { display: inline-block; } .item-list .item-container { vertical-align: top; display: inline-block; width: 18%; border: 1px solid #eee; background: #fff; padding: 5px; height: 335px; position: relative; margin-bottom: 15px; } .item-list .item-desc { width: 100%; font-size: 15px; text-align: justify; } .item-list .items { height: 240px; width: 100%; } .item-list .option { position: absolute; bottom: 2px; } .cart-list { padding-bottom: 80px; } .nav { margin-bottom: 10px; } .nav .go-to-cart { display: block; color: #fff; border-color: #f40; background: #f40; cursor: pointer; width: 60px; height: 22px; line-height: 22px; text-align: center; font-family: 'Hiragino Sans GB', 'microsoft yahei', sans-serif; font-size: 10px; border-width: 1px; border-style: solid; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; } </style>
</head>
{% load static %}
<body>
<div class="nav">
<img src="{% static "banner.jpg" %}">
<h3 style="text-align:center;">亲，欢迎您来到天猫购物哟，快来看看有没有喜欢的加入购物车吧。</h3>
</div>
<div class="nav">
{% if request.sessions.user %}
欢迎你{{ request.session.user }}
{% else %}
<a href="{%url 'user:register'%}">注册</a>
<a href="{%url 'user:login'%}">登录</a>
<a href="https://www.taobao.com/" target="_blank">点击此处访问淘宝官网!</a>
{% endif %}
<a class="go-to-cart" href="{%url 'cart:list'%}">去购物车</a>
</div>
{% if list %}
<div class="item-list">
{% for l in list %}
<div class="item-container">
<img class="items" src="{{l.image}}" />
<div class="inline-block item-desc">
{{ l.price }} {% if l.postal %} 包邮 {% endif %} {{ l.title | safe}}
{{ l.shopNick }} {{ l.payNum }}
</div>
<div class="option">
<div class="count inline-block">
库存 {{l.count}}
</div>
<form action="{%url 'cart:add-to-cart' l.id%}" method="POST">
{% csrf_token %}
<input class="hidden" />
<button class="add-to-cart" onclick="window.alert('添加成功')" type="submit" >
加入购物车
</button>
</form>
</div>
</div>
{% endfor %}
</div>
{% else %}
<p>亲，您的购物车是空的呢！请去添加商品到购物车吧~</p>
{% endif %}
<h3 style="text-align:center;">技术支持：王菜鸟</h3>
<h5 style="text-align:center;">Powered by The king of rookies!</h5>
<h6 style="text-align:center;">1720929001@qq.com</h6>
</body>
</html>
3. 支付页面
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>购物车结算</title>
</head>
<body>
<div>
支付成功！亲，欢迎下次光临呢~
<a href="{%url 'items:index' %}">点击此处返回首页</a>
</div>
</body>
</html>
form {
display: inline;
}
.add-to-cart {
color: #FFF;
border-color: #F40;
background: #F40;
cursor: pointer;
width: 100px;
height: 22px;
text-align: center;
font-family: "Hiragino Sans GB", "microsoft yahei", sans-serif;
font-size: 10px;
border-width: 1px;
border-style: solid;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
}
.to-pay {
position: absolute;
bottom: 10px;
right: 50%;;
color: #FFF;
border-color: #F40;
background: #F40;
cursor: pointer;
width: 100px;
height: 35px;
text-align: center;
font-family: "Hiragino Sans GB", "microsoft yahei", sans-serif;
font-size: 20px;
line-height: 35px;
border-width: 1px;
border-style: solid;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
}
.relative {
position: relative;
}
.hidden {
display: none
}
.inline-block {
display: inline-block;
}
.item-list .item-container {
vertical-align: top;
display: inline-block;
width: 18%;
border: 1px solid #eee;
background: #fff;
padding: 5px;
height: 335px;
position: relative;
margin-bottom: 15px;
}
.item-list .item-desc {
width: 100%;
font-size: 15px;
text-align: justify;
}
.item-list .items {
width: 100%;
}
.item-list .option {
position: absolute;
bottom: 2px;
}
.cart-list {
padding-bottom: 80px;
}
.nav {
margin-bottom: 10px;
}
.nav .go-to-cart {
display: inline-block;
color: #FFF;
border-color: #F40;
background: #F40;
cursor: pointer;
width: 60px;
height: 22px;
line-height: 22px;
text-align: center;
font-family: "Hiragino Sans GB", "microsoft yahei", sans-serif;
font-size: 10px;
border-width: 1px;
border-style: solid;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
}
.nav .go-to-login {
display: inline-block;
margin-left: 5px;
color: #FFF;
border-color: #F40;
background: #F40;
cursor: pointer;
width: 60px;
height: 22px;
line-height: 22px;
text-align: center;
font-family: "Hiragino Sans GB", "microsoft yahei", sans-serif;
font-size: 10px;
border-width: 1px;
border-style: solid;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
}
5. 用户注册
<!DOCTYPE html>
<html>
<head>
<title>注册</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<style type="text/css"> body{ background: #353f42; {% comment %} background-image: url(https://imgchr.com/content/images/system/home_cover_1552414407320_3a5f92.jpg); background-repeat: no-repeat; background-attachment: fixed; background-size: cover; background-color: #CCCCCC; {% endcomment %} } #user_reg{ font-family: 微软雅黑; font-size: 40px; text-align: center; margin-top: 200px; } form{ width: 500px; margin: 40px auto auto auto; font-size: 25px; } input{ height: 30px; width: 12em; margin-top: 5px; margin-bottom: 5px; } input[type="submit"],input[type="reset"]{ height: 25px; width: 5em; margin-top: 5px; margin-left: 6px; } </style>
</head>
<script type="text/javascript"> //onblur失去焦点事件，用户离开输入框时执行 JavaScript 代码： //函数1：验证邮箱格式 function validate_username(username){ //定义正则表达式的变量:邮箱正则 var emailReg=/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/; //console.log(username); if(username !="" && username.search(emailReg) != -1) { document.getElementById("test_user").innerHTML = "<font color='green' size='3px'>√邮箱格式正确</font>"; }else{ document.getElementById("test_user").innerHTML = "<font color='red' size='3px'>邮箱格式错误</font>"; } } //函数2：验证密码是否符合要求：匹配6位密码，由数字和字母组成： function validate_password(password){ //^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6-10}$ //测试密码：12345y var passwordReg=/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6}$/; if(password != "" && password.search(passwordReg) != -1) { document.getElementById("test_pw").innerHTML = "<font color='green' size='3px'>√密码格式正确</font>"; }else{ document.getElementById("test_pw").innerHTML = "<font color='red' size='3px'>密码格式错误</font>"; alert("密码有6位，由数字和字母组成!"); } } //函数3：验证两次输入的密码是否一样 function validate_password2(password2){ var password = document.getElementById("password").value; //测试：console.log(password); //测试：console.log(password2); if (password == ""){ document.getElementById("is_test_pw").innerHTML = "<font color='red' size='3px'>密码不为空</font>"; }else if(password==password2){ document.getElementById("is_test_pw").innerHTML = "<font color='green' size='3px'>√两次输入的密码相同</font>"; }else{ document.getElementById("is_test_pw").innerHTML = "<font color='red' size='3px'>两次输入的密码不相同</font>"; console.log("密码有6位，由数字和字母组成!"); } } //函数4：验证表单是否已经填好 function validate_form(){ var username = document.getElementById("username").value; var password = document.getElementById("password").value; var password2 = document.getElementById("password2").value; //console.log("表单填写正确，可以正常提交！"); //这三个，如果任何一个有问题，都返回false //18128@qq.com 12345y var emailReg=/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/; var passwordReg=/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6}$/; if(username != "" && emailReg.test(username)){ if(password !="" && passwordReg.test(password)){ if(password2==password){ alert("信息填写正确，可以正常提交！"); console.log("信息填写正确，可以正常提交！"); return true; }else{ alert("密码不一致，提交失败，请重新填写！"); console.log("密码不一致，提交失败，请重新填写！"); return false; } }else{ alert("密码格式错误，提交失败，请重新填写！"); console.log("密码格式错误，提交失败，请重新填写！"); return false; } }else{ alert("注册的账号不符合要求，提交失败，请重新填写！"); console.log("注册的账号不符合要求，提交失败，请重新填写！"); return false; } } </script>
<body>
<div id="user_reg">用户注册:</div>
<form action="{%url 'user:onRegister'%}" method="post" name="form" >
<table>
<tr>
<td>请输入用户名：</td>
<td><input type="text" id="username" name="name" placeholder="只能用邮箱注册" onblur="validate_username(this.value)"/></td>
<td id="test_user"></td>
</tr>
<tr>
<td>请输入密码：</td>
<td><input type="password" id="password" name="password" placeholder="6位密码由数字和字母组成" onblur="validate_password(this.value)"/></td>
<td id="test_pw"></td>
</tr>
<tr>
<td>请确认密码：</td>
<td><input type="password" id="password2" name="password2" onblur="validate_password2(this.value)" /></td>
<td id="is_test_pw"></td>
</tr>
<tr>
<td></td>
<td ><input type="submit" id="submit_form" value="注册" onclick="return validate_form()"/>
<input type="reset" value="重置"/>
</td>
</tr>
</table>
</form>
</body>
</html>
6. 用户登录
<head>
<meta charset="UTF-8">
<title>登录</title>
<style> body { background: #353f42; } * { padding: 0; margin: 0; } .main { margin: 0 auto; padding-left: 25px; padding-right: 25px; padding-top: 15px; width: 350px; height: 350px; background: #FFFFFF; position: absolute; top: 50%; left: 50%; margin-top: -175px; margin-left: -175px; } .title { width: 100%; height: 40px; line-height: 40px; } .title span { font-size: 18px; color: #353f42; } .title-msg { width: 100%; height: 64px; line-height: 64px; } .title:hover { cursor: default; } .title-msg:hover { cursor: default; } .title-msg span { font-size: 12px; color: #707472; } .input-content { width: 100%; height: 120px; } .input-content input { width: 330px; height: 40px; border: 1px solid #dad9d6; background: #ffffff; padding-left: 10px; padding-right: 10px; } .enter-btn { width: 350px; height: 40px; color: #fff; background: #0bc5de; line-height: 40px; text-align: center; border: 0px; } .foor { width: 100%; height: auto; color: #9b9c98; font-size: 12px; margin-top: 20px; } .enter-btn:hover { cursor: pointer; background: #1db5c9; } .foor div:hover { cursor: pointer; color: #484847; font-weight: 600; } .left { float: left; } .right { float: right; } </style>
</head>
<body>
<div class="main">
<div class="title">
<span>密码登录</span>
</div>
<div class="title-msg">
<span>请输入登录账户和密码</span>
</div>
<form class="login-form" action="{%url 'user:login'%}" method="post" novalidate>
<!--输入框-->
<div class="input-content">
<!--autoFocus-->
<div>
<input type="text" autocomplete="off" placeholder="用户名" name="user" required/>
</div>
<div style="margin-top: 16px">
<input type="password" autocomplete="off" placeholder="登录密码" name="password" required maxlength="32"/>
</div>
</div>
<!--登入按钮-->
<div style="text-align: center">
<button type="submit" class="enter-btn">
<a href="{%url 'items:index' %}">登录</a>
</button>
</div>
</form>
</div>
</body>
七、Django的视图层
from django.shortcuts import render, redirect
from django.http import HttpResponse, HttpResponseRedirect
from django.urls import reverse
from django.views.decorators.csrf import csrf_exempt
from data.cartItems import context as cartContext
# from data.itemList import context as itemContext
from user.models import UserList
def register(request):
return render(request, 'user/register.html')
@csrf_exempt
def login(request):
if request.method == "POST":
userName = request.POST.get('user', None)
password = request.POST.get('password', None)
message = "所有字段都必须填写！"
if userName and password: # 确保用户名和密码都不为空
username = userName.strip()
# 用户名字符合法性验证
# 密码长度验证
# 更多的其它验证.....
try:
user = UserList.objects.get(name=userName)
if user.password == password:
request.session['user'] = user.name
return redirect('/')
else:
message = "密码不正确！"
except:
message = "用户名不存在！"
return render(request, 'user/login.html', {"message": message})
return render(request, 'user/login.html')
@csrf_exempt
def onRegister(request):
username = request.POST.get('name', None)
password = request.POST.get('password', None)
UserList.objects.create(name=username,password=password)
return render(request, 'user/login.html')
这里给出资源下载的地址，欢迎三连。
Django实现简易淘宝网
