使用Django构建个人网站（九）——博客登录（一个简易demo）

这一段时间没有更新博客，因为一些其他原因，玩心最近有点泛滥，dota2的时间也增加了很多。
我意识到这样是不对的，只有提升技术，提升自我，才能实现自己的人生理想，做一名心目中的技术人才

博客登录简介

作为一个（自认为）比较成熟的项目，多用户交互是少不了的，要把用户名、密码等信息保存在数据库中。这一部分，我本应驾轻就熟。

我曾经用Flask框架自己实现了登录功能，并且引入了短信验证、邮箱验证等稍微高级一点的功能。

准备用自己的经验直接构建登录的MTV模块，谁知……django框架自带登录功能，那我就不要自己傻乎乎的去写了，来弄一个demo吧。

MTV逐步构建

话不多说
python manage.py startapp account

Model构建

格式我没有构建Model我用了系统自带的Model，直接登陆127.0.0.1:8000/admin，为自己新增了一个user用来测试，so easy。账户名和密码自定
model模型构建好了，但是前端页面的表单模型还没创建好，在/account/form.py中修改表单配置

from django import forms
class LoginForm(forms.Form):
    username = forms.CharField()
    password = forms.CharField(widget=forms.PasswordInput)

创建好这个表单模型之后，就可以构建视图函数了

视图函数构建

视图函数这里就比较复杂了，复杂的原因在于我想让同一个网址来处理get和post请求，在前端发来GET请求时，返回登录界面窗体；若前端发来POST请求，则是处理表单信息，完成登录功能。（session）
在这里用户验证我是用了django自带的django.contrib.auth.authenticate方法以及login方法自动验证登录。
完整的account/views.py如下,需要备注的部分我会写注释：

from django.shortcuts import render, redirect
from django.http import HttpResponse
from django.contrib.auth import authenticate, login
#导入LoginForm，刚才编写的form表单，SignUpForm先不管
from .forms import LoginForm, SignUpForm

# Create your views here.
def user_login(request):
    if request.method == 'GET':
        # 自动生成表单
        login_form = LoginForm()
        context = {}
        #把表单写入参数并回传给前端模板
        context['form'] = login_form
        return render(request, "account/login.html", context=context)
    if request.method == 'POST':
        #用POST请求来初始化表单
        login_form = LoginForm(request.POST)
        # 判断用户输入是否合法
        if login_form.is_valid():
            # 用键值对存储了表单中的数据，cleaned_data是一个方法，可以获取键值对
            data = login_form.cleaned_data
            #直接用authenticate方法验证用户名和密码是否正确
            user = authenticate(username=data['username'], password=data['password'])
            #如果验证成功
            if user:
            	#django自带的登陆函数
                login(request, user)
                #设置session
                request.session['username'] = data['username']
                #登录成功后跳转回主页面
                return redirect('/')
            else:
                return HttpResponse('账号或密码错误')
        else:
            return HttpResponse('登录内容有误')

在这里有一个要注意的地方，就是session的设置，我们都知道session其实是一个另类的cookie，它目的是让服务器能够识别客户端，django默认的session时间很长，需要我们手动改为浏览器关闭则删除session

设置settings.py，增加如下代码

SESSION_EXPIRE_AT_BROWSER_CLOSE = True

这样就OK了，可以继续写前端界面

登陆的前端模板

前端模板没啥好介绍的，都是用的bootstrap框架直接搭建的，再利用{{form.属性}}生成一些表单即可。

{% extends "base_cn.html" %}
{% load staticfiles %}
{% block title %}
欢迎登陆
{% endblock %}
{% block content %}
<div class="row text-center vertical-middle-sm">
    <h1>登录界面(采用Django)内置方法h1>
    {% if form.errors %}
    <p style="color: red;">账号或密码错误,请重试!p>
    {% endif %}
    <p>请输入账号和密码p>
    <form class="form-horizontal" action="{% url 'user_login' %}" method="POST">{% csrf_token %}
        <div class="form-group">
            <label for="{{form.username.id_for_label}}" class="col-md-5 control-label" style="color: red;">
                <span class="glyphicon glyphicon-user">span> 用户名:
            label>
            <div class="col-md-6 text-left">{{form.username}}div>
        div>
        <div class="form-group">
            <label for="{{form.password.id_for_label}}" class="col-md-5 control-label" style="color: red;">
                <span class="glyphicon glyphicon-floppy-open">span> 密 码:
            label>
            <div class="col-md-6 text-left">{{form.password}}div>
        div>
        <input type="submit" class="btn btn-primary btn-lg" value="登 录">
    form>
div>
{% endblock %}

登录成功后修改导航栏内容

完成了登录功能。
但是这是不完善的，我们平时进一个网站，如果登陆成功，顶部导航栏都会更改为“欢迎您，XX”,再点退出则回复原样，这个其实非常简单，修改前端模板即可
名称为templates/header_cn.html
代码如下,重点看53行以后的代码

<nav class="navbar navbar-inverse">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="http://www.wangxiong.club"><span
                    class="glyphicon glyphicon-cloud">span> 天雄a>
        div>

        
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li><a href="/">主页a>li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                        aria-expanded="false">我的应用<span class="caret">span>a>
                    <ul class="dropdown-menu">
                        <li><a href="#">爬取翔云系统a>li>
                        <li><a href="#">爬取京东a>li>
                        <li role="separator" class="divider">li>
                        <li><a href="#">FTPa>li>
                        <li role="separator" class="divider">li>
                        <li><a href="#">机器学习项目a>li>
                    ul>
                li>
            ul>
            <ul class="nav navbar-nav">
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                        aria-expanded="false">博客分类<span class="caret">span>a>
                    <ul class="dropdown-menu">
                        {% for category in categories %}
                        <li><a href="/category/{{category.id}}">{{category.name}}a>li>
                        {% endfor %}
                    ul>
                li>
                <li><a href="/blog">我的博客a>li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                        aria-expanded="false">语言<span class="caret">span>a>
                    <ul class="dropdown-menu">
                        <li><a href="en">Englisha>li>
                        <li><a href="">简体中文a>li>
                    ul>
                li>
            ul>
            
            <ul class="nav navbar-nav navbar-right">
                <form class="navbar-form navbar-left">
                    <div class="form-group">
                        <input type="text" class="form-control" placeholder="搜索内容">
                    div>
                    <button type="submit" class="btn btn-default">搜索button>
                form>
                {% if user.is_authenticated %}
                <li><a href="#">欢迎您,{{user.username}}a>li>
                <li><a href="/account/logout">退出登录a>li>
                {% else %}
                <li><a href="/account/signup">注册a>li>
                <li><a href="/account/login">登录a>li>
                {% endif %}
            ul>
        div>
    div>
nav>

总结

博客的登录其实很简单，后备只是就是要掌握session、cookie的原理。