Day 14 - 來優化一下程式碼吧！ - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

2023 iThome 鐵人賽

DAY 14

自我挑戰組

轉職新手學 Django 及 DRF系列第 14 篇

Day 14 - 來優化一下程式碼吧！

15th鐵人賽轉職 python django django-rest-framework

kk00915

2023-09-29 00:01:44

278 瀏覽

分享至

在設計網頁時，很難一次就到完美或完全符合需求(神人例外)，所以先求有再求好，網頁會動了再將程式碼變得好看一些，這就是今天要做的事！

template 優化

從這個專案的模板可以發現有很多重複的地方，為了實現 DRY 原則，可以將重複處匯集成另一個檔案，再傳到個檔案中。到 core/templates/core 創建base.html，並將重複的 HTML 貼到其中：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}{% endblock %}</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">
        {% block content %}
        {% endblock %}
    </div>
</body>
</html>

上面程式碼中，{% block content %}與{% endblock %}是用來放入 HTML 的區域，也就是每個 template 相異之處。{% block title %}``{% endblock %}之間則是放入不同的標題，這些模板標籤在所有延伸自此的模板都會使用。接著到每個模板中進行修改，這邊以index.html為例：

{% extends 'core/base.html' %}

{% block title %}
Login or Sign Up
{% endblock %}

{% block content %}
<div class="bg-gray-800 p-8 rounded shadow-md w-full max-w-sm">
    <h1 class="text-2xl font-semibold mb-4">Login or Sign Up</h1>
    <form method="post" class="space-y-4">
        {% csrf_token %}
        <div>
            <label for="email" class="block text-gray-300">Email:</label>
            <input type="email" id="email" name="email" required
                class="w-full px-4 py-2 border rounded-md bg-gray-700 text-white focus:outline-none focus:border-blue-500">
        </div>
        <div>
            <label for="username" class="block text-gray-300">Username:</label>
            <input type="text" id="username" name="username" required
                class="w-full px-4 py-2 border rounded-md bg-gray-700 text-white focus:outline-none focus:border-blue-500">
        </div>
        <div>
            <label for="password" class="block text-gray-300">Password:</label>
            <input type="password" id="password" name="password" required
                class="w-full px-4 py-2 border rounded-md bg-gray-700 text-white focus:outline-none focus:border-blue-500">
        </div>
        <button type="submit"
            class="w-full bg-blue-500 text-white py-2 px-4 rounded-md hover:bg-blue-600">
            Sign Up
        </button>
        <p class="text-gray-300 text-center">Or</p>
        <button type="submit" formaction="{% url 'core:login' %}"
            class="w-full bg-gray-600 text-white py-2 px-4 rounded-md hover:bg-gray-700">
            Log In
        </button>
    </form>
</div>
{% endblock %}

第一行的{% extends 'core/base.html' %}需要base.html的路徑，取代了重複的程式碼，讓檔案看起來更簡潔。

login decorator

有些網頁需要登入後才能進行操作，因此需要在 view 上增加一些限制，而 Django 中有現成裝飾器可以用來限制存取。進入 core/views.py 導入裝飾器並加在 view 上：

# 其他導入
from django.contrib.auth.decorators import login_required

# 其他程式碼

# 加入裝飾器
@login_required
def profile(request, pk):
    # 其他程式碼

# 加入裝飾器
@login_required
def update(request, pk):
    # 其他程式碼

這樣使用者就必須先登入才能使用這兩個 view 的邏輯。