Django入門-簡單的登陸

時間 2019-12-13

標籤 django 入門簡單登陸欄目 Python 简体版

原文原文鏈接

一、登陸頁面

二、項目目錄結構

三、須要修改四個文件

urls.py-------路徑與函數之間的對應關係

views.py-------函數定義與邏輯處理

加入一個login.html文件

靜態文件夾下面加入bootstrap、jquery等文件

四、urls.py修改

 1 from django.conf.urls import url
 2 from .views import *
 3 
 4 # 保存了路徑與函數之間的對應關係
 5 urlpatterns = [
 6     # path('admin/', admin.site.urls),
 7     url(r'^test/$', test),
 8     url(r'^test01/$', test01),
 9     url(r'^zhangxiaoxue/$', zhangxiaoxue),
10     url(r'^login/$', login),
11 ]

五、view.py配置

 1 # views.py只是存放邏輯處理函數
 2 from django.contrib import admin
 3 from django.urls import path
 4 from django.conf.urls import url
 5 
 6 # 導入django自帶的httpResponse模塊，用他來幫咱們作http協議的響應
 7 # 這樣，咱們只需關心處理用戶請求的函數就能夠了，而不須要關注協議自己所作的事情，
 8 # 要返回一個完整的html文件，就要用到render
 9 from django.shortcuts import HttpResponse,render,redirect
10 
11 def login(request):
12     error_msg = ''
13     userlist = []
14     # 若是請求是post
15     if request.method == 'POST':
16         # 獲取用戶提交的數據，作是否登陸成功的判斷
17         # email = request.POST.get('email', None)
18         email = request.POST["email"]
19         pwd = request.POST["pwd"]
20         temp = {'email': email, 'pwd': pwd}
21         userlist.append(temp)
22         # pwd = request.POST.get('pwd', None)
23         if email == '123@qq.com' and pwd == '123456':
24             return redirect('http://www.baidu.com')
25             # return HttpResponse('登陸成功！！！')
26         else:
27             error_msg = "帳號或密碼錯誤！請從新登陸！"
28     # 若是是其餘的請求
29     return render(request, 'login.html', {'error': error_msg, 'data': userlist})

六、login.html文件【用了bootstrap因此要引入】

 1 <!DOCTYPE html>
 2 <html lang="zh-CN">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta http-equiv="x-ua-compatible" content="IE=edge">
 6     <meta name="viewport" content="width=device-width, initial-scale=1">
 7     <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css">
 8     <link rel="stylesheet" href="/static/fontawesome/css/font-awesome.min.css">
 9     <script href="/static/jquery-3.3.1.js"></script>
10     <title>mysite-登陸頁面</title>
11     <style>
12         body {
13             background-color: #eee;
14         }
15     </style>
16 </head>
17 <body>
18 
19 <div class="container">
20     <div class="row">
21         <div class="col-md-4 col-md-offset-4" style="margin-top: 100px">
22             <h1 class="text-center">請登陸</h1>
23             <form class="form-horizontal" action="/login/" method="post">
24                 <div class="form-group">
25                     <label for="inputEmail3" class="col-sm-2 control-label"></label>
26                     <div class="input-group col-sm-8">
27                          <span class="input-group-addon"><i class="fa fa-envelope-o fa-fw"></i></span>
28                         <input type="email" name="email" class="form-control" id="inputEmail3" placeholder="Email">
29                     </div>
30                 </div>
31                 <div class="form-group">
32                     <label for="inputPassword3" class="col-sm-2 control-label"></label>
33                     <div class="input-group col-sm-8">
34                         <span class="input-group-addon"><i class="fa fa-key fa-fw"></i></span>
35                         <input type="password" name="pwd" class="form-control" id="inputPassword3" placeholder="Password">
36                     </div>
37                 </div>
38                 <div class="form-group">
39                     <div class="input-group col-sm-offset-2 col-sm-8">
40                         <div class="checkbox">
41                             <label>
42                                 <input type="checkbox"> 記住我
43                             </label>
44                         </div>
45                     </div>
46                 </div>
47                 <div class="form-group">
48                     <div class="input-group col-sm-offset-2 col-sm-8">
49                         <button type="submit" class="btn btn-primary btn-block">登陸</button>
50                     </div>
51                     <p class="text-danger text-center">{{ error }}</p>
52                 </div>
53 {#{% csrf_token %}是爲了解決下面的問題#}
54 {# CSRF verification failed. Request aborted. 這一個是 Django 自帶的 CSRF 防範機制。CSRF 是什麼？某度百科有言：「CSRF（Cross-site request forgery）跨站請求僞造，也被稱爲「One Click Attack」或者Session Riding，一般縮寫爲CSRF或者XSRF，是一種對網站的惡意利用。」（能夠看出，咱們的 Django 框架，但是至關的嚴謹和方便。）#}
55                 {% csrf_token %}
56             </form>
57             <h1>用戶展現</h1>
58                 <table border = '1'>
59                     <thead >
60                         <tr>用戶名</tr>
61                         <tr>密碼</tr>
62                     </thead>
63                     <tbody >
64                         {% for item in data %}
65                         <tr>
66                             <td>{{ item.email }}</td>
67                             <td>{{ item.pwd }}</td>
68                         </tr>
69                         {% endfor %}
70                     </tbody>
71 
72                 </table>
73 
74         </div>
75     </div>
76 </div>
77 </body>
78 </html>