Jak vytvářet mobilní webové aplikace pomocí rozhraní Django – část 3

„Tento článek je revidován a aktualizován nejnovější verzí Django – květen 2016“

V Části 1 této série jste se naučili, jak nainstalovat a nakonfigurovat Django ve virtuálním prostředí, a vytvořili jste kostru svého prvního projektu.

Poté jsme v Části 2 vytvořili aplikaci a model pro objekty Post, které jsme později migrovali do databáze. Nakonec jsme vám ukázali, jak integrovat vaši nově vytvořenou aplikaci do uživatelského rozhraní administrace Django.

Tyto články jsou součástí série Django:

Instalace a konfigurace webového rozhraní Django s virtuálními prostředími – část 1

Zopakování základů Pythonu a vytvoření vaší první webové aplikace pomocí Django – část 2

V této závěrečné příručce se budeme zabývat tím, jak přistupovat k aplikaci pomocí uživatelského rozhraní a jak ji učinit mobilní pro všechny druhy zařízení. To znamená, začněme.

Vytváření objektů prostřednictvím administračního rozhraní Django

K vytvoření objektů typu Post (nezapomeňte, že jde o model, který jsme definovali v 2. části této série), použijeme administrátorské rozhraní Django.

Ujistěte se, že vestavěný webový server Django běží na portu 8000 (nebo jiném z vašeho výběru) spuštěním následujícího příkazu z vnějšího adresáře myfirstdjangoproject:


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

Nyní otevřete webový prohlížeč a přejděte na http://ip-address:8000/admin, poté se přihlaste pomocí přihlašovacích údajů, které jste nastavili v předchozím článku a začněte psát příspěvek (což je opět vytvoří objekt typu Post a vloží související data do podkladové databáze):

Opakujte proces 2 nebo 3 krát:

Poté, co jsme vytvořili několik příspěvků, podívejme se, co musíme udělat, abychom je mohli zobrazit pomocí našeho webového prohlížeče.

Náš prvotní pohled

Naše první zobrazení (~/myfirstdjangoenv/myfirstdjangoproject/myblog/views.py) bude mít na starosti filtrování všech objektů Post a vracet ty, u kterých je hodnota whenPublished je menší nebo roven aktuálnímu datu a času (whenPublished__lte=timezone.now()) seřazeno sestupně whenPublished, což je stejné jako říkat „ poslední první“.

Tyto objekty jsou uloženy do proměnné vhodně pojmenované posts a jsou vráceny (označené jako allposts), aby byly vloženy do HTML, jak uvidíme v další části:


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})

Konečně, dvojité podtržení v whenPublished__lte výše se používá k oddělení databázového pole (whenPublished) od filtru nebo operace (lte=méně než nebo rovné).

Jakmile definujeme svůj počáteční pohled, pojďme pracovat na související šabloně.

Vytvořte šablonu pro náš první projekt

Podle pokynů a cest uvedených v předchozí části uložíme naši počáteční šablonu do myblog/templates/myblog. To znamená, že budete muset vytvořit adresář s názvem templates a podadresář s názvem myblog:


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

Šablonu zavoláme posts.html a vložíme do ní následující kód. Všimnete si, že přidáváme online odkazy na písma jQuery, Bootstrap, FontAwesome a Google.

Kromě toho jsme kód Pythonu uzavřeli do složených závorek uvnitř HTML. Upozorňujeme, že u každého objektu typu Příspěvek zobrazíme jeho název, datum vydání a autora a nakonec jeho text. Nakonec červeně uvidíte, že odkazujeme na objekty vrácené prostřednictvím myblog/views.py:

Dobře, zde je soubor 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>

Ve výše uvedené šabloně se filtr zalomení řádků používá k nahrazení zalomení řádků v prostém textu odpovídajícím ekvivalentem HTML ( nebo

), aby byl každý příspěvek správně naformátován s oddělením odstavců.

Dále musíme nastavit mapování mezi URL v naší aplikaci a odpovídajícími pohledy, které vracejí data. Chcete-li tak učinit, vytvořte soubor s názvem urls.py v rámci myblog s následujícím obsahem:


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

r'^$' si zaslouží trochu více vysvětlení. Úvodní r dává Djangovi pokyn, aby s řetězcem uvnitř jednoduchých uvozovek zacházel jako s regulárním výrazem.

Konkrétně r'^$' představuje prázdný řetězec, takže když nasměrujeme prohlížeč na http://ip-address:8000 (a nic jiného), data vrácená proměnnou posts uvnitř views.py (viz předchozí část) budou prezentována na naší domovské stránce:

V neposlední řadě zahrneme soubor urls.py naší blogové aplikace (~/myfirstdjangoenv/myfirstdjangoproject/myblog/urls.py) do urls.py našeho hlavního projektu (~/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')),
]

Poté spustíme webový server:


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

Nyní bychom měli být schopni vidět seznamy příspěvků, které jsme vytvořili dříve:

Díky Bootstrapu můžete mít stále vynikající vizualizaci na menším zařízení:

Shrnutí

Podívejme se nyní na koncepty, které jsme probrali v tomto článku a v celé této sérii:

1. Každý model definuje objekt a mapuje se na databázovou tabulku, jejíž pole zase mapují vlastnosti daného objektu. Na druhou stranu šablona definuje uživatelské rozhraní, kde se zobrazí data vrácená pohledem.

Řekněme, že chceme upravit náš model přidáním pole s názvem summary do objektu Post, kde budeme ukládat volitelný stručný popis každého příspěvku. Do myblog/models.py přidáme následující řádek:

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

Jak jsme se dozvěděli v předchozím článku, musíme provést migraci změn do databáze:


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

Poté použijte administrátorské rozhraní k úpravě příspěvků a ke každému příspěvku přidejte stručné shrnutí. Nakonec nahraďte následující řádek v šabloně (posts.html):

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

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

Obnovte domovskou stránku, abyste viděli změny:

2. Funkce view přijímá požadavek HTTP a vrací odpověď HTTP. V tomto článku def posts(request) v views.py zavolá do základní databáze, aby načetla všechny příspěvky. Pokud chceme načíst všechny příspěvky se slovem ansible v názvu, měli bychom nahradit.

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

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

Oddělením uživatelského rozhraní od aplikační logiky webových aplikací Django usnadňuje úkoly údržby a eskalace aplikací.

3. Pokud jste postupovali podle pokynů uvedených v této sérii, struktura vašeho projektu by měla být následující:


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

V případě, že se výše uvedený seznam ve vašem prohlížeči nezobrazuje správně, zde je snímek obrazovky s výstupem následujícího příkazu:


tree myfirstdjangoenv/myfirstdjangoproject

souhrn

Ačkoli se všechny tyto koncepty mohou na první pohled zdát trochu zastrašující, mohu vás ujistit, že Django stojí za veškeré úsilí potřebné k tomu, aby se s ním seznámil.

Doufám, že příklad, který jsme použili v této sérii, abychom vám představili tento výjimečný webový rámec, vás motivuje k tomu, abyste se dozvěděli více. Pokud ano, oficiální dokumentace Django (která je neustále aktualizována) je tím nejlepším místem, kde začít.

Mohu vás ujistit, že v Djangu je toho mnohem více, než jsme schopni dostatečně pokrýt v sérii článků, takže neváhejte a prozkoumejte to a učte se praxí!

Neváhejte nám napsat poznámku s dotazy nebo návrhy pomocí formuláře níže.