БФИ2203 Мячина ввит4
.docxМИНИСТЕРСТВО ЦИФРОВОГО РАЗВИТИЯ, СВЯЗИ И МАССОВЫХ КОММУНИКАЦИЙ РОССИЙСКОЙ ФЕДЕРАЦИИ
Ордена Трудового Красного Знамени федеральное государственное бюджетное образовательное учреждение высшего образования
Московский технический университет связи и информатики
(МТУСИ)
Лабораторная работа №4
«Создание страницы определенной записи»
Выполнила:
студентка группы БФИ2203
Мячина Лада Андреевна
Проверил:
Фурлетов Юрий Михайлович
Москва 2023
Цель работы: научиться создавать страницы с определенными записями. Научиться создавать статьи
Задание: теперь у определенной записи есть отдельная страница, а значит на странице списка постов каждый заголовок можно сделать ссылкой. Сделайте так, чтобы при клике по названию статьи происходил переход на страницу указанной записи. Для этого достаточно воспользоваться тегом <a>, которому в атрибуте href указать адрес перехода. Создайте стили, соответствующие макету для страницы определенной записи. Не забудьте добавить ссылку «Все записи». Загрузите ваш проект на любой гит-репозиторий (GitHub, GitLab, Google Code, Bitbucket и т.п.).
Ход работы:
Для начала выполнения лабораторной работы, в директории lab4 создать новый проект blog, провести первоначальную настройку и перенести приложение articles из предыдущей работы, добавить нужные данные в INSTALLED_APP и настроить файл urls.py).
Для того, чтобы можно было бы прочитать значение идентификатора (id) отдельного поста указать в качестве адреса следующее регулярное выражение (в файле urls.py):
from django.urls import path, re_path
urlpatterns = [
re_path(r'^article/(?P<article_id>\d+)$', views.get_article, name='get_article'),]
Создать в файле views.py из директории articles помимо уже написанной в предыдущей работе функции archive ещё и функцию get_article:
from django.http import Http404
def get_article(request, article_id):
try:
post = Article.objects.get(id=article_id)
return render(request, 'article.html', {"post": post})
except Article.DoesNotExist:
raise Http404
Рисунок 1 – Ошибка 404
В файл archive.html добавить код, чтобы названия статей стали ссылками:
<h2 class="post-title">{{ post.title }}
<a href="http://127.0.0.1:8000/article/{{post.id}}">{{post.title}}</a>
</h2>
Рисунок 2 – Архив статей
В папке articles/templates/ создать файл article.html.
Листинг файла:
<!DOCTYPE html>
<html>
<head>
{% load static %}
<link rel="stylesheet" href="{{ STATIC_URL }}/static/articles.css">
<title>{{post.title}}</title>
</head>
<body>
<div class="archive">
<div class="header">
<p>
{% load static %}
<img src="http://klubmama.ru/uploads/posts/2022-08/1661638464_20-klubmama-ru-p-maiskii-zhuk-podelka-foto-23.jpg" width="350" height="270"/>
<a class="link" href="http://127.0.0.1:8000">Все статьи</a>
</p>
</div>
<div class="one-post">
<h2 class="post-title">{{post.title}}</h2>
<div class="article-info">
<div class="article-author">{{ post.author.username }}</div>
<div class="article-created-date">{{ post.created_date }}</div>
</div>
<p class="article-text">{{ post.get_excerpt }}</p>
</div>
</div>
</body>
</html>
Создать css-файл в директории articles/static/ файл article.css. Теперь подключите этот файл к своим html-шаблонам.
Листинг css-файла:
body {
background: #1abc9c;
font-family: Tahoma, Arial, sans-serif;
color: #ffffff;
}
.header img {
display: block;
width: 318px;
margin-left: auto;
margin-right: auto;
}
.archive {
width: 960px;
margin-left: auto;
margin-right: auto;
}
.post-title a {
color: #ffffff;
}
.article-author {
width: 50%;
float: left;
}
.article-created-date {
text-align: right;
}
Рисунок 3 – Результат выполнения лабораторной работы
Рисунок 4 – Результат выполнения лабораторной работы
Ссылка на Github: https://github.com/LadaMyachina/labVvIT4