Django博客搭建_用户注册1_图片生成

Blog项目——用户注册

一、设计接口思路

• 分析业务逻辑，明确在这个业务中需要涉及到几个相关子业务，将每个子业务当做一个接口来设计
• 分析接口的功能任务，明确接口的访问方式与返回数据：
  • 接口的请求方式，如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 HttpResponse

from 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):  # 获取图片的uuid
	text, image = captcha.generate_captcha()  # 生成验证码和图片

	# 将产生的uuid放入redis
	## 1.连接数据库
	con_redis = get_redis_connection("verify_codes")
	## 2.配置key
	redis_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 views

app_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 View

from 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.配置key
		redis_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")

urls.py

path("image_code/<uuid:image_code>/", views.ImageCode.as_view(), name="image_code"),