Blog项目——用户注册

文章目录

Blog项目——用户注册
- 一、设计接口思路
- 二、功能分析
- 三、图片验证码接口代码实现
- - 1.图片验证码认证
  - 2.后端视图实现
  - - 2-1 测试
    - 2-2 升级
- 四、类视图

一、设计接口思路

分析业务逻辑，明确在这个业务中需要涉及到几个相关子业务，将每个子业务当做一个接口来设计
分析接口的功能任务，明确接口的访问方式与返回数据：
- 接口的请求方式，如GET 、POST 、PUT等
- 接口的URL路径定义
- 需要前端传递的数据及数据格式（如路径参数、查询字符串、请求体表单、JSON等）
- 返回给前端的数据及数据格式

二、功能分析

用户名判断是否存在
手机号判断是否存在
图片验证码
短信验证码
注册保存用户数据

这里，我们考虑其他地方也可能会调用图形验证或者短信验证，因此将验证码功能独立出来，创建一个新应用verifications，在此应用中实现图片验证码、短信验证码:python ../manager.py startapp verifications

三、图片验证码接口代码实现

1.图片验证码认证

请求方法：GET

url定义：/image_code/<uuid:image_code_id>/

请求参数：url路径参数

参数	类型	前端是否必须传	描述
image_codes	uuid字符串	是	图片验证码编号

uuid：Universally unique identifier(eg. 123e4567-e89b-12d3-a456-426655440000)

2.后端视图实现

a.将生成图像验证码的模块文件夹（GitHub已上传，位置：[utils/captcha]）复制粘贴到项目根目录utils文件夹下

b.用于验证（图片验证、短信验证）功能，以后有可能在其他应用或项目中重用，所以单独创建一个应用来实现，所有验证相关的业务逻辑接口。在apps目录中创建一个verifications应用，并在settings.py文件中的INSTALLED_APPS列表中指定。

需要安装pillow包:pip install pillow

而这个包跑起来之后，返回两个值，第一个是这个图形验证码，而第二个就是这个图片的二级制码。

2-1 测试

from django.http import HttpResponsefrom utils.captcha.captcha import captcha# 图形验证
def demo(request):text, image = captcha.generate_captcha()return HttpResponse(content=image, content_type="image/jpg")

注意上面的返回类型imge不能加s，加了s就表示下载，访问页面就是这张图片

而此时，我们可以在我们的注册界面中添加这个路由就好了：

<a href="javascript:void(0);" class="captcha-graph-img"><img src="/demo" alt="验证码" title="点击刷新">
</a>

如果我们想实现单机的时候，也能更换图片，此时需要添加一个js

// register.html里面添加：
{% block stript %}<script src="../../static/js/users/register.js"></script>
{% endblock %}// js代码
$(function () {let $img = $(".form-item .captcha-graph-img img"); // 获取图像$img.click(generate);function generate() {let imageCodeUrl = '/demo/';$img.attr("src", imageCodeUrl);}
})

上面的代码是，首先获取一个值img，他利用js获取，然后定义一个generate函数（利用函数去添加一个url的值），接下来就是当点击图像的时候，会自动去执行这个函数，给img添加属性。

2-2 升级

应为要考虑到，网站不是就自己用的，而是许多人可能会同时访问，则此时就需要一个唯一编码去绑定这个图片，我们这里就需要一个UUID（UUID 是通用唯一识别码（Universally Unique Identifier）的缩写，是一种软件建构的标准。其目的，是让分布式系统中的所有元素，都能有唯一的辨识信息，而不需要通过中央控制端来做辨识信息的指定）。

简单说下思路：首先，request页面的src刚刚开始为空，当加载js以后，自动调用generate函数，然后通过uuid生成器，将路径拼接之后访问后台。然后后台通过reids缓存图片的uuid和编码。同时日志器将text存下来（可要可不要）

register.js


$(function () {let $img = $(".form-item .captcha-graph-img img"); // 获取图像generate()$img.click(generate);function generate() {sImageCodeId = generateUUID();let imageCodeUrl = '/demo/' + sImageCodeId + '/';// let imageCodeUrl = '/demo/';$img.attr("src", imageCodeUrl);}// 生成图片UUID验证码function generateUUID() {let d = new Date().getTime();if (window.performance && typeof window.performance.now === "function") {d += performance.now(); //use high-precision timer if available}let uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {let r = (d + Math.random() * 16) % 16 | 0;d = Math.floor(d / 16);return (c == 'x' ? r : (r & 0x3 | 0x8)).toString(16);});return uuid;}
})

view.py

from utils.captcha.captcha import captcha
from django_redis import get_redis_connection
import logging
# Create your views here.logger = logging.getLogger("django")# 图形验证
def demo(request, image_code):  # 获取图片的uuidtext, image = captcha.generate_captcha()  # 生成验证码和图片# 将产生的uuid放入redis## 1.连接数据库con_redis = get_redis_connection("verify_codes")## 2.配置keyredis_key = "img_{}".format(image_code)## 3.设置过期时间con_redis.setex(redis_key, 300, text)  # 过期时间为5分钟logger.info("IMAGE_CODE {}".format(text))  # 添加日志信息return HttpResponse(content=image, content_type="image/jpg")  # 返回图片

urls.py

from django.urls import path
from . import viewsapp_name = "verifications"urlpatterns = [path("demo/<uuid:image_code>/", views.demo, name="image_code"),
]

注意，之前配置的redis为默认的，这里需要重新添加一个

settings.py

CACHES = {# 配置默认的库"default": {"BACKEND": "django_redis.cache.RedisCache","LOCATION": "redis://127.0.0.1:6379/0","OPTIONS": {"CLIENT_CLASS": "django_redis.client.DefaultClient",}},# 配置缓存uuid图片的库'verify_codes': {"BACKEND": "django_redis.cache.RedisCache","LOCATION": "redis://127.0.0.1:6379/1","OPTIONS": {"CLIENT_CLASS": "django_redis.client.DefaultClient",}},
}

此时，当你通过浏览器访问页面的时候，日志也就记录下来了：

INFO 2021-01-25 15:29:38,183 views 24 IMAGE_CODE 3VFN

四、类视图

后台试图，我们最好还是使用类视图来进行开发，并且上面的函数名也比较low，我们就使用类视图来修改一下：

verifications/views.py

from django.http import HttpResponse
from django.shortcuts import render
from django.views import Viewfrom utils.captcha.captcha import captcha
from django_redis import get_redis_connection
import logging
# Create your views here.logger = logging.getLogger("django")# 图形验证
class ImageCode(View):def get(self, request, image_code):text, image = captcha.generate_captcha()# 将产生的uuid放入redis## 1.连接数据库con_redis = get_redis_connection("verify_codes")## 2.配置keyredis_key = "img_{}".format(image_code)## 3.设置过期时间con_redis.setex(redis_key, 300, text)logger.info("IMAGE_CODE {}".format(text))return HttpResponse(content=image, content_type="image/jpg")