使用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="登&nbsp;錄">
    </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>&nbsp;天雄</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="#">FTP</a></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">English</a></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><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>

總結

博客的登錄其實很簡單，後備只是就是要掌握session、cookie的原理。