Index html пример: #2 – Файл «index.html». Отображение сайта

• Создайте хэш в Zapier с помощью этих простых шагов 2 апреля 2023 г.
• Рабочие области Диспетчера тегов Google, объяснение 25 марта 2023 г.
• Нужен ли вам SSL на домене с переадресацией 301? 14 марта 2023 г.
• Самые лучшие легкие браузеры для Mac 14 марта 2023 г.
• 3 лучших редактора JSON для Mac 13 марта 2023 г.

• Предыдущий
• Обзор: Джанго
• Следующий

Теперь мы готовы добавить код, который отображает нашу первую полную страницу — домашнюю страницу веб-сайта LocalLibrary. На главной странице будет показано количество записей, которые у нас есть для каждого типа модели, а также ссылки на боковую панель для перехода на другие наши страницы. Попутно мы приобретем практический опыт написания базовых карт и представлений URL-адресов, получения записей из базы данных и использования шаблонов.

После того, как мы определили наши модели и создали некоторые начальные библиотечные записи для работы, пришло время написать код, который представляет эту информацию пользователям. Первое, что нам нужно сделать, это определить, какую информацию мы хотим отображать на наших страницах, и определить URL-адреса, которые будут использоваться для возврата этих ресурсов. Затем мы создадим преобразователь URL-адресов, представления и шаблоны для отображения страниц.

Следующая диаграмма описывает основной поток данных и компоненты, необходимые для обработки HTTP-запросов и ответов. Поскольку мы уже реализовали модель, мы создадим следующие основные компоненты:

• Преобразователи URL-адресов для пересылки поддерживаемых URL-адресов (и любой информации, закодированной в URL-адресах) в соответствующие функции просмотра.
• Функции просмотра для получения запрошенных данных от моделей, создания HTML-страниц, отображающих данные, и возврата страниц пользователю для просмотра в браузере.
• Шаблоны для использования при отображении данных в представлениях.

Как вы увидите в следующем разделе, у нас есть 5 страниц для отображения, что слишком много информации для документирования в одной статье. Поэтому в этой статье основное внимание будет уделено тому, как реализовать домашнюю страницу, а остальные страницы мы рассмотрим в следующей статье. Это должно дать вам хорошее полное представление о том, как на практике работают сопоставители URL, представления и модели.

Поскольку эта версия LocalLibrary по существу доступна только для чтения для конечных пользователей, нам просто нужно предоставить целевую страницу для сайта (домашнюю страницу) и страницы, которые отображать список и подробные представления для книг и авторов.

URL-адреса, которые нам понадобятся для наших страниц:

• каталог/ — домашняя (индексная) страница.
• каталог/книги/ — Список всех книг.
• каталог/авторы/ — Список всех авторов.
• catalog/book/ — Подробное представление для конкретной книги с первичным ключом поля (по умолчанию). Например, адрес третьей книги, добавленной в список, будет 9.0015 /каталог/книга/3 .
• catalog/author/ — Подробное представление для конкретного автора с полем первичного ключа . Например, URL для 11-го автора, добавленного в список, будет /catalog/author/11 .

Первые три URL вернут индексную страницу, список книг и список авторов. Эти URL-адреса не кодируют никакой дополнительной информации, и запросы, извлекающие данные из базы данных, всегда будут одинаковыми. Однако результаты, возвращаемые запросами, будут зависеть от содержимого базы данных.

Напротив, последние два URL будут отображать подробную информацию о конкретной книге или авторе. Эти URL-адреса кодируют идентификатор отображаемого элемента (представленный выше). Преобразователь URL-адресов извлечет закодированную информацию и передаст ее в представление, а представление будет динамически определять, какую информацию нужно получить из базы данных. Кодируя информацию в URL-адресе, мы будем использовать единый набор сопоставления URL-адресов, представления и шаблона для обработки всех книг (или авторов).

Примечание: С помощью Django вы можете создавать свои URL-адреса так, как вам нужно — вы можете кодировать информацию в теле URL-адреса, как показано выше, или включать параметры GET в URL-адрес, например, /book/?id=6 . Какой бы подход вы ни использовали, URL-адреса должны быть чистыми, логичными и удобочитаемыми в соответствии с рекомендациями W3C. Документация Django рекомендует кодировать информацию в теле URL-адреса для улучшения дизайна URL-адреса.

Как упоминалось в обзоре, оставшаяся часть этой статьи описывает, как создать индексную страницу.

Первая страница, которую мы создадим, — это индексная страница ( каталог/ ). Страница индекса будет включать в себя некоторый статический HTML, а также сгенерированное «количество» различных записей в базе данных. Чтобы это работало, мы создадим сопоставление URL-адресов, представление и шаблон.

Примечание: В этом разделе стоит уделить немного больше внимания. Большая часть информации применима и к другим страницам, которые мы создадим.

Сопоставление URL-адресов

Когда мы создали каркас веб-сайта, мы обновили locallibrary/urls.py , чтобы каждый раз при получении URL-адреса, начинающегося с catalog/, модуль URLConf catalog.urls обрабатывал оставшуюся подстроку.

Следующий фрагмент кода из locallibrary/urls.py включает модуль catalog. urls :

 urlpatterns += [
    путь('каталог/', включить('каталог.urls')),
]
 

Примечание: Всякий раз, когда Django встречает функцию импорта django.urls.include() , он разбивает строку URL-адреса на указанный конечный символ и отправляет оставшуюся подстроку включенному модулю URLconf для дальнейшей обработки.

Мы также создали файл-заполнитель для модуля URLConf с именем /catalog/urls.py . Добавьте в этот файл следующие строки:

 шаблоны URL = [
    путь('', views.index, имя='индекс'),
]
 

Функция path() определяет следующее:

• Шаблон URL, представляющий собой пустую строку: '' . Мы подробно обсудим шаблоны URL при работе с другими представлениями.
• Функция просмотра, которая будет вызываться при обнаружении шаблона URL: views.index , которая является функцией с именем index() в файле views. py .

Функция path() также задает параметр имени , который является уникальным идентификатором для этого конкретного сопоставления URL-адреса. Вы можете использовать это имя для «реверсирования» преобразователя, т. е. для динамического создания URL-адреса, указывающего на ресурс, для обработки которого предназначен преобразователь. Например, мы можем использовать параметр name для ссылки на нашу домашнюю страницу с любой другой страницы, добавив следующую ссылку в шаблон:

 Главная.
 

Примечание: Мы можем жестко закодировать ссылку как в Главная ), но если мы изменим шаблон для нашей домашней страницы, например, на / каталог/индекс ) шаблоны больше не будут корректно связываться. Использование обратного сопоставления URL более надежно.

Представление (на основе функции)

Представление — это функция, которая обрабатывает HTTP-запрос, извлекает необходимые данные из базы данных, отображает данные на HTML-странице с использованием HTML-шаблона, а затем возвращает сгенерированный HTML-код в HTTP-запросе. ответ для отображения страницы пользователю. Индексное представление следует этой модели — оно извлекает информацию о числе 9.0015 Book , BookInstance , available BookInstance и Author записи, которые у нас есть в базе данных, и передает эту информацию в шаблон для отображения.

Откройте catalog/views.py и обратите внимание, что файл уже импортирует функцию быстрого доступа render() для создания HTML-файла с использованием шаблона и данных:

 из django.shortcuts import render
# Создайте свои представления здесь.
 

Вставьте следующие строки внизу файла:

 из импорта .models Книга, Автор, Экземпляр книги, Жанр
Индекс защиты (запрос):
    """Функция просмотра главной страницы сайта."""
    # Сгенерировать количество некоторых основных объектов
    num_books = Book.objects.all().count()
    num_instances = BookInstance.objects.all().count()
    # Доступные книги (status = 'a')
    num_instances_available = BookInstance. objects.filter(status__exact='a').count()
    # 'all()' подразумевается по умолчанию.
    num_authors = Автор.объектов.счетчик()
    контекст = {
        'num_books': количество_книг,
        'количество_экземпляров': num_instances,
        'количество_экземпляров_доступно': num_instances_available,
        'количество_авторов': количество_авторов,
    }
    # Визуализировать HTML-шаблон index.html с данными в контекстной переменной
    вернуть рендеринг (запрос, 'index.html', контекст = контекст)
 

Первая строка импортирует классы моделей, которые мы будем использовать для доступа к данным во всех наших представлениях.

Первая часть функции представления извлекает количество записей, используя атрибут objects.all() классов модели. Он также получает список из объектов BookInstance , которые имеют значение «a» (доступно) в поле статуса. Вы можете найти больше информации о том, как получить доступ к данным модели, в нашем предыдущем руководстве Django Tutorial Part 3: Using models > Searching for records.

В конце функции просмотра мы вызываем функцию render() для создания HTML-страницы и возврата страницы в качестве ответа. Эта функция быстрого доступа объединяет ряд других функций, чтобы упростить очень распространенный вариант использования. Функция render() принимает следующие параметры:

• исходный запрос объект, который является HttpRequest .
• HTML-шаблон с заполнителями для данных.
• и контекст , которая представляет собой словарь Python, содержащий данные для вставки в заполнители.

Подробнее о шаблонах и переменной контекста мы поговорим в следующем разделе. Давайте приступим к созданию нашего шаблона, чтобы мы могли что-то показать пользователю!

Шаблон

Шаблон — это текстовый файл, определяющий структуру или макет файла (например, HTML-страницы). В нем используются заполнители для представления фактического содержимого.

Приложение Django, созданное с использованием startapp (подобно скелету этого примера) будет искать шаблоны в подкаталоге с именем « templates » ваших приложений. Например, в представлении индекса, которое мы только что добавили, функция render() ожидает найти файл index.html в /locallibrary/catalog/templates/ и вызовет ошибку, если файл нет.

Вы можете проверить это, сохранив предыдущие изменения и зайдя на 127.0.0.1:8000 в вашем браузере — он отобразит довольно интуитивное сообщение об ошибке: « TemplateDoesNotExist at /catalog/» и другие подробности.

Примечание: Основываясь на файле настроек вашего проекта, Django будет искать шаблоны в нескольких местах, по умолчанию выполняя поиск в ваших установленных приложениях. Вы можете узнать больше о том, как Django находит шаблоны и какие форматы шаблонов он поддерживает, в разделе «Шаблоны» документации Django.

Расширение шаблонов

Для шаблона указателя потребуется стандартная HTML-разметка для заголовка и основной части, а также разделы навигации для ссылок на другие страницы сайта (которые мы еще не создали) и разделы, отображающие вводный текст и данные книги.

Большая часть HTML и структура навигации будут одинаковыми на каждой странице нашего сайта. Вместо того, чтобы дублировать шаблонный код на каждой странице, вы можете использовать язык шаблонов Django для объявления базового шаблона, а затем расширить его, заменив только те биты, которые отличаются для каждой конкретной страницы.

Следующий фрагмент кода представляет собой пример базового шаблона из файла base_generic.html . Вскоре мы создадим шаблон для LocalLibrary. Пример ниже включает в себя общий HTML-код с разделами для заголовка, боковой панели и основного содержимого, отмеченных именованными тегами шаблона block и endblock . Вы можете оставить блоки пустыми или включить содержимое по умолчанию для использования при отображении страниц, полученных из шаблона.

Примечание: Шаблон 9Теги 0129 — это функции, которые можно использовать в шаблоне для циклического просмотра списков, выполнения условных операций на основе значения переменной и т. д. В дополнение к тегам шаблона синтаксис шаблона позволяет ссылаться на переменные, которые передаются в шаблон из представления, и использовать фильтры шаблона для форматирования переменных (например, для преобразования строки в нижний регистр).

 

  <голова>
    {% заголовок блока %}
      
    {% конечный блок%}
  
  <тело>
    {% заблокировать боковую панель %}
      
    {% конечный блок%}
    {% заблокировать содержимое %}
      
    {% конечный блок%}
  

 

При определении шаблона для конкретного представления мы сначала указываем базовый шаблон с помощью тега шаблона extends — см. пример кода ниже. Затем мы объявляем, какие разделы из шаблона мы хотим заменить (если есть), используя разделы block / endblock , как в базовом шаблоне.

Например, приведенный ниже фрагмент кода показывает, как использовать тег шаблона extends и переопределить блок содержимого . Сгенерированный HTML будет включать код и структуру, определенные в базовом шаблоне, включая содержимое по умолчанию, которое вы определили в блок заголовка , но новый блок контента вместо блока по умолчанию.

 {% расширяет "base_generic.html" %}
{% заблокировать содержимое %}
   
Главная страница местной библиотеки
 
  <р>
    Добро пожаловать на LocalLibrary, веб-сайт, разработанный
    Сеть разработчиков Mozilla!
  

{% конечный блок%}
 

Базовый шаблон LocalLibrary

Мы будем использовать следующий фрагмент кода в качестве базового шаблона для веб-сайта LocalLibrary . Как видите, он содержит HTML-код и определяет блоки для заголовок , боковая панель и контент . У нас есть заголовок по умолчанию и боковая панель по умолчанию со ссылками на списки всех книг и авторов, которые заключены в блоки, чтобы их можно было легко изменить в будущем.

Примечание: Мы также вводим два дополнительных тега шаблона: url и load static . Эти теги будут описаны в следующих разделах.

Создайте новый файл base_generic.html в /locallibrary/catalog/templates/ и вставьте в файл следующий код:

 

  <голова>
    {% заголовок блока %}
      
    {% конечный блок%}
    <метакодировка="utf-8" />
    
    <ссылка
      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min. css"
      отн = "таблица стилей"
      целостность = "sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      кроссоригин = "анонимно" />
    
    {% статическая загрузка %}
    
  
  <тело>
    <дел>
      <дел>
        <дел>
          {% заблокировать боковую панель %}
            <ул>
              
Главная
              
Все книги
              
Все авторы
            
          {% конечный блок%}