6、第十 - WEB開發進階 - Django使用者登入後的資訊管理及生命週期簡述
阿新 • • 發佈：2018-11-01
案例操作：
示範案例，要求：
- 1、模擬使用者登入，賬號密碼一致、輸入錯誤的話進行提示
- 2、使用者登入成功跳轉到後臺，並顯示其他home.html資訊
- 3、彈出對話方塊，設定新增、刪除按鈕
程式碼結構：
程式碼如下：
登入頁面：login_main.html （可優化密碼登入驗證）
<span style="color: red">{{error_msg}}</span> 替換文字
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form name="/login" method="post">
<div align="center" >
<table border="1" width="60%" >
<tr>
<td colspan=2 align=center><h3>遊戲後臺管理</h3></td>
</tr>
<tr>
<td height="39" width="463" >
<a color="#FFFF00">使用者名稱：</a>
<input type="text" maxlength=10 id="username" name="username" maxlength=10 placeholder="使用者名稱" >
<a color="#FFFF00">密碼：</a><input type="password" name="pwd" maxlength=16 id="pwd" placeholder="密碼" >
</td>
</tr>
<tr>
<td height="53" width="463" colspan="4" align=center >
<input type="submit" value="確認">
<span style="color: red">{{error_msg}}</span>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
樣式檔案：common.css
.hide {
display: none;
}
.modal {
position: fixed;
top:50%;
left: 50%;
width: 500px;
height: 200px;
margin-left: -250px;
margin-top: -250px;
background-color: #eeeeee;
z-index: 10;
}
.shadow {
position: fixed;
top: 0;
left: 0;
width: 0;
height: 0;
margin-left: 0;
margin-top: 0;
background-color: black;
z-index: 9;
}
處理邏輯：views.py
from django.shortcuts import render
from django.shortcuts import HttpResponse
from django.shortcuts import render
from django.shortcuts import redirect #重定向的跳轉的頁面
def login(request):
error_msg = '' #設定全域性變數
if request.method == "POST":
user = request.POST.get('username',None)
pwd = request.POST.get('pwd',None)
if user == "root" and pwd == "chen1203":
#匹配成功，進行跳轉
return redirect("/home")
else:
# 匹配錯誤，提示錯誤
error_msg = "使用者名稱或密碼錯誤"
return render(request,'login_main.html',{'error_msg':error_msg})
def Home(request):
return render(request, 'home.html')
對應關係：urls.py
from django.contrib import admin
from django.urls import path
from cmdb import views
urlpatterns = [
path('admin/', admin.site.urls),
path(r'home',views.Home),
path(r'login',views.login)
]
管理頁面：home.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="/static/common.css" />
</head>
<body>
<table border="1" width="200px">
<thead>
<input type="button" value="新增" onclick="addElement()" />
</thead>
<tbody id="tb">
<tr >
<td><input type="checkbox"></td>
<td>1.1.1.1</td>
<td>80</td>
<td>
<a class="edit">編輯</a>|<a class="del">刪除</a>
</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td target="ip">1.1.1.2</td>
<td target="port">80</td>
<td>
<a class="edit">編輯</a>|<a class="del">刪除</a>
</td>
</tr>
</tbody>
</table>
<form method="post">
<div class="modal hide">
<div>
<input id="inIp" name="ip" type="text">
<input id="inPort" name="port" type="text">
</div>
<div>
<input type="button" value="取消" onclick="cacleModal();">
<input type="button" value="確定" onclick="subHide();">
</div>
</div>
</form>
<div class="shadow hide"></div>
<script type="application/javascript" src="/static/jquery-1.12.4.js"></script>
<script>
//點選新增的時候，可以手工錄入資料
function subHide() {
$('.modal,.shadow').removeClass('hide');
var tr = document.createElement('tr');
var td1 = document.createElement('td');
td1.innerHTML = '<input type=\"checkbox\">';
var td2 = document.createElement('td');
td2.innerHTML = $('#inIp').val();
var td3 = document.createElement('td');
td3.innerHTML = $('#inPort').val();
var td4 = document.createElement('td');
td4.innerHTML = "<a class=\"edit\">編輯</a>|<a class=\"del\">刪除</a>";
$(tr).append(td1);
$(tr).append(td2);
$(tr).append(td3);
$(tr).append(td4);
$('#tb').append(tr);
$('.modal,.shadow').addClass('hide');
};
//點選刪除，可以刪除資料
$('.del').click(function () {
$(this).parent().parent().remove()
});
//處理新增按鈕
function addElement() {
$('.modal,.shadow').removeClass('hide');
}
//處理輸入的取消按鈕
function cacleModal() {
$('.modal,.shadow').addClass('hide');
$('.modal input[type="text"]').val('');
}
//每行資料的編輯按鈕
$('.edit').click(function () {
//this 現在的位置是在 edit編輯的位置上
$('.modal,.shadow').removeClass('hide');
//迴圈獲取tds中的內容
//獲取<td>文字中的資訊
var tds = $(this).parent().prev();
var port = $(tds)[0].innerText;
var host = $(tds).prev()[0].innerText;
//賦值給input標籤中value
$('.modal input[name="ip"]').val(host);
$('.modal input[name="port"]').val(port);
});
</script>
</body>
</html>
效果圖：
Django的生命週期：
關於前面Django的知識點梳理，內容回顧
內容整理：
1、建立Django工程
django-admin startproject
2、建立APP
cd 工程名
python manage.py startapp app名稱
3、靜態檔案
project.settings.py
STARTCFILES_DIRS = (
os.path.join(BASE_DIR,"static")
)
4、模板路徑
template 存放目錄
settings.py檔案
TEMPLATES = {
..
'DIRS': [os.path.join(BASE_DIR,'templates')],
..
}
5、settings配置檔案
添加註釋：
middlerware = {
..
#'django.middleware.csrf.CsrfViewMiddleware',
..
}
6、定義路由規則
url.py 路由規則檔案，
from cmdb import views
urlpatterns = [
path('admin/', admin.site.urls),
path(r'home',views.Home),
path(r'login',views.login)
]
7、定義檢視函式（邏輯處理函式）
app專案下的views.py
def func(request):
# request.method GET/POST
# http://127.0.0.1:8000/home?nid=123&name=root
# request.GET.get('',None)
#request.POST.get('',None)
資料返回的三種方式：
#return HttpResponse("字串")
#return render(request,"HTML模板的路徑")
#return redirect('/只能填URL') urls.py 對應表中的URL路徑
8、模板渲染
特殊的模板語言
-- {{變數名}} --
def func(request):
return render(request,"index.html",{"error_msg":"name"})
index.html
<html>
..
<body>
<div>{{name}}</div>
</body>
..
</html>
=====> 最後生成字串
<html>
..
<body>
<div>name</div>
</body>
..
</html>
--- for迴圈
def func(request):
return render(request,"index.html",{"msg":"name",'user_list':{'chen','qing'}})
index.html
<html>
..
<body>
<div>{{msg}}</div>
<ul>
{% for row in user_list %}
<li>{{row}}</li>
{% endfor %}
</ul>
</body>
..
</html>
--- 索引
def func(request):
return render(request,"index.html",{
"msg":"name",
'user_list':{'chen','qing'},
'user_dict':{'k1':'v1','k2':'v2','k3':'v3'}
})
index.html
<html>
..
<body>
<div>{{msg}}</div>
<a>{{user_list.1}}</a>
<a>{{user_dict.k1}}</a>
<a>{{user_dict.k2}}</a>
</body>
..
</html>
--- if條件
def func(request):
return render(request,"index.html",{
"msg":"name",
'user_list':{'chen','qing'},
'user_dict':{'k1':'v1','k2':'v2','k3':'v3'}
})
模板index.html
<html>
..
<body>
<div>{{msg}}</div>
<a>{{user_list.1}}</a>
<a>{{user_dict.k1}}</a>
<a>{{user_dict.k2}}</a>
{% if age %}
<a>年齡</a>
{% if age < 16 %}
<a>body</a>
{% elif age > 30 %}
<a>old the man</a>
{% endif %}
{% else %}
<a>計算不出來</a>
{% endif %}
</body>
..
</html>
~~ 以上~~