13 项目实战之前台员工登陆与退出

• 本节完成前台员工 登录退出操作 ，登录界面如下，先实现登录退出，选择店铺，下次在介绍
• 
• 实现步骤：
• 编辑index.py视图文件，添加登录所需的处理的视图函数
• 配置urls路由
• 创建并编辑登录页面模板
• 在中间件中添加前端大堂点餐拦截程序

====================================================================

(1).　编辑视图文件

• 在数据库 osdb 中已存在数据表user，并且内有测试数据。

• 在common应用目录中的myobject/myadmin/models.py 模型文件中，已存在User模型类的定义。

• 新建视图文件：myobject/web/views/index.py 视图文件，并进行编辑

from django.shortcuts import render
from django.http import HttpResponse
from django.shortcuts import redirect
from django.urls import reverse

from myadmin.models import User

# Create your views here.
def index(request):
    return redirect(reverse('web_index'))

def webIndex(request):
    '''项目前台大堂点餐首页'''
    return render(request,"web/index.html")

def login(request):
    '''加载登录页面'''
    return render(request,"web/login.html")

def dologin(request):
    '''执行登录'''
    #验证判断
    verifycode = request.session['verifycode']
    code = request.POST['code']
    if verifycode != code:
        return redirect(reverse('web_login')+"?typeinfo=2")
        #context = {'info':'验证码错误！'}
        #return render(request,"web/login.html",context)
    try:
        #根据登录账号获取用户信息
        user = User.objects.get(username=request.POST['username'])
        # 校验当前用户状态是否是管理员
        if user.status == 6:
            #获取密码并md5
            import hashlib
            md5 = hashlib.md5()
            n = user.password_salt
            s = request.POST['pass']+str(n) 
            md5.update(s.encode('utf-8'))
            # 校验密码是否正确
            if user.password_hash == md5.hexdigest():
                # 将当前登录成功用户信息以adminuser这个key放入到session中
                request.session['webuser']=user.toDict()
                #跳转首页
                return redirect(reverse('web_index'))
            else:
                #context={"info":"登录密码错误！"}
                return redirect(reverse('web_login')+"?typeinfo=5")
        else:
            #context={"info":"此用户非管理账号！"}
            return redirect(reverse('web_login')+"?typeinfo=4")
    except Exception as err:
        print(err)
        #context={"info":"登录账号不存在！"}
        return redirect(reverse('web_login')+"?typeinfo=3")
    #return render(request,"web/login.html",context)

def logout(request):
    '''执行退出'''
    del request.session['webuser']
    return redirect(reverse('web_login'))

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'
    str1 = '0123456789'
    #随机选取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/arial.ttf', 21)
    #font = ImageFont.load_default().font
    #构造字体颜色
    fontcolor = (255, random.randrange(0, 255), random.randrange(0, 255))
    #绘制4个字
    draw.text((5, -3), rand_str[0], font=font, fill=fontcolor)
    draw.text((25, -3), rand_str[1], font=font, fill=fontcolor)
    draw.text((50, -3), rand_str[2], font=font, fill=fontcolor)
    draw.text((75, -3), 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')

(1). 项目urls路由信息配置，这里的路由进行了改写，这是为了所有的访问只要包括web/路径，就要经过中间件。

• 打开根路由文件：myobject/web/urls.py路由文件，编辑路由配置信息

from django.urls import path,include

from web.views import index

urlpatterns = [
    path('', index.index, name="index"), #前台大堂点餐首页，只要输入这个路径，就跳转到最后一个web/路径，

    # 前台管理员路由，这些路由是不包括web/这个路径的，所以不经过中间件
    path('login', index.login, name="web_login"),  #加载登录页面
    path('dologin', index.dologin, name="web_dologin"), #执行登录
    path('logout', index.logout, name="web_logout"),
    path('verify', index.verify, name="web_verify"), #验证码

    path('web/',include([
        path('', index.webIndex, name="web_index"), #前台大堂点餐首页，第一个跳转过来的。

    ]))
]

(3). 在中间件中添加前端大堂点餐登录过滤

• 打开中间件文件：myadmin/shopmiddleware.py 的__call__(self, request)方法中添加代码如下

    #大概在28行左右位置
    ...
    # 判断当前请求是否是访问网站前台
    if re.match(r"^/web",path):
        # 判断当前用户是否没有登录
        if "webuser" not in request.session:
            # 执行登录界面跳转
            return redirect(reverse('web_login'))
    ...

(4). 编写登录模板文件

• 项目前台登录页模板：/templates/web/login.html
• 这里有个验证码点击，可以刷新的操作，用的js，加入到模板中

• <img src="{% url 'web_verify'%}" onclick="this.src='{% url 'web_verify' %}?sn='+Math.random()" style="floa