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 Show
Tổng quanSau 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à
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ênVì 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à
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 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ố 5 trong URL, ví dụ: 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ụcTrang đầ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ạ URLKhi 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 một URL bắt đầu bằng 5, mô-đun URLConf 9 sẽ xử lý chuỗi con còn lạiĐoạn mã sau từ locallibrary/urls. py bao gồm mô-đun 9 6Ghi chú. Bất cứ khi nào Django gặp hàm nhập 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 đó
Hàm 72 định nghĩa như sau
Hàm 72 cũng chỉ định tham số 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ẫu
Ghi chú. Chúng tôi có thể mã hóa liên kết như trong 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 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 80, 81, có sẵn 81 và 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 7Dán các dòng sau vào dưới cùng của tập tin 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 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 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 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 86 chấp nhận các tham số sau
Chúng ta sẽ nói nhiều hơn về các mẫu và biến 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ẫuMẫ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 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 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ẫuMẫu chỉ mục sẽ cần đánh dấu HTML chuẩn cho phần đầu và phần nội dung, 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 05 và 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 chức năng 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) 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 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 07 và ghi đè khối 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 22, nhưng khối 21 mới thay cho khối mặc định 2Mẫu cơ sở LocalLibraryChú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 22, 25 và 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. 27 và 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 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 kiểu. css trong /locallibrary/catalog/static/css/ và dán đoạn mã sau vào tệp 2Mẫu chỉ mụcTạ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 21 mặc định cho mẫu 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 ( 10) và thẻ được đặt trong dấu ngoặc đơn có dấu phần trăm ( 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 00 trong hàm 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ị 0Tham chiếu các tệp tĩnh trong các mẫuDự á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), Django cho phép bạn chỉ định vị trí trong các mẫu của mình liên quan đến cài đặt chung của 14. Trang web bộ khung mặc định đặt giá trị của 14 thành ' 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 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 18 và chỉ định URL tương đối cho tệp được yêu cầu 1Bạn có thể thêm một hình ảnh vào trang theo cách tương tự, chẳng hạn 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 URLMẫu cơ sở ở trên đã giới thiệu thẻ mẫu 27 3Thẻ này chấp nhận tên của hàm 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à chế độ 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ẫuVị trí nơi Django tìm kiếm các mẫu được chỉ định trong đối tượng 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ày 4Cài đặt của 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 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ủ ( 24) và mở 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 26thử thách bản thânDướ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
Bản tóm tắtChú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 Chúng tôi có thể kết nối Django với HTML không?Trong trang Giới thiệu Django, chúng tôi đã biết rằng kết quả phải ở dạng HTML và kết quả phải được tạo trong mẫu , vì vậy, hãy . Tạo thư mục mẫu bên trong thư mục thành viên và tạo tệp HTML có tên myfirst. html.
Làm cách nào tôi có thể chuyển các tham số giá trị từ chế độ xem HTML sang Django?Bạn có thể tạo biểu mẫu HTML và có thể gửi biểu mẫu bằng phương thức đăng nếu bạn không muốn chuyển giá trị trong url. . Để mã này hoạt động, bạn sẽ phải bao gồm JQuery. . vâng, tôi nghĩ ajax sẽ là cách duy nhất ngoài việc chuyển trực tiếp nó tới url. . Có, trong trường hợp đó, cuộc gọi AJAX POST sẽ là lựa chọn tốt nhất của bạn Django có thể tạo đầu ra không phải HTML nào?Django có các công cụ tích hợp thuận tiện mà bạn có thể sử dụng để tạo một số nội dung không phải HTML phổ biến. Nguồn cấp dữ liệu RSS/Atom . Sơ đồ trang web (một định dạng XML do Google phát triển ban đầu nhằm cung cấp gợi ý cho các công cụ tìm kiếm) |