1 問題描述
完成用戶登錄與登錄狀態顯示
需求：
-
首頁
- 未登錄狀態，顯示登錄按鈕
- 已登錄的用戶，顯示"你好用戶名"
-
登錄頁
- 賬號與密碼正確，跳轉到首頁
- 賬號與密碼不正確，在登錄頁面上提示“賬號和密碼錯誤”
2 解題提示
- 注意模板繼承
- 反向解析
- session的獲取
3 評分標準
-
用戶登錄後，可以保持登錄狀態 10分
-
登錄過程中，賬號或密碼錯誤，可以在登錄頁面輸出提示 10分
-
代碼註釋，規範10分
4 要點解析
- 反向解析
5 實現步驟
-
頁面
- base
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> <title>{% block title %}{% endblock %}</title> </head> <body> <!-- 導航欄 --> <nav class="navbar navbar-inverse" role="navigation"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="{% url 'index' %}">首頁</a> </div> <div> <ul class="nav navbar-nav"> <li><a href="#">專欄1</a></li> <li><a href="#">專欄2</a></li> <li><a href="#">專欄3</a></li> <li><a href="#">專欄4</a></li> </ul> <ul class="nav navbar-nav navbar-right"> <li> {% if login_user %} <!-- 如果用戶已登錄，顯示"你好：用戶名" --> <a href="#"> 你好：{{ login_user.username }} </a> {% else %} <!-- 如果用戶未登錄 --> <a href="{% url 'login' %}">登錄</a> {% endif %} </li> </ul> </div> </div> </nav> {% block article %} {% endblock %} </body> </html>- 首頁
{% extends 'base.html' %} {% block title %} 首頁 {% endblock %} {% block article %} <!-- 省略首頁的主體內容 --> <div class="container"> <h1>省略首頁展示的內容</h1> </div> {% endblock %}- 登錄頁
{% extends 'base.html' %} {% block title %} 登錄 {% endblock %} {% block article %} <!-- 表單內容 --> <div class="col-sm-offset-4 col-sm-4" style="margin-top: 50px;"> <form class="form-horizontal" role="form" action="{% url 'login' %}" method="post"> {% csrf_token %} <!-- 如果賬號或密碼錯誤，輸出提示 --> {% if message %} <h3 class="text-danger">{{ message }}</h3> {% endif %} <div class="form-group"> <label for="username" class="col-sm-2 control-label">用戶名</label> <div class="col-sm-10"> <input type="text" class="form-control" id="username" placeholder="請輸入用戶名" name="username"> </div> </div> <div class="form-group"> <label for="password" class="col-sm-2 control-label">密碼</label> <div class="col-sm-10"> <input type="password" class="form-control" id="password" placeholder="請輸入密碼" name="password"> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <button type="submit" class="btn btn-default">登錄</button> </div> </div> </form> </div> {% endblock %}