Looking For Anything Specific?

tháng 5 18, 2020 INHDI

B5--View và Template



Trong phần này chúng ta sẽ tìm hiểu về View và Template trong Django.

Trong Django thì một View là một hàm/phương thức làm một công việc cụ thể nào đó, một View  thường đi kèm với một Template (chúng ta sẽ tìm hiểu ở dưới). Ví dụ, một ứng dụng Blog có một số View sau:

  • Home – hiển thị các bài viết mới nhất.
  • Entry – hiển thị bài viết nào đó.
  • Archive – Lưu trữ các bài viết theo năm/tháng.
  • Comment – xử lý việc đăng bình luận của độc giả.

Trong Django, một trang web được tạo ra bởi các hàm View, Django sẽ chọn View nào tùy thuộc vào URL mà chúng ta đã thiết lập. Django cho phép chúng ta tạo những đường dẫn dễ nhìn hơn, chẳng hạn như đường dẫn bài viết mà bạn đang đọc 🙂

Để từ một đường dẫn URL đến một View thì Django sử dụng khái niệm URLConf, đây là một module Python của Django làm nhiệm vụ phân tích đường dẫn và chuyển đến một hàm View nhất định.

Tạo View

polls/views.py
1
2
3
4
5
6
7
8
9
from django.shortcuts import render
from django.views import View
from django.http import HttpResponse
# Create your views here.

def detail(request):
    return HttpResponse('Đây là Views Blog')

Tạo file urls.py trong view

polls/urls.py
1
2
3
4
5
6
7
from django.urls import path
from . import views

urlpatterns = [
    path('blog/',views.blogview,name='blog'),
]


Tạo Templates 

Tạo thư mục template trong polls vào thư mục polls trong Template, thêm file blog.html 

Lưu ý  tên thư mục polls phải  trùng với tên app



  • Thêm html css và js cho templates. Ở đây mk hướng đãn cơ bản về các bạn có thể làm thêm
polls/blogs.html












































































<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>BlogsNHD</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
          integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>

<nav class="navbar navbar-expand-lg navbar navbar-dark bg-dark">
    <a class="navbar-brand" href="#">BlogsNHD</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
                <a class="nav-link" href="#">Trang chủ <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown"
                   aria-haspopup="true" aria-expanded="false">
                    Dropdown
                </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                    <a class="dropdown-item" href="#">Action</a>
                    <a class="dropdown-item" href="#">Another action</a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" href="#">Something else here</a>
                </div>
            </li>
            <li class="nav-item">
                <a class="nav-link disabled" href="#">Disabled</a>
            </li>
        </ul>
        <form class="form-inline my-2 my-lg-0">
            <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
            <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
        </form>
    </div>
</nav>
<div class="container mt-5">
    {%for x in '12345454'%}
    <div class="card mt-3">
        <div class="card-header">
            <p class="card-text">Bài Số</p>
        </div>

        <div class="card-body">
            <h5 class="card-title">Tiêu đề</h5>
            <p class="card-text">Nội dung tóm tắt</p>
            <p class="card-text">Tắc Giả</p>
            <a href="#" class="btn btn-primary">Xem thêm</a>
        </div>
    </div>
    {%endfor%}
</div>


<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
        integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
        crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
        integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
        crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
        integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
        crossorigin="anonymous"></script>
</body>
</html>

Ta sửa lại file views
polls/views.py
1
2
3
4
5
6
7
8
9
from django.shortcuts import render
from django.views import View
from django.http import HttpResponse
from .models import Blog
# Create your views here.

def blogview(request):
    return render(request,'polls/blogs.html')
Chạy lại sever
Ta đã tạo ra 1 template cơ bản. 
Tags

Đăng nhận xét

0 Nhận xét