django 登錄頁面優化

目錄

引言
環境準備
後端代碼
前端代碼
運行程序

引言：

bootstrap登錄頁面外觀比較平庸，看久了有點疲倦，現將登錄頁面美化一下。

環境準備：

1.python3
2.django
3.bootstrap3

後端代碼：

創建login_check視圖函數，用來處理登錄

def login_action(request):
    if request.method == "POST":
        username = request.POST.get('username','')
        password = request.POST.get('password','')
        remember = request.POST.get('remember','')
        print(remember)
        user = auth.authenticate(username=username,password=password)
        if user is not None:
            auth.login(request,user) #登陸
            request.session['user'] = username 
            response = HttpResponseRedirect('/event_manager/')
            
            if remember == "on":
                # 設置cookie username *過期時間爲1周
                response.set_cookie('username', username, max_age=7 * 24 * 3600)
            return response

        else:
            # return render(request,'index.html',{'error':'username or password error!'})
            return redirect('/login/')

創建login視圖函數，用來返回登錄頁面

#登錄顯示頁面
def login(request):
    '''顯示登陸頁面'''
    # 獲取cookie username
    if 'username' in request.COOKIES:
        # 獲取記住的用戶名
        username = request.COOKIES['username']
        print("用戶名名:%s"%username)
    else:
        username = ''
    return render(request,'index_bak.html',{'username': username})

前端HTML部分代碼：

<div class="container" style="margin-top: 13%;">
    <div class="row">
        <div class="col-md-4 col-md-offset-4">
            <div class="panel panel-success">
                <div class="panel-heading">登錄信息</div>
                <div class="panel-body">
                    <form action="/login_action/" method="post">
                        <div class="form-group has-feedback">
                            <i class="fa fa-user fa-lg"></i>
                            <input type="text" class="form-control" name="username" value="{{ username }}"
                                   placeholder="用戶名">
                        </div>
                        <div class="form-group has-feedback">
                            <i class="fa fa-lock fa-lg"></i>
                            <input type="password" class="form-control" name="password"
                                   placeholder="密碼">
                        </div>
                        <div class="form-group">
                            <div class="checkbox">
                                <label>
                                    <input type="checkbox" name="remember">記住用戶名
                                </label>
                            </div>
                        </div>
                        <!-- button的btn-block 可以佔滿當前珊欄而不用自適應。-->
                        <button type="submit" class="btn btn-success btn-block btn-lg">登錄</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

打開瀏覽器訪問登錄頁面：

再對比一下默認的登錄

以上源碼如需要可加羣:696400122獲取。