Django BBS实战注册，带验证码和滚动验证
在写之前我们需要构思一些，有哪些表需要被建立和关联关系。下面是我的构思：
构思完成之后：首先我们需要创建我们的Django项目，下面是我建立的Django项目，
首先，第一步我们先要配置文件。如果，你是创建MySQL数据库的，要在setting中
第二步，我们需要用到js，css啊，我们存放在Django中static文件中，所以需要配置静态文件
配置完成之后，要开始写我们之前构思的models中的表的创建了
from django.db import models # Create your models here. from django.contrib.auth.models import AbstractUser class UserInfo(AbstractUser): """ 用户信息表 """ nid = models.AutoField(primary_key=True) phone = models.CharField(max_length=11, null=True, unique=True) avatar = models.FileField(upload_to="avatars/", default="avatars/default.png") blog = models.OneToOneField(to="Blog", to_field="nid", null=True) def __str__(self): return self.username class Meta: verbose_name = "用户信息" verbose_name_plural = verbose_name class Blog(models.Model): """ 博客信息 """ nid = models.AutoField(primary_key=True) title = models.CharField(max_length=64) # 个人博客标题 theme = models.CharField(max_length=32) # 博客主题 def __str__(self): return self.title class Meta: verbose_name = "博客" verbose_name_plural = verbose_name class Category(models.Model): """ 个人博客文章分类 """ nid = models.AutoField(primary_key=True) title = models.CharField(max_length=32) # 分类标题 blog = models.ForeignKey(to="Blog", to_field="nid") # 外键关联博客，一个博客站点可以有多个分类 def __str__(self): return "{}-{}".format(self.blog.title, self.title) class Meta: verbose_name = "文章分类" verbose_name_plural = verbose_name class Tag(models.Model): """ 标签 """ nid = models.AutoField(primary_key=True) title = models.CharField(max_length=32) # 标签名 blog = models.ForeignKey(to="Blog", to_field="nid") # 所属博客 def __str__(self): return self.title class Meta: verbose_name = "标签" verbose_name_plural = verbose_name class Article(models.Model): """ 文章 """ nid = models.AutoField(primary_key=True) title = models.CharField(max_length=50) # 文章标题 desc = models.CharField(max_length=255) # 文章描述 create_time = models.DateTimeField(auto_now_add=True) # 创建时间 category = models.ForeignKey(to="Category", to_field="nid", null=True) user = models.ForeignKey(to="UserInfo", to_field="nid") tags = models.ManyToManyField( to="Tag", through="Article2Tag", through_fields=("article", "tag"), ) def __str__(self): return self.title class Meta: verbose_name = "文章" verbose_name_plural = verbose_name class ArticleDetail(models.Model): """ 文章详情表 """ nid = models.AutoField(primary_key=True) content = models.TextField() article = models.OneToOneField(to="Article", to_field="nid") class Meta: verbose_name = "文章详情" verbose_name_plural = verbose_name class Article2Tag(models.Model): """ 文章和标签的多对多关系表 """ nid = models.AutoField(primary_key=True) article = models.ForeignKey(to="Article", to_field="nid") tag = models.ForeignKey(to="Tag", to_field="nid") def __str__(self): return "{}-{}".format(self.article, self.tag) class Meta: unique_together = (("article", "tag"),) verbose_name = "文章-标签" verbose_name_plural = verbose_name class ArticleUpDown(models.Model): """ 点赞表 """ nid = models.AutoField(primary_key=True) user = models.ForeignKey(to="UserInfo", null=True) article = models.ForeignKey(to="Article", null=True) is_up = models.BooleanField(default=True) class Meta: unique_together = (("article", "user"),) verbose_name = "点赞" verbose_name_plural = verbose_name class Comment(models.Model): """ 评论表 """ nid = models.AutoField(primary_key=True) article = models.ForeignKey(to="Article", to_field="nid") user = models.ForeignKey(to="UserInfo", to_field="nid") content = models.CharField(max_length=255) # 评论内容 create_time = models.DateTimeField(auto_now_add=True) parent_comment = models.ForeignKey("self", null=True) def __str__(self): return self.content class Meta: verbose_name = "评论" verbose_name_plural = verbose_name
创建之后，我们需要在terminal中输入 python3 manage.py makemigrations
接下来，我是用forms表单的形式来创建页面的，所以在blog文件下创建一个forms.py文件。当然，你可以不用forms表单来写，随你！
在forms.py中自定义类，已经内容。我们这里先写的是登录。当然要写，username，password
然后，上网页 http://www.geetest.com
下完之后我们开始写URL--->views--->templates这样的顺序写
from django.shortcuts import render, HttpResponse from blog import forms from django.contrib import auth from django.http import JsonResponse # 极验科技依赖 from geetest import GeetestLib # Create your views here. pc_geetest_id = "b46d1900d0a894591916ea94ea91bd2c" pc_geetest_key = "36fc3fe98530eea08dfc6ce76e3d24c4" # 滑动验证码加载需要的视图函数 def pcgetcaptcha(request): user_id = 'test' gt = GeetestLib(pc_geetest_id, pc_geetest_key) status = gt.pre_process(user_id) request.session[gt.GT_STATUS_SESSION_KEY] = status request.session["user_id"] = user_id response_str = gt.get_response_str() return HttpResponse(response_str) def login(request): form_obj = forms.LoginForm() if request.method == "POST": ret = {"code": 0} username = request.POST.get("username") password = request.POST.get("password") v_code = request.POST.get("v_code", "") if v_code.upper() == request.session.get("v_code", ""): # 验证码正确 user = auth.authenticate(username=username, password=password) if user: # 用户名密码正确 ret["data"] = "/index/" else: # 用户名或密码错误 ret["code"] = 1 ret["data"] = "用户名或密码错误" else: # 验证码错误 ret["code"] = 1 ret["data"] = "验证码错误" return JsonResponse(ret) return render(request, "login.html", {"form_obj": form_obj}) # 用滑动验证码版登陆 def login2(request): form_obj = forms.LoginForm() if request.method == "POST": gt = GeetestLib(pc_geetest_id, pc_geetest_key) challenge = request.POST.get(gt.FN_CHALLENGE, '') validate = request.POST.get(gt.FN_VALIDATE, '') seccode = request.POST.get(gt.FN_SECCODE, '') status = request.session[gt.GT_STATUS_SESSION_KEY] user_id = request.session["user_id"] if status: result = gt.success_validate(challenge, validate, seccode, user_id) else: result = gt.failback_validate(challenge, validate, seccode) # 如果验证码正确 if result: ret = {"code": 0} username = request.POST.get("username") password = request.POST.get("password") user = auth.authenticate(username=username, password=password) if user: # 用户名密码正确 ret["data"] = "/index/" else: # 用户名或密码错误 ret["code"] = 1 ret["data"] = "用户名或密码错误" return JsonResponse(ret) return render(request, "login2.html", {"form_obj": form_obj}) def v_code(request): from PIL import Image, ImageDraw, ImageFont import random # 定义一个生成随机颜色代码的内部函数 def get_color(): return random.randint(0,255), random.randint(0,255), random.randint(0,255) # 生成一个图片对象 img_obj = Image.new( "RGB", (250, 35), color=get_color() ) # 在图片中加文字 # 生成一个画笔对象 draw_obj = ImageDraw.Draw(img_obj) # 加载字体文件 font_obj = ImageFont.truetype("static/font/kumo.ttf", size=28) # 写字 # draw_obj.text( # (0, 0), # 位置 # "A", # 内容 # (0,0,0), # 颜色 # font=font_obj # ) # for循环5次，每次写一个随机的字符 tmp_list = [] for i in range(5): n = str(random.randint(0, 9)) # 随机生成一个数字 l = chr(random.randint(97, 122)) # 随机生成一个小写的 u = chr(random.randint(65, 90)) # 随机生成一个大写的 r = random.choice([n, l, u]) # 从上面三个随机选一个 tmp_list.append(r) draw_obj.text( (i*48+20, 0), # 位置 r, # 内容 get_color(), # 颜色 font=font_obj ) # 得到生成的随机验证码 v_code_str = "".join(tmp_list) # 不能使用全局变量保存验证码，会被覆盖！ # 每一个请求应该对应自己的验证码 # global VCODE # VCODE = v_code_str request.session["v_code"] = v_code_str.upper() # 加干扰线 # width = 250 # 图片宽度（防止越界） # height = 35 # for i in range(2): # x1 = random.randint(0, width) # x2 = random.randint(0, width) # y1 = random.randint(0, height) # y2 = random.randint(0, height) # draw_obj.line((x1, y1, x2, y2), fill=get_color()) # # # 加干扰点 # for i in range(2): # draw_obj.point([random.randint(0, width), random.randint(0, height)], fill=get_color()) # x = random.randint(0, width) # y = random.randint(0, height) # draw_obj.arc((x, y, x+4, y+4), 0, 90, fill=get_color()) # 第一版： 将生成的图片保存到文件中 # with open("xx.png", "wb") as f: # img_obj.save(f, "png") # print("图片已经生成！") # with open("xx.png", "rb") as f: # return HttpResponse(data, content_type="image/png") # 第二版：直接将图片在内存中保存 from io import BytesIO tmp = BytesIO() # 生成一个io对象 img_obj.save(tmp, "png") data = tmp.getvalue() return HttpResponse(data, content_type="image/png") def index(request): return render(request, "index.html")
templates
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <h1>O98K</h1> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>欢迎登陆</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="/static/bootstrap-3.3.7/css/bootstrap.min.css"> <link rel="stylesheet" href="/static/mystyle.css"> </head> <body> <div class="container"> <div class="row"> <div class="col-md-4 col-md-offset-4" id="login-form"> <form autocomplete="off" novalidate> <div class="form-group"> <label for="{{ form_obj.username.id_for_label }}">{{ form_obj.username.label }}</label> {{ form_obj.username }} </div> <div class="form-group"> <label for="{{ form_obj.password.id_for_label }}">{{ form_obj.password.label }}</label> {{ form_obj.password }} </div> <div class="form-group" id="v-code-wrapper"> <label for="{{ form_obj.password.id_for_label }}">验证码</label> <input type="text" class="form-control" id="v-code-input"> <img src="/v_code/" alt="" id="v-code" > </div> <button type="button" class="btn btn-success" id="login-button">登录</button> <span class="error" id="login-error"></span> </form> </div> </div> </div> <script src="/static/jquery-3.3.1.min.js"></script> <script src="/static/setupAjax.js"></script> <script> $(document).ready(function () { // 文档加载完之后自动执行的 $("#login-button").click(function () { // 登录按钮点击之后要做的事儿 $.ajax({ url: "/login/", type: "POST", data: { username: $("#id_username").val(), password: $("#id_password").val(), v_code: $("#v-code-input").val() }, success: function (data) { if (!data.code) { location.href = data.data; } else { // 有错误 $("#login-error").text(data.data); } }, error: function (err) { console.log(err) } }) }); // 当form中的input标签获取光标之后，就清空之前的错误信息 $("form input").focus(function () { $("#login-error").text(""); }); // 点击图片刷新验证码 $("#v-code").click(function () { this.src += "?"; }); }) </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>欢迎登陆</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="/static/bootstrap-3.3.7/css/bootstrap.min.css"> <link rel="stylesheet" href="/static/mystyle.css"> </head> <body> <div class="container"> <div class="row"> <div class="col-md-4 col-md-offset-4" id="login-form"> <form autocomplete="off" novalidate> <div class="form-group"> <label for="{{ form_obj.username.id_for_label }}">{{ form_obj.username.label }}</label> {{ form_obj.username }} </div> <div class="form-group"> <label for="{{ form_obj.password.id_for_label }}">{{ form_obj.password.label }}</label> {{ form_obj.password }} </div> <button type="button" class="btn btn-success" id="login-button">登录</button> <span class="error" id="login-error"></span> <div id="popup-captcha"></div> </form> </div> </div> </div> <script src="/static/jquery-3.3.1.min.js"></script> <script src="/static/setupAjax.js"></script> <!-- 引入封装了failback的接口--initGeetest --> <script src="http://static.geetest.com/static/tools/gt.js"></script> <script> var handlerPopup = function (captchaObj) { // 成功的回调 captchaObj.onSuccess(function () { var validate = captchaObj.getValidate(); $.ajax({ url: "/login2/", // 进行二次验证 type: "post", data: { username: $("#id_username").val(), password: $("#id_password").val(), geetest_challenge: validate.geetest_challenge, geetest_validate: validate.geetest_validate, geetest_seccode: validate.geetest_seccode }, success: function (data) { if (!data.code) { location.href = data.data; } else { // 有错误 $("#login-error").text(data.data); } }, error: function (err) { console.log(err) } }); }); $("#login-button").click(function () { captchaObj.show(); }); // 将验证码加到id为captcha的元素里 captchaObj.appendTo("#popup-captcha"); // 更多接口参考：http://www.geetest.com/install/sections/idx-client-sdk.html }; // 验证开始需要向网站主后台获取id，challenge，success（是否启用failback） $.ajax({ url: "/pcgetcaptcha?t=" + (new Date()).getTime(), // 加随机数防止缓存 type: "get", dataType: "json", success: function (data) { // 使用initGeetest接口 // 参数1：配置参数 // 参数2：回调，回调的第一个参数验证码对象，之后可以使用它做appendTo之类的事件 initGeetest({ gt: data.gt, challenge: data.challenge, product: "popup", // 产品形式，包括：float，embed，popup。注意只对PC版验证码有效 offline: !data.success // 表示用户后台检测极验服务器是否宕机，一般不需要关注 // 更多配置参数请参见：http://www.geetest.com/install/sections/idx-client-sdk.html#config }, handlerPopup); } }); $(document).ready(function () { // 文档加载完之后自动执行的 // 当form中的input标签获取光标之后，就清空之前的错误信息 $("form input").focus(function () { $("#login-error").text(""); }); // 点击图片刷新验证码 $("#v-code").click(function () { this.src += "?"; }); }) </script> </body> </html>
