Kā izveidot mobilajām ierīcēm piemērotas tīmekļa lietojumprogrammas, izmantojot Django Framework - 3. daļa


Šīs sērijas 1. daļā jūs uzzinājāt, kā instalēt un konfigurēt Django virtuālajā vidē, un jūs izveidojāt sava pirmā projekta skeletu.

Tad 2. daļā mēs izveidojām lietojumprogrammu un Post objektu modeli, ko vēlāk migrējām uz datu bāzi. Visbeidzot, mēs parādījām, kā integrēt savu jaunizveidoto lietojumprogrammu Django administrācijas lietotāja saskarnē.

Šie raksti ir daļa no Django sērijas:

Šajā pēdējā rokasgrāmatā mēs apspriedīsim, kā piekļūt lietojumprogrammai, izmantojot lietotāja saskarni, un kā padarīt to piemērotu mobilajām ierīcēm visu veidu ierīcēm. Tas nozīmē, ka sāksim.

Objektu izveidošana, izmantojot Django administratora saskarni

Lai izveidotu Post tipa objektus (atcerieties, ka tas ir modelis, ko mēs definējām šīs sērijas 2. daļā), mēs izmantosim Django administratora saskarni.

Pārliecinieties, vai Django iebūvētais tīmekļa serveris darbojas 8000. portā (vai citā izvēlētajā), izpildot šādu komandu no ārējā myfirstdjangoproject direktorija:

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

Tagad atveriet tīmekļa pārlūkprogrammu un norādiet uz http:// ip-address: 8000/admin , pēc tam piesakieties, izmantojot iepriekšējā rakstā iestatītos akreditācijas datus un sāciet rakstīt ziņu (kas atkal izveidos objektu tipa Post un ievietos saistītos datus pamatā esošajā datu bāzē):

Atkārtojiet procesu 2 vai 3 reizes:

Pēc pāris ziņu izveidošanas apskatīsim, kas mums jādara, lai tos parādītu, izmantojot mūsu tīmekļa pārlūkprogrammu.

Mūsu sākotnējais skats

Mūsu pirmais skats (~/myfirstdjangoenv/myfirstdjangoproject/myblog/views.py) būs atbildīgs par visu Pasta objektu filtrēšanu un tādu objektu atdošanu, kur, kad “WhenPublished” vērtība ir mazāka vai vienāda ar pašreizējo datumu un laiku (whenPublished__lte = timezone.now()) sakārtots dilstošā secībā, kad tas tiek publicēts, tas ir tas pats, kas teikt “vispirms vispirms”.

Šie objekti tiek saglabāti mainīgajā, ar ērtu nosaukumu posts, un tiek atgriezti (identificēti kā visi posteņi), lai tos iegultu HTML, kā redzēsim nākamajā sadaļā:

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

Visbeidzot, iepriekšējais whenPublished__lte dubultais pasvītrojums tiek izmantots, lai atdalītu datu bāzes lauku (whenPublished) no filtra vai operācijas (lte = mazāks vai vienāds).

Kad būsim definējuši sākotnējo skatu, strādāsim pie saistītās veidnes.

Izveidojiet veidni mūsu pirmajam projektam

Ievērojot iepriekšējā sadaļā norādītās direktīvas un ceļus, mēs saglabāsim sākotnējo veidni myblog/templates/myblog. Tas nozīmē, ka jums būs jāizveido direktorija ar nosaukumu veidnes un apakškatalogs ar nosaukumu myblog:

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

Mēs sauksim veidni posts.html un ievietosim tajā šādu kodu. Jūs ievērosiet, ka mēs pievienojam tiešsaistes atsauces uz jQuery, Bootstrap, FontAwesome un Google fontiem.

Turklāt mēs esam ievietojuši Python kodu cirtainās iekavās HTML iekšpusē. Lūdzu, ņemiet vērā, ka katram Post veida objektam mēs parādīsim tā nosaukumu, publicēšanas datumu un autoru, visbeidzot - tekstu. Visbeidzot, sarkanā krāsā jūs redzēsiet, ka mēs atsaucamies uz objektiem, kas atgriezti, izmantojot myblog/views.py:

Labi, šeit ir fails 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>

Iepriekš minētajā veidnē rindiņu pārtraukumu filtrs tiek izmantots, lai aizstātu teksta rindu pārtraukumus ar atbilstošu HTML ekvivalentu (
vai

), lai katrs formatētu pareizi izlikt ar punktu atdalīšanu.

Pēc tam mums ir jāiestata kartēšana starp vietrāžiem URL mūsu lietojumprogrammā un attiecīgajiem skatiem, kas atgriež datus. Lai to izdarītu, myblog iekšpusē izveidojiet failu ar nosaukumu urls.py ar šādu saturu:

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

r ^$ ir pelnījis nedaudz vairāk paskaidrojumu. Vadošais r uzdod Django traktēt virkni atsevišķās pēdiņās kā regulāru izteiksmi.

Konkrēti, r ^$ apzīmē tukšu virkni, lai, norādot pārlūkprogrammai http:// ip-address: 8000 (un neko citu), atgrieztie dati ar mainīgo amatu views.py iekšpusē (skatīt iepriekšējo sadaļu) tiks parādīti mūsu mājas lapā:

Visbeidzot, bet ne mazāk svarīgi, mēs iekļausim mūsu emuāra lietojumprogrammas urls.py failu (~/myfirstdjangoenv/myfirstdjangoproject/myblog/urls.py) sava galvenā projekta 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')),
]

Tad sāksim tīmekļa serveri:

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

Tagad mums vajadzētu redzēt iepriekš izveidoto ziņu sarakstus:

Pateicoties Bootstrap, jums joprojām var būt lieliska vizualizācija mazākā ierīcē:

Summējot

Pārskatīsim šajā rakstā un visā šajā sērijā aplūkotos jēdzienus:

1. Katrs modelis definē objektu un kartē datu bāzes tabulu, kuras lauki savukārt atbilst šī objekta īpašībām. No otras puses, veidne nosaka lietotāja saskarni, kur tiks parādīti skata atgrieztie dati.

Pieņemsim, ka mēs vēlamies modificēt savu modeli, objektam Post pievienojot lauku ar nosaukumu Summary, kur mēs saglabāsim izvēles īsu katras ziņas aprakstu. Vietnē myblog/models.py pievienosim šādu rindu:

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

Kā mēs uzzinājām iepriekšējā rakstā, izmaiņas ir jāpārceļ uz datu bāzi:

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

Pēc tam izmantojiet administratora saskarni, lai rediģētu ziņas un katram ziņam pievienotu īsu kopsavilkumu. Visbeidzot, veidnē (posts.html) aizstājiet šādu rindu:

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

ar

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

Lai redzētu izmaiņas, atsvaidziniet sākumlapu:

2. Skata funkcija uzņem HTTP pieprasījumu un atgriež HTTP atbildi. Šajā rakstā def posts (pieprasījums) views.py piezvanīs uz pamata datu bāzi, lai izgūtu visas ziņas. Ja mēs vēlamies izgūt visas ziņas, kuru nosaukumā ir vārds ansible, mums tas ir jāaizstāj.

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

ar

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

Atdalot lietotāja saskarni no lietojumprogrammu loģikas tīmekļa lietojumprogrammās, Django atvieglo lietotņu uzturēšanu un eskalāciju.

3. Ja jūs izpildījāt šajā sērijā sniegtos norādījumus, jūsu projekta struktūrai jābūt šādai:

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

Gadījumā, ja iepriekšējais saraksts jūsu pārlūkprogrammā netiek parādīts pareizi, šeit ir šādas komandas izvades ekrānuzņēmums:

# tree myfirstdjangoenv/myfirstdjangoproject

Kopsavilkums

Lai gan sākumā visi šie jēdzieni var šķist nedaudz biedējoši, es varu jums apliecināt, ka Django ir vērts visu nepieciešamo pūļu iepazīšanai

Es ceru, ka piemērs, ko mēs izmantojām šajā sērijā, lai iepazīstinātu jūs ar šo izcilo tīmekļa sistēmu, motivēs jūs uzzināt vairāk. Ja tā, oficiālā Django dokumentācija (kas tiek pastāvīgi atjaunināta) ir labākā vieta, kur sākt.

Es varu jums apliecināt, ka Django ir daudz vairāk, nekā mēs varam pietiekami atspoguļot rakstu sērijā, tāpēc droši izpētiet to un mācieties, darot!

Izmantojot šo veidlapu, nekautrējieties mums nomest piezīmi ar jautājumiem vai ieteikumiem.