今天來繼續完成其他的頁面。
記得啟動虛擬環境
在創建畫面之前我們來建立相對應的 view,因為只打算顯示登入使用者的資料,所以需要使用 Django ORM 來拿取資料。
ORM 全名為 Object Relational Mapping,中文為物件關聯對映,是一種可以用程式語言來執行 SQL 資料庫語法的方法,很多程式語言都具有此技術,在 Django 中可以使用 Python 語法來操作資料庫,可以增加生產力,也可以防止常見的 SQL injection。不過有好必有壞,ORM 學習曲線高、效能較差、複雜查詢時較麻煩。
OK 回到 view。到 core/views.py 新增 profile 函式:
from django.shortcuts import render, redirect, get_object_or_404
# 其他程式碼
def profile(request, pk):
user = get_object_or_404(get_user_model(), pk=pk)
return render(request, 'core/profile.html', {
'user': user
})
這邊 pk 是 primary key 的縮寫,為一筆資料中獨特的部分,Django 預設的 pk 為 id,拿取後在 render 中加入 context {'user': user}
,context 可將拿取過的資料渲染在模板中,很常用。另外也要修改login_view
以及signup
中的HTTPResponse
:
# signup 的其他程式碼
user = authenticate(request, username=username, password=password)
login(request, user)
return redirect('core:profile', pk=user.pk)
# login_view 的其他程式碼
if user is not None:
login(request, user)
return redirect('core:profile', pk=user.pk)
接著到 core/urls.py 增加對應的 path
urlpatterns = [
# 其他程式碼
path('profile/<int:pk>', views.profile, name='profile'),
]
到 core/templates/core 創建profile.html
檔案,這個頁面會在畫面中央顯示使用者的基本資訊,以及修改資料及登出按鈕。在profile.html
中加入:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Your Profile</title>
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.15/dist/tailwind.min.css" rel="stylesheet">
</head>
<body class="bg-gray-900 text-white min-h-screen flex items-center justify-center">
<div class="bg-gray-800 p-8 rounded shadow-md w-full max-w-md">
<h1 class="text-2xl font-semibold mb-4">Your Profile</h1>
<table class="table-auto w-full">
<tbody>
<tr>
<td class="border px-4 py-2">Name:</td>
<td class="border px-4 py-2">{{ user.name }}</td>
</tr>
<tr>
<td class="border px-4 py-2">Email:</td>
<td class="border px-4 py-2">{{ user.email }}</td>
</tr>
</tbody>
</table>
<div class="mt-4">
<a href="#" class="bg-blue-500 text-white py-2 px-4 rounded-md hover:bg-blue-600">Modify</a>
<a href="#" class="bg-red-500 text-white py-2 px-4 rounded-md hover:bg-red-600 ml-2">Logout</a>
</div>
</div>
</body>
</html>
這邊使用了兩個大引號{{}}
包住變數名,此種模板標籤可用來呈現資料,而資料是從 view 的 context 傳過來的。那麼註冊後及登入後的畫面就完成。
下一步來完成更新使用者介面,之後會將程式碼優化一些。明天見嘍~