Django实现简易淘宝网站 在之前的博客中有相关文章，介绍了Django项目的搭建，今天在这里来给大家一下，之前课程设计做的一个由Django实现的简单淘宝网站。 先 一个Django项目可以分为很多个APP，用来隔离不同功能模块的代码。 创建App的应用如下： 重定向： 1. 购物车 2. 商品页 3. 支付页面 5. 用户注册 6. 用户登录 这里给出资源下载的地址，欢迎三连。
项目演示：
一、安装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项目下，直接使用以下命令创建：
python manage.py startapp cart：创建购物车
python manage.py startapp items：创建商品类目
python manage.py startapp pay：创建支付
python manage.py startapp user：创建用户
创建出来的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', ]
六、简单淘宝网的前端
<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> <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> <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; } <!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; /* 当内容高度大于图片高度时，背景图像的位置相对于viewport固定 */ 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标签下的属性选择器*/ 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> <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; /*以下css用于让登录表单垂直居中在界面,可删除*/ 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')
本网页所有视频内容由 imoviebox边看边下-网页视频下载, iurlBox网页地址收藏管理器 下载并得到。
ImovieBox网页视频下载器 下载地址: ImovieBox网页视频下载器-最新版本下载
本文章由: imapbox邮箱云存储,邮箱网盘,ImageBox 图片批量下载器,网页图片批量下载专家,网页图片批量下载器,获取到文章图片,imoviebox网页视频批量下载器,下载视频内容,为您提供.
阅读和此文章类似的: 全球云计算
官方软件产品操作指南 (170)
