Bây giờ chúng tôi đã sẵn sàng để thêm mã hiển thị trang hoàn chỉnh đầu tiên của chúng tôi — trang chủ cho trang web LocalLibrary. Trang chủ sẽ hiển thị số lượng bản ghi chúng tôi có cho từng loại mô hình và cung cấp các liên kết điều hướng thanh bên đến các trang khác của chúng tôi. Đồng thời, chúng ta sẽ có được kinh nghiệm thực tế trong việc viết các bản đồ và chế độ xem URL cơ bản, nhận các bản ghi từ cơ sở dữ liệu và sử dụng các mẫu
điều kiện tiên quyết. Đọc phần giới thiệu Django. Hoàn thành các chủ đề hướng dẫn trước đó [bao gồm Hướng dẫn Django Phần 4. trang web quản trị Django]. Khách quan. Tìm hiểu cách tạo các bản đồ và chế độ xem URL đơn giản [không có dữ liệu nào được mã hóa trong URL], lấy dữ liệu từ các mô hình và tạo mẫuTổng quan
Sau khi chúng tôi xác định các mô hình của mình và tạo một số bản ghi thư viện ban đầu để làm việc, đã đến lúc viết mã trình bày thông tin đó cho người dùng. Điều đầu tiên chúng tôi cần làm là xác định thông tin nào chúng tôi muốn hiển thị trong các trang của mình và xác định các URL sẽ sử dụng để trả lại các tài nguyên đó. Sau đó, chúng tôi sẽ tạo trình ánh xạ URL, chế độ xem và mẫu để hiển thị các trang
Sơ đồ sau mô tả luồng dữ liệu chính và các thành phần cần thiết khi xử lý các yêu cầu và phản hồi HTTP. Vì chúng tôi đã triển khai mô hình, các thành phần chính chúng tôi sẽ tạo là
- Trình ánh xạ URL để chuyển tiếp các URL được hỗ trợ [và bất kỳ thông tin nào được mã hóa trong các URL] tới các chức năng xem thích hợp
- Các chức năng xem để lấy dữ liệu được yêu cầu từ các mô hình, tạo các trang HTML hiển thị dữ liệu và trả lại các trang cho người dùng để xem trong trình duyệt
- Các mẫu để sử dụng khi hiển thị dữ liệu trong dạng xem
Như bạn sẽ thấy trong phần tiếp theo, chúng tôi có 5 trang để hiển thị, quá nhiều thông tin để ghi lại trong một bài báo. Do đó, bài viết này sẽ tập trung vào cách triển khai trang chủ và chúng tôi sẽ đề cập đến các trang khác trong bài viết tiếp theo. Điều này sẽ giúp bạn hiểu rõ từ đầu đến cuối về cách thức hoạt động của trình ánh xạ URL, chế độ xem và mô hình trong thực tế
Xác định các URL tài nguyên
Vì phiên bản này của LocalLibrary về cơ bản là chỉ đọc cho người dùng cuối, chúng tôi chỉ cần cung cấp trang đích cho trang web [trang chủ] và các trang hiển thị danh sách và chế độ xem chi tiết cho sách và tác giả
Các URL mà chúng tôi sẽ cần cho các trang của chúng tôi là
5 — Trang chủ [chỉ mục]urlpatterns = [ path['', views.index, name='index'], ]
6 — Danh sách tất cả sáchurlpatterns = [ path['', views.index, name='index'], ]
7 — Danh sách tất cả các tác giảurlpatterns = [ path['', views.index, name='index'], ]
8 — Chế độ xem chi tiết cho một cuốn sách cụ thể, với khóa chính của trường làurlpatterns = [ path['', views.index, name='index'], ]
9 [mặc định]. Ví dụ: URL của cuốn sách thứ ba được thêm vào danh sách sẽ làurlpatterns = [ path['', views.index, name='index'], ]
0Home.
1 — Chế độ xem chi tiết cho tác giả cụ thể với trường khóa chính làHome.
9. Ví dụ: URL của tác giả thứ 11 được thêm vào danh sách sẽ làurlpatterns = [ path['', views.index, name='index'], ]
3Home.
Ba URL đầu tiên sẽ trả về trang chỉ mục, danh sách sách và danh sách tác giả. Các URL này không mã hóa bất kỳ thông tin bổ sung nào và các truy vấn tìm nạp dữ liệu từ cơ sở dữ liệu sẽ luôn giống nhau. Tuy nhiên, kết quả mà câu truy vấn trả về sẽ phụ thuộc vào nội dung của cơ sở dữ liệu
Ngược lại, hai URL cuối cùng sẽ hiển thị thông tin chi tiết về một cuốn sách hoặc tác giả cụ thể. Các URL này mã hóa danh tính của mặt hàng sẽ hiển thị [được đại diện bởi
urlpatterns = [
path['', views.index, name='index'],
]
9 ở trên]. Trình ánh xạ URL sẽ trích xuất thông tin được mã hóa và chuyển thông tin đó tới chế độ xem và chế độ xem sẽ tự động xác định thông tin nào cần lấy từ cơ sở dữ liệu. Bằng cách mã hóa thông tin trong URL, chúng tôi sẽ sử dụng một bộ ánh xạ URL, chế độ xem và mẫu để xử lý tất cả sách [hoặc tác giả]Ghi chú. Với Django, bạn có thể xây dựng các URL của mình theo bất kỳ cách nào bạn yêu cầu — bạn có thể mã hóa thông tin trong phần nội dung của URL như được hiển thị ở trên hoặc bao gồm các tham số
Home.
5 trong URL, ví dụ: Home.
6. Cho dù bạn sử dụng phương pháp nào, các URL phải được giữ sạch sẽ, hợp lý và dễ đọc, theo khuyến nghị của W3C. Tài liệu Django khuyên bạn nên mã hóa thông tin trong phần thân của URL để đạt được thiết kế URL tốt hơnNhư đã đề cập trong phần tổng quan, phần còn lại của bài viết này mô tả cách xây dựng trang chỉ mục
Tạo trang chỉ mục
Trang đầu tiên chúng ta sẽ tạo là trang chỉ mục [______05]. Trang chỉ mục sẽ bao gồm một số HTML tĩnh, cùng với "số lượng" các bản ghi khác nhau được tạo trong cơ sở dữ liệu. Để thực hiện công việc này, chúng tôi sẽ tạo ánh xạ URL, chế độ xem và mẫu
Ghi chú. Thật đáng để chú ý thêm một chút trong phần này. Hầu hết thông tin cũng áp dụng cho các trang khác mà chúng tôi sẽ tạo
ánh xạ URL
Khi chúng tôi tạo trang web bộ xương, chúng tôi đã cập nhật thư viện/url cục bộ. py để đảm bảo rằng bất cứ khi nào nhận được URL bắt đầu bằng
urlpatterns = [
path['', views.index, name='index'],
]
5, mô-đun URLConf Home.
9 sẽ xử lý chuỗi con còn lạiĐoạn mã sau từ locallibrary/urls. py bao gồm mô-đun
Home.
9urlpatterns = [
path['', views.index, name='index'],
]
6Ghi chú. Bất cứ khi nào Django gặp hàm nhập
urlpatterns = [
path['', views.index, name='index'],
]
71, nó sẽ tách chuỗi URL ở ký tự kết thúc được chỉ định và gửi chuỗi con còn lại đến mô-đun URLconf đi kèm để xử lý thêmChúng tôi cũng đã tạo một tệp giữ chỗ cho mô-đun URLConf, có tên là /catalog/urls. py. Thêm các dòng sau vào tập tin đó
urlpatterns = [
path['', views.index, name='index'],
]
Hàm
urlpatterns = [
path['', views.index, name='index'],
]
72 định nghĩa như sau- Một mẫu URL, là một chuỗi rỗng.
73. Chúng ta sẽ thảo luận chi tiết về các mẫu URL khi làm việc trên các chế độ xem khácurlpatterns = [ path['', views.index, name='index'], ]
- Hàm xem sẽ được gọi nếu mẫu URL được phát hiện.
74, là chức năng có tên làurlpatterns = [ path['', views.index, name='index'], ]
75 trong các khung nhìn. tập tin pyurlpatterns = [ path['', views.index, name='index'], ]
Hàm
urlpatterns = [
path['', views.index, name='index'],
]
72 cũng chỉ định tham số urlpatterns = [
path['', views.index, name='index'],
]
77, đây là mã định danh duy nhất cho ánh xạ URL cụ thể này. Bạn có thể sử dụng tên để "đảo ngược" trình ánh xạ, tôi. e. để tự động tạo một URL trỏ đến tài nguyên mà trình ánh xạ được thiết kế để xử lý. Ví dụ: chúng tôi có thể sử dụng tham số tên để liên kết đến trang chủ của mình từ bất kỳ trang nào khác bằng cách thêm liên kết sau vào mẫuHome.
Ghi chú. Chúng tôi có thể mã hóa liên kết như trong
urlpatterns = [
path['', views.index, name='index'],
]
78], nhưng nếu chúng tôi thay đổi mẫu cho trang chủ của mình, chẳng hạn như thành urlpatterns = [
path['', views.index, name='index'],
]
79] thì các mẫu sẽ không còn liên kết chính xác nữa. Sử dụng ánh xạ URL bị đảo ngược mạnh mẽ hơnChế độ xem [dựa trên chức năng]
Chế độ xem là chức năng xử lý yêu cầu HTTP, tìm nạp dữ liệu được yêu cầu từ cơ sở dữ liệu, hiển thị dữ liệu trong trang HTML bằng cách sử dụng mẫu HTML, sau đó trả về HTML được tạo trong phản hồi HTTP để hiển thị trang cho người dùng. Chế độ xem chỉ mục tuân theo mô hình này — nó tìm nạp thông tin về số bản ghi
urlpatterns = [
path['', views.index, name='index'],
]
80, urlpatterns = [
path['', views.index, name='index'],
]
81, có sẵn urlpatterns = [
path['', views.index, name='index'],
]
81 và urlpatterns = [
path['', views.index, name='index'],
]
83 mà chúng tôi có trong cơ sở dữ liệu và chuyển thông tin đó đến một mẫu để hiển thịMở danh mục/lượt xem. py và lưu ý rằng tệp đã nhập chức năng phím tắt render[] để tạo tệp HTML bằng cách sử dụng mẫu và dữ liệu
urlpatterns = [
path['', views.index, name='index'],
]
7Dán các dòng sau vào dưới cùng của tập tin
urlpatterns = [
path['', views.index, name='index'],
]
8Dòng đầu tiên nhập các lớp mô hình mà chúng tôi sẽ sử dụng để truy cập dữ liệu trong tất cả các chế độ xem của chúng tôi
Phần đầu tiên của hàm xem tìm nạp số lượng bản ghi bằng cách sử dụng thuộc tính
urlpatterns = [
path['', views.index, name='index'],
]
84 trên các lớp mô hình. Nó cũng nhận được một danh sách các đối tượng urlpatterns = [
path['', views.index, name='index'],
]
81 có giá trị 'a' [Có sẵn] trong trường trạng thái. Bạn có thể tìm thêm thông tin về cách truy cập dữ liệu mô hình trong hướng dẫn trước của chúng tôi Hướng dẫn Django Phần 3. Sử dụng các mô hình > Tìm kiếm bản ghiKhi kết thúc chức năng xem, chúng tôi gọi hàm
urlpatterns = [
path['', views.index, name='index'],
]
86 để tạo trang HTML và trả về trang dưới dạng phản hồi. Chức năng phím tắt này kết hợp một số chức năng khác để đơn giản hóa trường hợp sử dụng rất phổ biến. Hàm urlpatterns = [
path['', views.index, name='index'],
]
86 chấp nhận các tham số sau- đối tượng
88 ban đầu, là mộturlpatterns = [ path['', views.index, name='index'], ]
89urlpatterns = [ path['', views.index, name='index'], ]
- một mẫu HTML với các trình giữ chỗ cho dữ liệu
- một biến
00, là một từ điển Python, chứa dữ liệu để chèn vào trình giữ chỗurlpatterns = [ path['', views.index, name='index'], ]
Chúng ta sẽ nói nhiều hơn về các mẫu và biến
urlpatterns = [
path['', views.index, name='index'],
]
00 trong phần tiếp theo. Hãy bắt đầu tạo mẫu của chúng tôi để chúng tôi thực sự có thể hiển thị nội dung nào đó cho người dùngMẫu
Mẫu là một tệp văn bản xác định cấu trúc hoặc bố cục của tệp [chẳng hạn như trang HTML], nó sử dụng trình giữ chỗ để thể hiện nội dung thực tế
Một ứng dụng Django được tạo bằng startapp [như khung của ví dụ này] sẽ tìm kiếm các mẫu trong thư mục con có tên là 'mẫu' của các ứng dụng của bạn. Ví dụ: trong chế độ xem chỉ mục mà chúng tôi vừa thêm, hàm
urlpatterns = [
path['', views.index, name='index'],
]
86 sẽ mong đợi tìm chỉ mục tệp. html trong /locallibrary/catalog/templates/ và sẽ báo lỗi nếu không có tệpBạn có thể kiểm tra điều này bằng cách lưu các thay đổi trước đó và truy cập vào
urlpatterns = [
path['', views.index, name='index'],
]
03 trong trình duyệt của mình - nó sẽ hiển thị một thông báo lỗi khá trực quan. "______404" và các chi tiết khácGhi chú. Dựa trên tệp cài đặt dự án của bạn, Django sẽ tìm kiếm các mẫu ở một số nơi, tìm kiếm trong các ứng dụng đã cài đặt của bạn theo mặc định. Bạn có thể tìm hiểu thêm về cách Django tìm mẫu và những định dạng mẫu mà nó hỗ trợ trong phần Mẫu của tài liệu Django
Mở rộng mẫu
Mẫu chỉ mục sẽ cần đánh dấu HTML chuẩn cho phần đầu và phần thân, cùng với các phần điều hướng để liên kết đến các trang khác của trang web [mà chúng tôi chưa tạo] và đến các phần hiển thị văn bản giới thiệu và dữ liệu sách
Phần lớn HTML và cấu trúc điều hướng sẽ giống nhau trong mọi trang trên trang web của chúng tôi. Thay vì sao chép mã soạn sẵn trên mỗi trang, bạn có thể sử dụng ngôn ngữ tạo khuôn mẫu Django để khai báo một mẫu cơ sở, sau đó mở rộng nó để chỉ thay thế các bit khác nhau cho từng trang cụ thể
Đoạn mã sau đây là mẫu cơ sở mẫu từ base_generic. tệp html. Chúng tôi sẽ sớm tạo mẫu cho LocalLibrary. Mẫu dưới đây bao gồm HTML phổ biến với các phần dành cho tiêu đề, thanh bên và nội dung chính được đánh dấu bằng các thẻ mẫu có tên
urlpatterns = [
path['', views.index, name='index'],
]
05 và urlpatterns = [
path['', views.index, name='index'],
]
06. Bạn có thể để trống các khối hoặc bao gồm nội dung mặc định để sử dụng khi hiển thị các trang bắt nguồn từ mẫuGhi chú. Thẻ mẫu là các hàm mà bạn có thể sử dụng trong mẫu để lặp qua các danh sách, thực hiện các thao tác có điều kiện dựa trên giá trị của một biến, v.v. Ngoài các thẻ mẫu, cú pháp mẫu cho phép bạn tham chiếu các biến được chuyển vào mẫu từ dạng xem và sử dụng các bộ lọc mẫu để định dạng các biến [ví dụ: để chuyển đổi một chuỗi thành chữ thường]
urlpatterns = [
path['', views.index, name='index'],
]
0Khi xác định mẫu cho một chế độ xem cụ thể, trước tiên chúng tôi chỉ định mẫu cơ sở bằng cách sử dụng thẻ mẫu
urlpatterns = [
path['', views.index, name='index'],
]
07 — xem mẫu mã bên dưới. Sau đó, chúng tôi khai báo những phần nào từ mẫu mà chúng tôi muốn thay thế [nếu có], sử dụng các phần ________ 405/________ 406 như trong mẫu cơ sởVí dụ: đoạn mã dưới đây cho biết cách sử dụng thẻ mẫu
urlpatterns = [
path['', views.index, name='index'],
]
07 và ghi đè khối Home.
21. HTML được tạo sẽ bao gồm mã và cấu trúc được xác định trong mẫu cơ sở, bao gồm nội dung mặc định mà bạn đã xác định trong khối Home.
22, nhưng khối Home.
21 mới thay cho khối mặc địnhHome.
2Mẫu cơ sở LocalLibrary
Chúng tôi sẽ sử dụng đoạn mã sau làm mẫu cơ sở cho trang web LocalLibrary. Như bạn có thể thấy, nó chứa một số mã HTML và định nghĩa các khối cho
Home.
22, Home.
25 và Home.
21. Chúng tôi có một tiêu đề mặc định và một thanh bên mặc định với các liên kết đến danh sách tất cả sách và tác giả, cả hai đều được đặt trong các khối để dễ dàng thay đổi trong tương laiGhi chú. Chúng tôi cũng giới thiệu hai thẻ mẫu bổ sung.
Home.
27 và Home.
28. Các thẻ này sẽ được giải thích trong các phần sauTạo một tệp mới base_generic. html trong /locallibrary/catalog/templates/ và dán đoạn mã sau vào tệp
Home.
1Mẫu bao gồm CSS từ Bootstrap để cải thiện bố cục và cách trình bày của trang HTML. Sử dụng Bootstrap [hoặc một khung web phía máy khách khác] là một cách nhanh chóng để tạo một trang hấp dẫn hiển thị tốt trên các kích thước màn hình khác nhau
Mẫu cơ sở cũng tham chiếu đến một tệp CSS cục bộ [các kiểu. css] cung cấp kiểu dáng bổ sung. Tạo một phong cách. css trong /locallibrary/catalog/static/css/ và dán đoạn mã sau vào tệp
Home.
2Mẫu chỉ mục
Tạo chỉ mục tệp HTML mới. html trong /locallibrary/catalog/templates/ và dán đoạn mã sau vào tệp. Mã này mở rộng mẫu cơ sở của chúng tôi trên dòng đầu tiên, sau đó thay thế khối
Home.
21 mặc định cho mẫuHome.
4Trong phần Nội dung động, chúng tôi khai báo trình giữ chỗ [biến mẫu] cho thông tin từ chế độ xem mà chúng tôi muốn đưa vào. Các biến được kèm theo dấu ngoặc kép [tay lái]
Ghi chú. Bạn có thể dễ dàng nhận ra các biến mẫu và thẻ mẫu [hàm] - biến được đặt trong dấu ngoặc kép [
Home.
10] và thẻ được đặt trong dấu ngoặc đơn có dấu phần trăm [Home.
11]Điều quan trọng cần lưu ý ở đây là các biến được đặt tên bằng các khóa mà chúng tôi chuyển vào từ điển
urlpatterns = [
path['', views.index, name='index'],
]
00 trong hàm urlpatterns = [
path['', views.index, name='index'],
]
86 của chế độ xem của chúng tôi [xem mẫu bên dưới]. Các biến sẽ được thay thế bằng các giá trị được liên kết của chúng khi mẫu được hiển thịurlpatterns = [
path['', views.index, name='index'],
]
0Tham chiếu các tệp tĩnh trong các mẫu
Dự án của bạn có khả năng sử dụng tài nguyên tĩnh, bao gồm JavaScript, CSS và hình ảnh. Do vị trí của các tệp này có thể không được biết [hoặc có thể thay đổi], nên Django cho phép bạn chỉ định vị trí trong các mẫu của mình so với cài đặt chung của
Home.
14. Trang web bộ khung mặc định đặt giá trị của Home.
14 thành 'Home.
16', nhưng bạn có thể chọn lưu trữ những giá trị này trên mạng phân phối nội dung hoặc ở nơi khácTrong mẫu, trước tiên bạn gọi thẻ mẫu
Home.
17 chỉ định "tĩnh" để thêm thư viện mẫu, như được hiển thị trong mẫu mã bên dưới. Sau đó, bạn có thể sử dụng thẻ mẫu Home.
18 và chỉ định URL tương đối cho tệp được yêu cầuurlpatterns = [
path['', views.index, name='index'],
]
1Bạn có thể thêm một hình ảnh vào trang theo cách tương tự, chẳng hạn
urlpatterns = [
path['', views.index, name='index'],
]
2Ghi chú. Các mẫu ở trên chỉ định vị trí của các tệp, nhưng Django không phục vụ chúng theo mặc định. Chúng tôi đã định cấu hình máy chủ web phát triển để phân phát tệp bằng cách sửa đổi trình ánh xạ URL chung [/locallibrary/locallibrary/urls. py] khi chúng tôi tạo khung trang web, nhưng vẫn cần bật phân phát tệp trong sản xuất. Chúng ta sẽ xem xét điều này sau
Để biết thêm thông tin về cách làm việc với tệp tĩnh, hãy xem Quản lý tệp tĩnh trong tài liệu Django
Liên kết đến các URL
Mẫu cơ sở ở trên đã giới thiệu thẻ mẫu
Home.
27urlpatterns = [
path['', views.index, name='index'],
]
3Thẻ này chấp nhận tên của hàm
urlpatterns = [
path['', views.index, name='index'],
]
72 được gọi trong url của bạn. py và các giá trị cho bất kỳ đối số nào mà dạng xem được liên kết sẽ nhận được từ hàm đó và trả về một URL mà bạn có thể sử dụng để liên kết tới tài nguyênĐịnh cấu hình nơi tìm mẫu
Vị trí nơi Django tìm kiếm các mẫu được chỉ định trong đối tượng
Home.
21 trong cài đặt. tập tin py. Cài đặt mặc định. py [được tạo cho hướng dẫn này] trông giống như thế nàyurlpatterns = [
path['', views.index, name='index'],
]
4Cài đặt của
Home.
22, là quan trọng nhất, vì nó yêu cầu Django tìm kiếm các mẫu trong thư mục con của từng ứng dụng trong dự án, được đặt tên là "mẫu" [điều này giúp dễ dàng nhóm các mẫu với ứng dụng được liên kết của chúng để dễ sử dụng lại]Chúng tôi cũng có thể chỉ định các vị trí cụ thể để Django tìm kiếm các thư mục bằng cách sử dụng
Home.
23 [nhưng điều đó chưa cần thiết]Ghi chú. Bạn có thể tìm hiểu thêm về cách Django tìm mẫu và những định dạng mẫu mà nó hỗ trợ trong phần Mẫu của tài liệu Django
Nó trông như thế nào?
Tại thời điểm này, chúng tôi đã tạo tất cả các tài nguyên cần thiết để hiển thị trang chỉ mục. Chạy máy chủ [
Home.
24] và mở Home.
25 trong trình duyệt của bạn. Nếu mọi thứ được định cấu hình chính xác, trang web của bạn sẽ giống như ảnh chụp màn hình sauGhi chú. Liên kết Tất cả sách và Tất cả tác giả sẽ chưa hoạt động vì đường dẫn, dạng xem và mẫu cho các trang đó chưa được xác định. Chúng tôi vừa chèn phần giữ chỗ cho các liên kết đó trong mẫu
Home.
26thử thách bản thân
Dưới đây là một số nhiệm vụ để kiểm tra mức độ quen thuộc của bạn với các truy vấn, dạng xem và mẫu của mô hình
- Mẫu cơ sở LocalLibrary bao gồm một khối
22. Ghi đè khối này trong mẫu chỉ mục và tạo tiêu đề mới cho trangHome.
Ghi chú. Phần Mở rộng mẫu giải thích cách tạo khối và mở rộng khối trong mẫu khác
- Sửa đổi chế độ xem để tạo số lượng cho các thể loại và sách có chứa một từ cụ thể [không phân biệt chữ hoa chữ thường] và chuyển kết quả tới
00. Bạn thực hiện việc này theo cách tương tự như tạo và sử dụngurlpatterns = [ path['', views.index, name='index'], ]
29 vàHome.
40. Sau đó cập nhật mẫu chỉ mục để bao gồm các biến nàyHome.
Tóm lược
Chúng tôi vừa tạo trang chủ cho trang web của mình — một trang HTML hiển thị một số bản ghi từ cơ sở dữ liệu và liên kết đến các trang chưa được tạo khác. Trong quá trình thực hiện, chúng tôi đã tìm hiểu thông tin cơ bản về trình ánh xạ URL, chế độ xem, truy vấn cơ sở dữ liệu bằng các mô hình, chuyển thông tin đến mẫu từ chế độ xem cũng như tạo và mở rộng mẫu
Trong bài viết tiếp theo, chúng tôi sẽ dựa trên kiến thức này để tạo bốn trang còn lại của trang web của chúng tôi