Thiết kế giao diện danh sách người dùng (user_list.html) trong dự án Django

Để quản lý các trang liên quan đến chức năng người dùng, hãy tạo một thư mục con có tên account bên trong thư mục templates của dự án.

  1. Thiết kế mã giao diện Tạo tệp user_list.html với nội dung sau:
{% extends 'base.html' %}
{% block content %}
    <div style="margin-top: 16px;">
        <a href="{% url 'user_add' %}" class="btn btn-primary btn-sm">Thêm mới</a>
    </div>
    <div class="card mt-3">
        <div class="card-header">Danh sách người dùng</div>
        <div class="card-body">
            | Mã số | Tên đăng nhập | Email | Lần đăng nhập đầu | Lần đăng nhập cuối | Thao tác |
|---|---|---|---|---|---|
{{ error\_message }}

| {{ user\_item.id }} | {{ user\_item.username }} | {{ user\_item.email }} | {{ user\_item.first\_name }} | {{ user\_item.last\_name }} | [Sửa](<{% url 'user_edit' user_item.id %}>) [Xóa](<{% url 'user_delete' user_item.id %}>) |
        </div>
    </div>
{% endblock %}
  1. Thiết kế URL 2.1. URL chính (urls.py cấp project) Đảm bảo đã bao gồm các URL của ứng dụng quản lý người dùng.
from django.contrib import admin
from django.urls import path, include
# from django.conf import settings # Không cần thiết cho ví dụ này
# from django.conf.urls.static import static # Không cần thiết cho ví dụ này

urlpatterns = [
    # ... các định tuyến URL khác ...
    path('admin/', admin.site.urls),
    path('myapp/', include('MyApp.urls')),
]

2.2. URL phụ (urls.py cấp app - MyApp/urls.py) Định nghĩa URL cho chức năng danh sách người dùng.

from django.urls import path
from . import views # Import views từ cùng một thư mục

urlpatterns = [
    # ... các định tuyến URL khác ...
    path('users/', views.list_users, name='user_list'),
]
  1. Thiết kế View Tạo hàm list_users trong tệp views.py của ứng dụng.
from django.shortcuts import render
from django.contrib.auth.decorators import login_required
from django.contrib.auth.models import User # Import model User

@login_required
def list_users(request):
    all_users = User.objects.all() # Lấy tất cả người dùng
    if all_users:
        return render(request, 'account/user_list.html', {'user_data': all_users})
    else:
        error_msg = "Không tìm thấy dữ liệu người dùng nào."
        return render(request, 'account/user_list.html', {'error_message': error_msg})
  1. Cập nhật menu trong base.html Thêm liên kết đến trang quản lý người dùng trong tệp base.html.
<li class="nav-item">
    <a class="nav-link" href="{% url 'user_list' %}">Quản lý người dùng</a>
</li>
  1. Hiển thị kết quả Sau khi hoàn thành các bước trên, bạn có thể truy cập vào trang danh sách người dùng thông qua menu đã cập nhật.

Thẻ: Django python HTML css Bootstrap

Đăng vào ngày 19 tháng 5 lúc 06:43