6. 项目实战后台之管理员登陆与退出

①. 添加中间件

②. 登录与退出

③. 添加验证码

注意:本节实战会使用到Django框架中的session,而session信息又存放的数据库中,所以要先使用数据迁移命令在MySQL数据库中先生成一些Django默认自带表。

    python manage.py migrate

①. 在项目中添加中间件

  • 此中间件对后台网址访问做了是否登录的判断
  • 关于网站后台要求:只要访问的URL地址是以 "/admin" 开头的都会执行是否登录判断验证。

(1). 在common公共应用中创建中间件

  • 创建文件: myobject/common/shopmiddleware.py, 代码如下:
# 自定义中间件类
from django.shortcuts import redirect
from django.core.urlresolvers import reverse

import re

class ShopMiddleware(object):
    def __init__(self, get_response):
        self.get_response = get_response
        # One-time configuration and initialization(一次性配置和初始化).
        #print("ShopMiddleware")

    def __call__(self, request):
        # 定义网站后台不用登录也可访问的路由url
        urllist = ['/myadmin/login','/myadmin/dologin','/myadmin/logout']
        # 获取当前请求路径
        path = request.path
        #print("Hello World!"+path)
        # 判断当前请求是否是访问网站后台,并且path不在urllist中
        if re.match("/myadmin",path) and (path not in urllist):
            # 判断当前用户是否没有登录
            if "adminuser" not in request.session:
                # 执行登录界面跳转
                return redirect(reverse('myadmin_login'))


        response = self.get_response(request)

        # Code to be executed for each request/response after
        # the view is called.

        return response

(2). 将自定义的中间件注册到项目中

  • 编辑 myobject/settings.py 配置文件, 添加如下代码
...

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
    'common.shopmiddleware.ShopMiddleware',     #注册中间件
]

...

(3). 配置路由、模板并测试中间件

  • 3.1 配置路由 myobject/myadmin/urls.py 加入如下代码
 ....

    # 后台管理员路由
    url(r'^login$', index.login, name="myadmin_login"),
    url(r'^dologin$', index.dologin, name="myadmin_dologin"),
    url(r'^logout$', index.logout, name="myadmin_logout"),
 ....
  • 3.2 编写视图 myobject/myadmin/views/index.py文件 并加入如下代码:
...
# ==============后台管理员操作====================
# 会员登录表单
def login(request):
    return render(request,'myadmin/login.html')

# 会员执行登录
def dologin(request):
    pass

# 会员退出
def logout(request):
    pass
...
  • 3.3 创建登录模板文件: templates/myadmin/login.html 代码如下:
{% load static from staticfiles %}
<!DOCTYPE html>
<html lang="cn">
    <head>
        <meta charset="utf-8">
        <title>Login - Akira</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="{% static 'myadmin/css/bootstrap.min.css' %}" rel="stylesheet">
        <link href="{% static 'myadmin/css/bootstrap-responsive.min.css' %}" rel="stylesheet">
        <link href="{% static 'myadmin/css/site.css' %}" rel="stylesheet">
        <!--[if lt IE 9]><script src="{% static 'myadmin/js/html5.js' %}"></script><![endif]-->
    </head>
    <body>
        <div id="login-page" class="container">
            <h1>商城后台管理登录</h1>
            <form id="login-form" method="post" class="well" action="{% url 'myadmin_dologin' %}">
            {% csrf_token %}
            账号:<input type="text" name="username" class="span2" placeholder="输入账号" /><br />
            密码:<input type="password" name="password" class="span2" placeholder="输入密码" /><br />
            <label class="checkbox"> <input type="checkbox" /> Remember me </label>
            <button type="submit" class="btn btn-primary">登录</button>
            <button type="reset" class="btn">重置</button>
        </form> 
        <br/>
        <span style="color:red">{{ info }}</span>
        </div>
        <script src="{% static 'myadmin/js/jquery.min.js' %}"></script>
        <script src="{% static 'myadmin/js/bootstrap.min.js' %}"></script>
        <script src="{% static 'myadmin/js/site.js' %}"></script>
    </body>
</html>

4. 启动服务测试,网站后台就进不去了,统一调跳转登录页面中


②. 后台管理员的登录与退出

(1). 配置路由(已配置过可省略)

  • 配置路由 myobject/myadmin/urls.py 加入如下代码
 ....

    # 后台管理员路由
    url(r'^login$', index.login, name="myadmin_login"),
    url(r'^dologin$', index.dologin, name="myadmin_dologin"),
    url(r'^logout$', index.logout, name="myadmin_logout"),
 ....

(2). 编写视图文件

  • 编写视图 myobject/myadmin/views/index.py文件 并加入如下代码:
from django.shortcuts import render
from django.http import HttpResponse
from django.shortcuts import redirect
from django.core.urlresolvers import reverse

from common.models import Users
import time,json

...

# ==============后台管理员操作====================
# 会员登录表单
def login(request):
    return render(request,'myadmin/login.html')

# 会员执行登录
def dologin(request):
    try:
        #根据账号获取登录者信息
        user = Users.objects.get(username=request.POST['username'])
        #判断当前用户是否是后台管理员用户
        if user.state == 0:
            # 验证密码
            import hashlib
            m = hashlib.md5() 
            m.update(bytes(request.POST['password'],encoding="utf8"))
            if user.password == m.hexdigest():
                # 此处登录成功,将当前登录信息放入到session中,并跳转页面
                request.session['adminuser'] = user.name
                #print(json.dumps(user))
                return redirect(reverse('myadmin_index'))
            else:
                context = {'info':'登录密码错误!'}
        else:
            context = {'info':'此用户非后台管理用户!'}
    except:
        context = {'info':'登录账号错误!'}
    return render(request,"myadmin/login.html",context)

# 会员退出
def logout(request):
    # 清除登录的session信息
    del request.session['adminuser']
    # 跳转登录页面(url地址改变)
    return redirect(reverse('myadmin_login'))
    # 加载登录页面(url地址不变)
    #return render(request,"myadmin/login.html")
...

3. 创建模板

  • 创建登录模板文件: templates/myadmin/login.html 代码如下:
{% load static from staticfiles %}
<!DOCTYPE html>
<html lang="cn">
    <head>
        <meta charset="utf-8">
        <title>Login - Akira</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="{% static 'myadmin/css/bootstrap.min.css' %}" rel="stylesheet">
        <link href="{% static 'myadmin/css/bootstrap-responsive.min.css' %}" rel="stylesheet">
        <link href="{% static 'myadmin/css/site.css' %}" rel="stylesheet">
        <!--[if lt IE 9]><script src="{% static 'myadmin/js/html5.js' %}"></script><![endif]-->
    </head>
    <body>
        <div id="login-page" class="container">
            <h1>商城后台管理登录</h1>
            <form id="login-form" method="post" class="well" action="{% url 'myadmin_dologin' %}">
            {% csrf_token %}
            账号:<input type="text" name="username" class="span2" placeholder="输入账号" /><br />
            密码:<input type="password" name="password" class="span2" placeholder="输入密码" /><br />
            <label class="checkbox"> <input type="checkbox" /> Remember me </label>
            <button type="submit" class="btn btn-primary">登录</button>
            <button type="reset" class="btn">重置</button>
        </form> 
        <br/>
        <span style="color:red">{{ info }}</span>
        </div>
        <script src="{% static 'myadmin/js/jquery.min.js' %}"></script>
        <script src="{% static 'myadmin/js/bootstrap.min.js' %}"></script>
        <script src="{% static 'myadmin/js/site.js' %}"></script>
    </body>
</html>
  • 修改模板文件:templates/myadmin/base.html 代码如下:

  • 代码在页头处,62~70行左右

...
        <ul class="nav pull-right">
            <li>
                <a href="profile.htm">@{{ request.session.adminuser }}</a>
            </li>
            <li>
                <a href="{% url 'myadmin_logout' %}">退出</a>
            </li>
        </ul>
...

4. 启动服务测试,即可测试网站后台是否可以使用。注意只有管理员才开登录。

③ 在后台登录处添加验证码

(1). 配置路由

  • 配置路由 myobject/myadmin/urls.py 加入如下代码
 ....

    # 后台管理员路由
    url(r'^login$', index.login, name="myadmin_login"),
    url(r'^dologin$', index.dologin, name="myadmin_dologin"),
    url(r'^logout$', index.logout, name="myadmin_logout"),
    url(r'^verify$', index.verify, name="myadmin_verify"), #验证码
 ....

(2). 编写视图文件

  • 编写视图 myobject/myadmin/views/index.py文件 并加入如下代码:
  • 后台管理员操作中添加输出验证码方法 verify()
  • 将字体文件STXIHEI.TTF复制到 static/目录下
...

# ==============后台管理员操作====================
# 会员登录表单
def verify(request):
    #引入随机函数模块
    import random
    from PIL import Image, ImageDraw, ImageFont
    #定义变量,用于画面的背景色、宽、高
    #bgcolor = (random.randrange(20, 100), random.randrange(
    #    20, 100),100)
    bgcolor = (242,164,247)
    width = 100
    height = 25
    #创建画面对象
    im = Image.new('RGB', (width, height), bgcolor)
    #创建画笔对象
    draw = ImageDraw.Draw(im)
    #调用画笔的point()函数绘制噪点
    for i in range(0, 100):
        xy = (random.randrange(0, width), random.randrange(0, height))
        fill = (random.randrange(0, 255), 255, random.randrange(0, 255))
        draw.point(xy, fill=fill)
    #定义验证码的备选值
    str1 = 'ABCD123EFGHIJK456LMNOPQRS789TUVWXYZ0'
    #随机选取4个值作为验证码
    rand_str = ''
    for i in range(0, 4):
        rand_str += str1[random.randrange(0, len(str1))]
    #构造字体对象,ubuntu的字体路径为“/usr/share/fonts/truetype/freefont”
    font = ImageFont.truetype('static/STXIHEI.TTF', 21)
    #font = ImageFont.load_default().font
    #构造字体颜色
    fontcolor = (255, random.randrange(0, 255), random.randrange(0, 255))
    #绘制4个字
    draw.text((5, 2), rand_str[0], font=font, fill=fontcolor)
    draw.text((25, 2), rand_str[1], font=font, fill=fontcolor)
    draw.text((50, 2), rand_str[2], font=font, fill=fontcolor)
    draw.text((75, 2), rand_str[3], font=font, fill=fontcolor)
    #释放画笔
    del draw
    #存入session,用于做进一步验证
    request.session['verifycode'] = rand_str
    """
    python2的为
    # 内存文件操作
    import cStringIO
    buf = cStringIO.StringIO()
    """
    # 内存文件操作-->此方法为python3的
    import io
    buf = io.BytesIO()
    #将图片保存在内存中,文件类型为png
    im.save(buf, 'png')
    #将内存中的图片数据返回给客户端,MIME类型为图片png
    return HttpResponse(buf.getvalue(), 'image/png')

...

(3). 在中间件设置放行

  • 编写:myobject/common/shopmiddleware.py文件
  • __call__()方法的 urllist 变量中加入:/myadmin/verify
    # 定义网站后台不用登录也可访问的路由url
    urllist = ['/myadmin/login','/myadmin/dologin','/myadmin/logout','/myadmin/verify']

测试:http://localhost:8000/myadmin/verify

(4). 在登录模板中使用验证码

  • 登录模板文件: templates/myadmin/login.html 中加入代码如下:
....
<form id="login-form" method="post" class="well" action="{% url 'myadmin_dologin' %}">
    {% csrf_token %}
    账  &nbsp; 号:<input type="text" name="username" class="span2" placeholder="输入账号" /><br />
    密  &nbsp; 码:<input type="password" name="password" class="span2" placeholder="输入密码" /><br />
    验证码:<input type="text" name="code" class="span2" style="width:30px;"  />
    <img src="{% url 'myadmin_verify'%}" onclick="this.src='{% url 'myadmin_verify' %}?sn='+Math.random()"/>
    <br />
    <label class="checkbox"> <input type="checkbox" /> Remember me </label>
    <button type="submit" class="btn btn-primary">登录</button>
    <button type="reset" class="btn">重置</button>
</form> 
...

(5). 验证码校验

  • 编辑视图文件:myobject/myadmin/views/index.py文件
  • 在视图文件中的会员执行登录方法 dologin() 中加入验证代码
...
# 会员执行登录
def dologin(request):
    # 校验验证码
    verifycode = request.session['verifycode']
    code = request.POST['code']
    if verifycode != code:
        context = {'info':'验证码错误!'}
        return render(request,"myadmin/login.html",context)

    try:
        #根据账号获取登录者信息
        user = Users.objects.get(username=request.POST['username'])
        #判断当前用户是否是后台管理员用户
        if user.state == 0:
            # 验证密码
            import hashlib
            m = hashlib.md5() 
            m.update(bytes(request.POST['password'],encoding="utf8"))
            if user.password == m.hexdigest():
                # 此处登录成功,将当前登录信息放入到session中,并跳转页面
                request.session['adminuser'] = user.name
                #print(json.dumps(user))
                return redirect(reverse('myadmin_index'))
            else:
                context = {'info':'登录密码错误!'}
        else:
            context = {'info':'此用户非后台管理用户!'}
    except:
        context = {'info':'登录账号错误!'}
    return render(request,"myadmin/login.html",context)
....

(6). 启动服务测试,即可测试网站后台是否可以使用。注意只有管理员才开登录。