Российский Новый Университет
Опубликован: 25.01.2016 | Доступ: свободный | Студентов: 2234 / 161 | Длительность: 16:40:00
Лекция 4:

Создание аналога Twitter

Создание URL-адресов

Каждый пользователь в нашем проекте будет иметь профиль с уникальным URL-адресом в следующем формате: http://127.0.0.1:8000/user/<username>. Здесь имя переменной username – владелец твитов, которого мы хотим видеть. Этот URL-адрес отличается от первоначального URL-адреса, который мы добавили ранее, поскольку он содержит динамическую часть, поэтому мы должны использовать мощь регулярных выражений для того, чтобы описать этот URL. Откройте файл urls.py и измените его таким образом, чтобы таблица URL-адресов выглядит так:

from django.conf.urls import patterns, include, url 
from django.contrib import admin 
from tweet.views import Index,Profile 
admin.autodiscover() 

urlpatterns = patterns('', 
url(r'^$', Index.as_view()), 
url(r'^user/(\w+)/$', Profile.as_view()), 
url(r'^admin/', include(admin.site.urls)), 
) 

Шаблон выглядит более сложным, чем первый. Аннотация \w означает цифробуквенный символ или знак подчеркивания. Знак + после него, вызывает регулярные выражение для сопоставления одного или более повторений того, что предшествует знаку. Так в сущности, \w+ означает любую строку, которая состоит из буквенно-цифровых символов и, возможно, символа подчеркивания. Мы заключили эту часть регулярного выражения в скобки. Это заставляет Django захватить часть строки, которая совпадает с этой частью и отправляете его в представление.

Последняя вещь требует объяснения, прежде чем мы увидим представление в действии. Регулярное выражение, которое мы использовали будет выглядеть немного странно, если вы не использовали регулярные выражения раньше. Это Raw String, которая содержит два символа, ^ и $. Аннотации r ' ' в синтаксисе Python обозначает raw string. Если Python встречает такую строку, обратная косая черта и другие управляющие последовательности, сохраняются в строке, а не интерпретируются любым другим способом. В этом синтаксисе обратные косые черты остаются в строке без изменения, а управляющие последовательности не интерпретируются . Это очень полезно при работе с регулярными выражениями потому, что они часто содержат обратные косые черты.

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

Документация Python по модулю re полностью покрывает все регулярные выражения. Я рекомендую прочитать ее, если вы хотите тщательного разбираться в регулярных выражениях. Вы можете найти онлайн-документацию на http://docs.python.org/lib/module-re.html. Перед вами таблица, в которой обобщается синтаксис регулярных выражений для тех, кто хочет быстро освежить свои знания:

Символ/выражение Совпадающая строка
. (Точка) Любой символ
^ (Каретка) Начало строки
$ Конец строки
* 0 или более повторений
+ 1 или более повторений
? 0 или 1 повторение
| A | B означает A или B
[a-z] Любая буква в нижнем регистре
\w Любой цифробуквенный символ или _ _
\d Любая цифра

Сейчас мы создадим класс Profile() с функцией GET в файле views.py нашего приложения для твитов. Важное, что мы узнаем, это как функция get () function прикрепляет динамический параметр проходящий через URL-адрес , который связан с переменной username.

Файл views.py нашего приложения для твитов будет выглядеть так:

class Profile(View):
"""User Profile page reachable from /user/<username> URL""" 
def get(self, request, username):
params = dict()
user = User.objects.get (username=usemame) 
tweets = Tweet.objects.filter(user=user) 
params["tweets"] = tweets 
params["user"] = user
return render(request, 'profile.html', params)

Шаблоны – создание шаблона для главной страницы

Мы почти завершили создание главной страницы для нашего сайта. Теперь мы двинемся дальше и создадим страницу представления.

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

Как мы могли отметить, мы использовали файл profile.html в классе Profile() нашего файла views.py, принадлежащий нашему приложению твитов.

Файл views.py нашего приложения для твитов будет выглядеть так:

class Profile(View):
"""User Profile page reachable from /user/<username> URL""" 
def get(self, request, username):
params = dict()
user = User.objects.get (username=usemame) 
tweets = Tweet.objects.filter(user=user) 
params["tweets"] = tweets 
params["user"] = user
return render(request, 'profile.html', params)

Мы используем фреймворк Bootstrap, который мы уже импортировали в наш файл base.html, теперь мы создадим файл profile.html.

Мы перестроим структуру файла base.html, который мы создали для нашего приложения. Сейчас файл base.html будет использован в качестве шаблона или темы для нашего проекта. Мы импортируем этот файл в наш проект, который покажет непостоянный интерфейс пользователя через весь проект.

Мы удалим тег div, который мы поместили внутри содержимого блока в нашем файле base.html.

Нам также, понадобится jQuery, который является библиотекой для полного функционирования bootstrap. Его можно скачать с http://jquery.com/download/. Для нашего текущего проекта, мы скачаем последнюю версию jQuery в стадии рабочей готовности. Мы добавим это перед импортом JavaScript’а bootstrap.

Файл base.html должен выглядеть так:

{% load staticfiles %}
<html>
<head>
link href="{% static 'bootstrap/css/bootstrap.min.css' %}" rel="stylesheet" media="screen">
</head>
<body>
{% block content %}
{% endblock %}
<script src="{% static 'js/jquery-2.1.1.min.js' %}"></script>
<script src="{% static 'bootstrap/js/bootstrap.min.js'
%}"></script>
</body>
</html>

В данном случае, блок будет выглядеть так:

{% block content %}
{% endblock %}

Это означает, что какой бы шаблон мы не использовали для расширения нашего файла base.html в текущем файле profile. html,содержимое файла profile. html отобразится между этим фрагментом блока. Чтобы понять это лучше, усвойте одно: у вас есть заголовок (в некоторых случаях панель навигации) и подвал на каждой странице и содержимое страницы изменяется в зависимости от представления. С предыдущим шаблоном нам, в общем, нужно разместить код заголовка перед содержимым блока, а содержимое подвала после содержимого блока.

Использовать заголовок намного проще сейчас, когда у нас есть преимущество в виде фронтэнд фреймворка. Сперва мы выберем подложку для нашего проекта. Чтобы было проще объяснить, мы разделим страницу на три части. Первая – это заголовок, которая остается постоянным при навигации по проекту. То же применительно к нижней части проекта, где находится подвал.


Для достижения предыдущей структуры, наш код bootstrap будет построен таким образом: мы будем использовать navbar bootstrap’а для нашего раздела заголовка, а так же как и для раздела подвала, Затем мы поместим контейнер тега div. Обновим наш файл base.html в соответствии с нижеследующим:

{% load staticfiles %}
<html>
<head>
<link href="{% static 'css/bootstrap.min.css' %}"
rel="stylesheet" media="screen">
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<a class="navbar-brand" href="#">Мои твиты</a>
<p class="navbar-text navbar-right">Страница профиля пользователя</p>
</nav>
<div class="container">
{% block content %}

{% endblock %}
</div>
<nav class="navbar navbar-default navbar-fixed-bottom" role="navigation">
<p class="navbar-text navbar-right">Подвал </p>
</nav>
<div class="container">
</nav>
<script src="{% static 'js/bootstrap.min.js' %}"></script>
</body>
</html>

Параметр navbar начинается с тела, но перед контейнером, так что возможно обернуть весь контейнер. Мы используем блок содержимого Django для отображения строк, которые мы определим в расширенных шаблонах, в данном случае, в файле profile.html. Подвал идет последним, сразупосле оператора endblock.

Отобразится следующая страница:


Заметьте, что если вы не у вас не включились статические файлы, замените переменную STATICFILES_DIRS следующими настройками файла settings.py:

STATICFILES_DIRS = (
BASE_DIR + '/ static /’,
)

Дизайн для профиля страницы выглядит следующим образом:


Его легко изменить нова с помощью компонента boostrap, называемого well. Компоненты well или wellbox используются с элементом чтобы дать ему эффект врезки. Файл profile.html просто расширяет файл base.html и содержит строки и другие элементы.

Файл profile.html для нашего проекта будет выглядеть так:

{% extends "base.html" %}
{% block content %}
<div class="row clearfix">
	<div class="col-md-12 column">
	{% for tweet in tweets %}
		<div class="well">
		<span>{{ tweet.text }}</span>
		</div>
	{% endfor %}
	</div>
</div>
{% endblock %}

Это покажет наши твиты через параметр в URL-адресе пользователя. Пример, который мы взяли это пользователь test, который мы создали в ходе первоначальной установки. Вы можете увидеть его твиты на следующем скриншоте:


Константин Боталов
Константин Боталов

Вроде легкие вопросы и ответы знаю правильные, но система считает иначе и правильные ответысчитает неправильными. Приходится выполнть по несколько раз. Это я не правильно делаю или тест так составлен?

Владимир Филипенко
Владимир Филипенко

Листинг показывает в 4-ой лекции, что установлен Django 1.8.4. Тут же далее в этой лекции указаны настройки, которые воспринимает Django 1.7 и младше.