Django实战【三】—用户登录、注册实现

一、项目前端模板的套用

1.为什么使用前端模板

因为我们开发ObCRM系统使用的是Django项目，而我们知道，Django框架是一个全面的重量级的框架，并不是全后端分离的，所以涉及到的页面需要我们用到前端的知识，但是我们并不是专业的前端工程师，很多页面的搭建对我们说还是有点吃力。

其实在很多实际工作中开发，前端页面都是通过网络上寻找相应的模板，这样就可以避免在前端样式上调整的时间浪费，我们只需要继承别人写好的模板文件来快速开发自己的前端页面，专心投入自己的后端开发代码中。

2.admin前端模板

刚我们说使用别人写好的模板文件，有利于我们快速开发项目；我们写的这个项目也是使用了git上一个开源的前端模板，大家可以去git搜索adminLTE，如果你没有用过，点击这里https://github.com/ColorlibHQ/AdminLTE，将代码下载到本地就可以愉快的使用了。

我们解压后得到一个AdminLTE-master文件夹，文件夹路径结构如下：

目录下的文件内容如上，一般比较规范的模板文件，核心的js和css代码会放在dist路径下。

首先，我们先配置项目使用的静态文件夹，在项目路径下新建statics文件夹，settings中配置静态文件的路径，

STATIC_URL = '/static/'

STATICFILES_DIRS = [  # 项目静态文件的配置
    os.path.join(BASE_DIR,"statics")
]

其实我们使用模板文件就是使用它的核心js和css以及对应写好的html页面，我们这个项目中使用了adminLTE的一些其他html页面，也就是说还需要使用bowser_components、plugins文件，这里我就将这三个文件拷贝到statics下的新建adminlte文件夹下。

如下是我这个项目的静态文件目录结构

• adminlte：用于存放模板的js和css文件
• bootstrap：存放的bootstrap核心js和css
• jquery：存放jquery文件
• css：自己根据具体需求写的一些css文件
• js：自己根据具体需求写的一些js文件
• font：项目用到的字体文件

二、登录页面的实现

1.初始超级用户

还记得我们的ObCRM系统的用户表使用是django项目中user的扩展表把，为什么使用Django用户提供的user表来扩展呢？是因为我们想要使用Django框架内置的auth认证模块，auth认证模块可以密文存储用户密码，快速简便的查询用户信息进行验证。

auth模块知识点回顾点这里！：Django框架—auth认证模块

在实现登录功能之前，我们先要有一个用户账号，就作为我们项目的超级管理帐号把。创建账号的时候要注意，不能直接在数据库添加记录，因为这样账号密码是明文存储的。

创建超级用户的方式，是在django的manage环境下，执行如下命令

createsuperuser  # 要通过这个指令来创建用户，因为这个指令会将你的密码加密

我们创建一个超级用户，这里我创建的用户帐号密码：ryxiong，ryxiong520

2.登录页面实现

登录url设置

因为我么项目涉及到多应用，所以需要使用到路由分发，用户登录输入rbac应用，所以我们在项目下url设置路由分发，将用户登录的url分发到rbac应用下。

urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'^rbac/', include("rbac.urls")),
    url(r'^customer/', include("customer.urls")),
    url(r'^education/', include("education.urls")),
]

rbac应用下创建urls.py

注意：我们项目中实现验证码登录的功能，所以配置登录url还需要配置验证码url

from django.conf.urls import url,include
from rbac.views import account

urlpatterns = [
    # 用户登录url
    url(r'^login/', account.Login.as_view(), name="login"),
    # 验证码url
    url(r'^get_auth_img/', account.GetAuthImg.as_view(), name="get_auth_img"),
]

视图函数

对于登录用到的验证码获取我单独提炼了一个文件，放在rbac应用下的utils文件中的auth_code.py文件

get_authcode_img函数的作用是生成随机字符串，并通过内存操作符中读取出来，存储在session中，这样每个用户就可以根据携带自己的用户验证码请求后端，而不会和别人的验证码冲突。

import os
import string
import random
from io import BytesIO
from PIL import Image,ImageDraw,ImageFont
from ObCRM import settings  # 项目中的settings文件，配置了BASEDIR路径，在这里无需关注


def get_authcode_img(request):
    """
    获取随机验证码，带干扰噪点，
    :param request: request请求，用于将验证码存放在session中
    :return: 返回验证码图片的数据内容
    """
    def get_background_color():  # 定义一个获取图片背景/噪点颜色的函数，产生浅色
        color = tuple((random.choices(range(160,256),k=3)))
        return color

    def get_content_color():  # 定义一个获取文字颜色的函数，产生深色
        color = tuple((random.choices(range(0,100),k=3)))
        return color

    img_obj = Image.new("RGB",(117,34),get_background_color())  # 创建一个图片对象
    draw_obj = ImageDraw.Draw(img_obj)  # 通过图片对象生成一个画笔对象
    font_path = os.path.join(settings.BASE_DIR,"statics","font","cerepf__.ttf")  # 获取字体，注意有些字体无法显示数字
    font_obj = ImageFont.truetype(font_path,32)  # 创建一个字体对象
    random_code = ''  # 用户验证的字符串
    all_char = string.ascii_letters+string.digits
    for i in range(4):
        a = random.choice(all_char)
        random_code += a

    draw_obj.text((22,-3),random_code,fill=get_content_color(),font=font_obj)

    width = 117
    height = 34

    # 添加噪线
    for i in range(5):  # 添加5条干扰线
        # 两个坐标点确定一条线
        x1 = random.randint(0,width)
        y1 = random.randint(0,height)
        x2 = random.randint(0,width)
        y2 = random.randint(0,height)
        draw_obj.line((x1,y1,x2,y2),fill=get_background_color())  # 画噪线

    # 添加噪点
    for i in range(30):
        draw_obj.point((random.randint(0,width),random.randint(0,height)),fill=get_background_color())


    f = BytesIO()  # 生成内存操作符-句柄
    img_obj.save(f,"png")  # 将图片存在内存中
    data = f.getvalue()
    # 获取句柄中的内容

    # # 存验证码方式：1.存在全局变量（不可取，多个用户会顶替）2.存在各自客户的session中
    # # 方式1
    # global valid_str
    # valid_str = random_code

    # 方式二，推荐
    request.session["authcode"] = random_code
    return data

rbac视图文件，我们在应用下创建了views文件夹，文件中新建account来处理帐号相关的视图。

from django import views
from django.contrib import auth
from django.http import JsonResponse
from django.shortcuts import (
    render, redirect, reverse, HttpResponse
)
from rbac.utils import authcode

# 用户登录视图类
class Login(views.View):
    def get(self, request):
        # get请求返回登录页面
        return render(request, "login.html")

    def post(self, request):
        data = request.POST
        # 获取用户登录信息
        authcode = data.get("authcode")
        username = data.get("username")
        password = data.get("password")
        # 验证码不正确
        if request.session.get("authcode").upper() != authcode.upper():
            return JsonResponse({
   "status": "1"})
        else:
            # 使用django的auth模块进行用户名密码验证
            user = auth.authenticate(username=username, password=password)
            if user:
                # 将用户名存入session中
                request.session["user"] = username

                auth.login(request, user)  # 将用户信息添加到session中
                return JsonResponse({
   "status": "2"})
            else:
                return JsonResponse({
   "status": "3"})
            
            
# 验证码视图类
class GetAuthImg(views.View):
    """获取验证码视图类"""

    def get(self, request):
        data = authcode.get_authcode_img(request)
        print("验证码：",request.session.get("authcode"))