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"))
        return HttpResponse(data)

 模板文件

系统的登录功能是通过ajax实现异步请求，后端验证数据，这种方式可以提高用户体验。

其次，登录页面使用的是adminLTE模板中的login页面，对页面进行自己的修改，login页面在adminLTE-master/pages/examples/login.html自取。

登录html页面，放在rbac应用下新建templates文件夹下。

{% load static %}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>AliCRM | 登录</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <!-- Bootstrap 3.3.7 -->
    <link rel="stylesheet" href="{% static 'adminlte/bower_components/bootstrap/dist/css/bootstrap.min.css' %}">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="{% static 'adminlte/bower_components/font-awesome/css/font-awesome.min.css' %}">
    <!-- Ionicons -->
    <link rel="stylesheet" href="{% static 'adminlte/bower_components/Ionicons/css/ionicons.min.css' %}">
    <!-- Theme style -->
    <link rel="stylesheet" href="{% static 'adminlte/dist/css/AdminLTE.min.css' %}">
    <!-- iCheck -->
    <link rel="stylesheet" href="{% static 'adminlte/plugins/iCheck/square/blue.css' %}">


</head>
<body class="hold-transition login-page">
<div class="login-box">
    <div class="login-logo">
        <a href=""><b>Ali</b>CRM</a>
    </div>
    <!-- /.login-logo -->
    <div class="login-box-body">
        <p class="login-box-msg">请登录</p>

        <form action="" method="post">
            {% csrf_token %}
            <div class="form-group has-feedback">
                <input type="text" class="form-control" placeholder="username" name="username">
                <span class="glyphicon glyphicon-user form-control-feedback"></span>
                <span class="username-error" style="color:#b14442"></span>
            </div>
            <div class="form-group has-feedback">
                <input type="password" class="form-control" placeholder="Password" name="password">
                <span class="glyphicon glyphicon-lock form-control-feedback"></span>
                <span class="password-error" style="color:#b14442"></span>
            </div>
            <div class="row">
                <div class="col-sm-7">
                    <div class="form-group has-feedback">
                        <input type="text" class="form-control" placeholder="验证码" name="authcode">
                        <span class="glyphicon glyphicon-barcode form-control-feedback"></span>
                    </div>
                </div>
                <div class="col-sm-4">
                    <img id="authImg" src="{% url 'get_auth_img' %}" alt="验证码">
                </div>

            </div>
            <div class="row">
                <div class="col-xs-8">
                    <div class="checkbox icheck">
                        <label>
                            <input type="checkbox"> 是否记住帐号
                        </label>
                    </div>
                </div>
                <!-- /.col -->
                <div class="col-xs-4">
                    <button type="button" id="loginBtn" class="btn btn-primary btn-block btn-flat">登录</button>
                </div>
                <!-- /.col -->
            </div>
        </form>

        <div class="social-auth-links text-center">
            <p>- OR -</p>
            <a href="#" class="btn btn-block btn-social btn-facebook btn-flat">
                <i class="fa fa-facebook"></i>使用微信登录
            </a>
        </div>
        <!-- /.social-auth-links -->

        <a href="#">忘记密码</a><br>
        <a href="{% url 'register' %}" class="text-center">注册一个新账号!</a>

    </div>
    <!-- /.login-box-body -->
</div>
<!-- /.login-box -->

<!-- jQuery 3 -->
<script src="{% static 'jquery/jquery-3.4.1.js' %}"></script>
<!-- Bootstrap 3.3.7 -->
<script src="{% static 'adminlte/bower_components/bootstrap/dist/js/bootstrap.min.js' %}"></script>
<!-- iCheck -->
<script src="{% static 'adminlte/plugins/iCheck/icheck.min.js' %}"></script>
<script>
    $(function () {
        $('input').iCheck({
            checkboxClass: 'icheckbox_square-blue',
            radioClass: 'iradio_square-blue',
            increaseArea: '20%' /* optional */
        });
    });

    // 登录ajax请求
    $("#loginBtn").on("click", function () {
        var username = $("input[name=username]").val();
        var password = $("input[name=password]").val();
        var authcode = $("input[name=authcode]").val();
        var csrf_token = $("input[name=csrfmiddlewaretoken]").val();
        if (!username) {
            $(".username-error").text("帐号不能为空！")
        }
        if (!password) {
            $(".password-error").text("密码不能为空！")
        }
        if (!authcode) {
            $(".authcode-error").text("请输入验证码")
        }
        $.ajax({
            url: "{% url 'login' %}",
            type: 'post',
            data: {
                username: username,
                password: password,
                authcode: authcode,
                csrfmiddlewaretoken: csrf_token,
            },
            success: function (res) {
                if (res.status === "1") {
                    $(".authcode-error").text("验证码错误！")
                }
                if (res.status === "2") {
                    var href = location.search.slice(6);  //使用了auth的装饰器，会记录未登录用户想要访问的登录页面，登录成功后，会自动跳转过去
                    if (href) {
                        location.href = href  //登录成功，有目标地址
                    } else {
                        location.href = "{% url 'index' %}"  // 登录成功没有目标地址，跳转主页
                    }
                }
                if (res.status === "3") {  // 帐号密码错误
                    $(".username-error").text("账号或密码错误！")
                }
            }
        })
    });

    // 验证码刷新
    $("#authImg").on("click", function () {
        $("#authImg")[0].src += "?" // 点击事件刷新验证码图片
    })
</script>
</body>
</html>

注意：

该页面中的register和主页index还没有实现，所以路径反向解析会报错，可以先删除，以后在配置。

三、注册功能的实现

 注册用户url配置

# 用户注册url
url(r'^register/', account.Register.as_view(), name="register"),

注册视图类

注册视图涉及到前端提取数据到后端，并需要保存在数据库，所以数据需要校验合法性，数据的合法性校验有两种方式。

1. 在前端通过js中的re正则方式去校验
2. 在后端校验数据的合法性，通过form组件

由于我们的前端水平啊，不堪一说，对我们来说也相对复杂，所以我们这里通过后端来校验数据的合法性，合法性校验也可以自己获取数据区较验，但是使用form组件来完成这个事情，更加高效，快速，准确。

既然要使用form那就需要先写一个form组件，这里关于rbac的form我们放在rbac/forms/formAuth.py文件中。

from django import forms
from django.core.validators import RegexValidator
from django.core.exceptions import ValidationError


# 注册form认证
class RegForm(forms.Form):
    """定义注册帐号的form组件"""
    username = forms.CharField(
        label = "用户名",
        max_length=18,
        error_messages={
            "required":"内容不能为空",
            "invalid":"格式错误",
            "max_length":"用户名最长不超过18位"
        },
        widget=forms.TextInput(attrs={"class":"forms-control"})
    )

    password = forms.CharField(
        min_length=6,
        error_messages={
            "required": "内容不能为空",
            "invalid": "格式错误",
            "min_length": "密码不能少于6位"
        }
    )

    r_password = forms.CharField(
        min_length=6,
        error_messages={
            "required": "内容不能为空",
            "invalid": "格式错误",
            "min_length": "密码不能少于6位"
        }
    )

    email = forms.CharField(
        label="邮箱",
        error_messages={
            "required": "内容不能为空",
            "invalid": "格式错误",
        },
        validators=[RegexValidator(r"^\w+@\w+\.com$", "邮箱格式不正确")]
    )

    phone = forms.CharField(
        label="电话",
        error_messages={
            "required": "内容不能为空",
            "invalid": "格式错误",
        },
        validators=[RegexValidator(r"^[0-9]{4,11}$","请输入正确的号码")]
    )

    # 定义局部钩子
    def clean_password(self):
        # 校验密码的合法性，不能为纯数据
        password = self.cleaned_data.get("password")
        if password.isdecimal():
            raise ValidationError("密码不能为纯数字！")
        return password

    def clean_r_password(self):
        # 校验密码的合法性，不能为纯数据
        r_password = self.cleaned_data.get("r_password")
        if r_password.isdecimal():
            raise ValidationError("密码不能为纯数字！")
        return r_password

    # 定义全局钩子
    def clean(self):
        # 校验两次密码输入是否一致
        if self.cleaned_data.get("password") != self.cleaned_data.get("r_password"):
            self.add_error("r_password","两次密码输入不一致！")
        else:
            return self.cleaned_data

    # 重写init方法，来批量设置标签的样式
    def __init__(self,*args,**kwargs):
        super().__init__(*args,**kwargs)
        for field in self.fields:
            self.fields[field].widget.attrs.update({"class":"forms-control"})

注册视图函数

from rbac.forms import formAuth

# 注册视图类
class Register(views.View):
    def get(self, request):
        # 注册页面的生成我们并没有用form，因为我们使用的别人的模板样式
        return render(request, "register.html")

    def post(self, request):
        # post请求提交注册数据
        data = request.POST
        form_obj = formAuth.RegForm(data)  # 数据交给form实例化
        if form_obj.is_valid():  # 验证提交数据的合法性
            valid_data = form_obj.cleaned_data
            username = valid_data.get("username")
            # 判断帐号是否已存在
            if models.UserInfo.objects.filter(username=username):
                # 如果存在，给form中的username字段添加一个错误提示。
                form_obj.add_error("username", "帐号已存在")
                return render(request, "register.html", {"form_obj": form_obj})
            else:
                # 帐号可用，去掉多余密码，在数据库创建记录
                del valid_data["r_password"]
                models.UserInfo.objects.create_user(**valid_data)  # 创建普通用户
                return redirect("login")
        else:
            # 数据验证不通过，返回页面和错误提示，保留数据
            return render(request, "register.html", {"form_obj": form_obj})

注册html页面

{% load static %}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>AdminLTE 2 | Registration Page</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <!-- Bootstrap 3.3.7 -->
    <link rel="stylesheet" href="{% static 'adminlte/bower_components/bootstrap/dist/css/bootstrap.min.css' %}">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="{% static 'adminlte/bower_components/font-awesome/css/font-awesome.min.css' %}">
    <!-- Ionicons -->
    <link rel="stylesheet" href="{% static 'adminlte/bower_components/Ionicons/css/ionicons.min.css' %}">
    <!-- Theme style -->
    <link rel="stylesheet" href="{% static 'adminlte/dist/css/AdminLTE.min.css' %}">
    <!-- iCheck -->
    <link rel="stylesheet" href="{% static 'adminlte/plugins/iCheck/square/blue.css' %}">


</head>
<body class="hold-transition">
<div class="register-box">
    <div class="register-logo">
        <a href=""><b>Ali</b><span class="small">CRM</span></a>
    </div>

    <div class="register-box-body" style="border: #bbb 1px solid;border-radius: 2px">
        <p class="login-box-msg">注册一个帐号</p>

        <form action=".{% url 'register' %}" method="post" novalidate>
            {% csrf_token %}
            <div class="form-group has-feedback">
                <input type="text" class="form-control" placeholder="用户名" name="username">
                <span class="glyphicon glyphicon-user form-control-feedback"></span>
                <span class="has-error">{{ form_obj.username.errors.0 }}</span>
            </div>

            <div class="form-group has-feedback">
                <input type="password" class="form-control" placeholder="密码" name="password">
                <span class="glyphicon glyphicon-lock form-control-feedback"></span>
                <span class="has-error">{{ form_obj.password.errors.0 }}</span>
            </div>

            <div class="form-group has-feedback">
                <input type="password" class="form-control" placeholder="确认密码" name="r_password">
                <span class="glyphicon glyphicon-log-in form-control-feedback"></span>
                <span class="has-error">{{ form_obj.r_password.errors.0 }}</span>
            </div>

            <div class="form-group has-feedback">
                <input type="email" class="form-control" placeholder="邮箱" name="email">
                <span class="glyphicon glyphicon-envelope form-control-feedback"></span>
                <span class="has-error">{{ form_obj.email.errors.0 }}</span>
            </div>
            <div class="form-group has-feedback">
                <input type="text" class="form-control" placeholder="电话" name="phone">
                <span class="glyphicon glyphicon-phone form-control-feedback"></span>
            </div>


            <div class="row">
                <div class="col-xs-8">
                    <div class="checkbox icheck">
                        <label>
                            <input type="checkbox">我同意该<a href="#">条款</a>
                        </label>
                    </div>
                </div>
                <!-- /.col -->
                <div class="col-xs-4">
                    <button type="submit" class="btn btn-primary btn-block btn-flat">注册</button>
                </div>
                <!-- /.col -->
            </div>
        </form>

        <div class="social-auth-links text-center">
            <p>- OR -</p>
            <a href="#" class="btn btn-block btn-social btn-success btn-flat"><span class="glyphicon glyphicon-qrcode"></span><i class=""></i>微信登录</a>
        </div>

        <a href="{% url 'login' %}" class="text-center">已经拥有账号</a>
    </div>
    <!-- /.form-box -->
</div>
<!-- /.register-box -->

<!-- jQuery 3 -->
<script src="{% static 'adminlte/bower_components/jquery/dist/jquery.min.js' %}"></script>
<!-- Bootstrap 3.3.7 -->
<script src="{% static 'adminlte/bower_components/bootstrap/dist/js/bootstrap.min.js' %}"></script>
<!-- iCheck -->
<script src="{% static 'adminlte/plugins/iCheck/icheck.min.js' %}"></script>
<script>
    $(function () {
        $('input').iCheck({
            checkboxClass: 'icheckbox_square-blue',
            radioClass: 'iradio_square-blue',
            increaseArea: '20%' /* optional */
        });
    });
</script>
</body>
</html>