Как создавать мобильные веб-приложения с использованием Django Framework. Часть 3.

“Эта статья отредактирована и дополнена последней версией Django – май 2016 г.”

В Части 1 этой серии вы узнали, как установить и настроить Django в виртуальной среде, и создали скелет своего первого проекта.

Затем в Части 2 мы создали приложение и модель для объектов Post, которые позже перенесли в базу данных. Наконец, мы показали вам, как интегрировать ваше недавно созданное приложение в пользовательский интерфейс администрирования Django.

Эти статьи входят в серию Django:

Установка и настройка Django Web Framework с виртуальными средами. Часть 1.

Обзор основ Python и создание вашего первого веб-приложения с помощью Django – часть 2

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

Создание объектов через интерфейс администратора Django

Для создания объектов типа Post (помните, что это модель, которую мы определили в Части 2 этой серии), мы будем использовать интерфейс администратора Django.

Убедитесь, что встроенный веб-сервер Django работает на порту 8000 (или другом по вашему выбору), выполнив следующую команду из внешнего каталога myfirstdjangoproject:


cd ~/myfirstdjangoenv/myfirstdjangoproject
python manage.py runserver 0.0.0.0:8000

Теперь откройте веб-браузер и укажите http://ip-address:8000/admin, затем войдите в систему, используя учетные данные, которые вы указали в предыдущей статье, и начните писать сообщение (что, опять же, создаст объект типа Post и вставит связанные данные в базовую базу данных):

Повторите процедуру 2 или 3 раза:

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

Наш первоначальный взгляд

Наше первое представление (~/myfirstdjangoenv/myfirstdjangoproject/myblog/views.py) будет отвечать за фильтрацию всех объектов Post и возврат тех, для которых установлено значение whenPublished. меньше или равен текущей дате и времени (whenPublished__lte=timezone.now()), упорядоченному по убыванию whenPublished, что то же самое, что сказать « сначала последнее».

Эти объекты сохраняются в переменной с удобным названием «posts» и возвращаются (идентифицируются как allposts) для встраивания в HTML, как мы увидим в следующем разделе:


from django.shortcuts import render
from .models import Post
from django.utils import timezone
def posts(request):
        posts = Post.objects.filter(whenPublished__lte=timezone.now()).order_by('-whenPublished')
        return render(request, 'myblog/posts.html', {'allposts': posts})

Наконец, двойное подчеркивание в whenPublished__lte выше используется для отделения поля базы данных (whenPublished) от фильтра или операции (lte=less чем или равно).

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

Создайте шаблон для нашего первого проекта

Следуя директивам и путям, указанным в предыдущем разделе, мы сохраним наш исходный шаблон внутри myblog/templates/myblog. Это означает, что вам нужно будет создать каталог с именем templates и подкаталог с именем myblog:


cd ~/myfirstdjangoenv/myfirstdjangoproject/myblog
mkdir -p templates/myblog

Мы назовем шаблон posts.html и вставим в него следующий код. Вы заметите, что мы добавляем онлайн-ссылки на шрифты jQuery, Bootstrap, FontAwesome и Google.

Кроме того, мы заключили код Python в фигурные скобки внутри HTML. Обратите внимание, что для каждого объекта типа Сообщение мы показываем его название, дату публикации и автора и, наконец, текст. Наконец, красным цветом вы увидите, что мы делаем ссылку на объекты, возвращаемые через myblog/views.py:

Хорошо, вот файл posts.html:


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link href='https://fonts.googleapis.com/css?family=Indie+Flower' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" type='text/css'">
<script src="https://code.jquery.com/jquery-2.1.4.min.js">
</script>
    <style>
      .title {
        font-family: 'Indie Flower', serif;
        font-size: 30px;
        color: #1E90FF;
      }
      h1 {
        font-family: 'Pacifico', serif;
        font-size: 45px;
        color: #1E90FF;
      }
    </style>
</head>
<body>
<div class="container"><h1>My blog</h1><br>
{% for post in allposts %}
    <div>
        <div class="title">{{ post.title }}</div>
        <strong>Published on {{ post.whenPublished }} by {{ post.author }}.</strong>
        <p>{{ post.text|linebreaks }}</p>
    </div>
{% endfor %}
</div>
</body>
</html>

В приведенном выше шаблоне фильтр разрывов строк используется для замены разрывов строк в обычном тексте соответствующим HTML-эквивалентом ( или

), чтобы правильно отформатировать каждое сообщение с разделением на абзацы.

Далее нам нужно настроить сопоставление между URL-адресами в нашем приложении и соответствующими представлениями, возвращающими данные. Для этого создайте файл с именем urls.py внутри myblog со следующим содержимым:


from django.conf.urls import url
from . import views
urlpatterns = [
    url(r'^$', views.posts, name='posts'),
]

r'^$' заслуживает немного большего объяснения. Ведущий r указывает Django обрабатывать строку в одинарных кавычках как регулярное выражение.

В частности, r'^$' представляет собой пустую строку, поэтому, когда мы указываем в браузере http://ip-address:8000 (и ничего больше), данные, возвращаемые переменной posts внутри views.py (см. предыдущий раздел), будут представлены на нашей домашней странице:

И последнее, но не менее важное: мы добавим файл urls.py нашего приложения блога (~/myfirstdjangoenv/myfirstdjangoproject/myblog/urls.py) в urls.py нашего основного проекта (~/myfirstdjangoenv/myfirstdjangoproject/myfirstdjangoproject/urls.py):


from django.conf.urls import include, url
from django.contrib import admin

urlpatterns = [
    url(r'^admin/', include(admin.site.urls)),
    url(r'', include('myblog.urls')),
]

Затем запустим веб-сервер:


cd ~/myfirstdjangoenv/myfirstdjangoproject
python manage.py runserver 0.0.0.0:8000

Теперь мы сможем увидеть списки сообщений, которые мы создали ранее:

Благодаря Bootstrap вы по-прежнему можете получить отличную визуализацию на небольшом устройстве:

Подведение итогов

Давайте теперь рассмотрим концепции, которые мы рассмотрели в этой статье и на протяжении всей этой серии:

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

Допустим, мы хотим изменить нашу модель, добавив поле с именем summary в объект Post, где мы будем хранить необязательное краткое описание каждого сообщения. Давайте добавим следующую строку в myblog/models.py:

summary = models.CharField(max_length=350, blank=True, null=True)

Как мы узнали из предыдущей статьи, нам необходимо перенести изменения в базу данных:


python manage.py makemigrations myblog
python manage.py migrate myblog

Затем используйте интерфейс администратора, чтобы редактировать сообщения и добавлять краткое описание к каждому сообщению. Наконец, замените следующую строку в шаблоне (posts.html):

<p>{{ post.text|linebreaks }}</p>

<p>{{ post.summary }}</p>

Обновите домашнюю страницу, чтобы увидеть изменения:

2. Функция view принимает HTTP-запрос и возвращает HTTP-ответ. В этой статье def Posts(request) в views.py вызывает базовую базу данных для получения всех сообщений. Если мы хотим получить все сообщения со словом ansible в заголовке, нам следует заменить его.

posts = Post.objects.filter(whenPublished__lte=timezone.now()).order_by('-whenPublished')

posts = Post.objects.filter(title__icontains="ansible").order_by('-whenPublished')

Отделяя пользовательский интерфейс от логики приложения в веб-приложениях, Django облегчает задачи поддержки и расширения приложений.

3. Если вы следовали инструкциям из этой серии, структура вашего проекта должна быть следующей:


myfirstdjangoenv/myfirstdjangoproject
├── db.sqlite3
├── manage.py
├── myblog
│   ├── admin.py
│   ├── admin.pyc
│   ├── __init__.py
│   ├── __init__.pyc
│   ├── migrations
│   │   ├── 0001_initial.py
│   │   ├── 0001_initial.pyc
│   │   ├── __init__.py
│   │   └── __init__.pyc
│   ├── models.py
│   ├── models.pyc
│   ├── templates
│   │   └── myblog
│   │       └── posts.html
│   ├── tests.py
│   ├── urls.py
│   ├── urls.pyc
│   ├── views.py
│   └── views.pyc
└── myfirstdjangoproject
    ├── __init__.py
    ├── __init__.pyc
    ├── settings.py
    ├── settings.pyc
    ├── urls.py
    ├── urls.pyc
    ├── wsgi.py
    └── wsgi.pyc

Если приведенный выше список не отображается корректно в вашем браузере, вот снимок экрана вывода следующей команды:


tree myfirstdjangoenv/myfirstdjangoproject

Краткое содержание

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

Я надеюсь, что пример, который мы использовали в этой серии, чтобы познакомить вас с этим выдающимся веб-фреймворком, побудит вас узнать больше. Если да, то лучше всего начать с официальной документации Django (которая постоянно обновляется).

Я могу заверить вас, что Django — это гораздо больше, чем мы можем адекватно осветить в серии статей, поэтому не стесняйтесь исследовать его и учиться на практике!

Не стесняйтесь, напишите нам с вопросами или предложениями, используя форму ниже.