Mobiiliystävällisten verkkosovellusten luominen Django Frameworkilla - Osa 3
"Tämä artikkeli on tarkistettu ja päivitetty uusimmalla Djangon versiolla – toukokuu 2016"
Tämän sarjan osassa 1 opit asentamaan ja konfiguroimaan Djangoa virtuaaliympäristössä ja loit rungon ensimmäiselle projektillesi.
Sitten Osassa 2 loimme sovelluksen ja mallin Post-objekteille, jotka siirrettiin myöhemmin tietokantaan. Lopuksi näytimme sinulle, kuinka voit integroida juuri luomasi sovelluksesi Django-hallintakäyttöliittymään.
Nämä artikkelit ovat osa Django-sarjaa:
Django Web Frameworkin asentaminen ja määrittäminen virtuaaliympäristöillä – Osa 1
Pythonin perusteiden tarkastelu ja ensimmäisen verkkosovelluksesi luominen Djangon avulla – Osa 2
Tässä viimeisessä oppaassa käsittelemme sovelluksen käyttämistä käyttöliittymän avulla ja kuinka tehdä siitä mobiiliystävällinen kaikenlaisille laitteille. Se sanoi, aloitetaan.
Objektien luominen Django-järjestelmänvalvojan käyttöliittymän kautta
Luodaksemme Viesti-tyyppisiä objekteja (muista, että tämä on malli, jonka määritimme tämän sarjan osassa 2), käytämme Django-järjestelmänvalvojan käyttöliittymää.
Varmista, että Djangon sisäänrakennettu verkkopalvelin toimii portissa 8000 (tai muussa valitsemassasi) suorittamalla seuraava komento ulommasta myfirstdjangoproject-hakemistosta:
cd ~/myfirstdjangoenv/myfirstdjangoproject
python manage.py runserver 0.0.0.0:8000
Avaa nyt verkkoselain ja osoita http://ip-address:8000/admin, kirjaudu sitten sisään edellisessä artikkelissa määrittämilläsi tunnistetiedoilla ja ala kirjoittaa viestiä (joka jälleen luo Julkaise-tyypin objektin ja lisää siihen liittyvät tiedot taustalla olevaan tietokantaan):
Toista prosessi 2 tai 3 kertaa:
Kun olemme luoneet pari viestiä, katsotaan, mitä meidän on tehtävä, jotta voimme näyttää ne verkkoselaimellamme.
Alkuperäinen näkemyksemme
Ensimmäinen näkymämme (~/myfirstdjangoenv/myfirstdjangoproject/myblog/views.py) vastaa kaikkien Post-objektien suodattamisesta ja niiden palauttamisesta, joissa on whenPublished-arvo. on pienempi tai yhtä suuri kuin nykyinen päivämäärä ja aika (whenPublished__lte=timezone.now()) laskevassa järjestyksessä whenPublished, mikä on sama kuin sanomalla " viimeisin ensin".
Nämä objektit tallennetaan muuttujaan, joka on kätevästi nimetty viestit, ja palautetaan (tunnistetaan allposts) upotettavaksi HTML-koodiin, kuten seuraavassa osiossa nähdään:
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})
Lopuksi yllä olevaa kaksoisalaviivaa kohdassa whenPublished__lte käytetään tietokantakentän (whenPublished) erottamiseen suodattimesta tai operaatiosta (lte=vähemmän kuin tai yhtä suuri).
Kun olemme määrittäneet alkuperäisen näkymämme, työstetään siihen liittyvää mallia.
Luo malli ensimmäiselle projektillemme
Noudattamalla edellisessä osiossa annettuja ohjeita ja polkuja tallennamme alkuperäisen mallimme myblog/templates/myblogiin. Tämä tarkoittaa, että sinun on luotava hakemisto nimeltä mallit ja alihakemisto nimeltä myblog:
cd ~/myfirstdjangoenv/myfirstdjangoproject/myblog
mkdir -p templates/myblog
Kutsumme mallia posts.html ja lisäämme siihen seuraavan koodin. Huomaat, että lisäämme online-viittauksia jQuery-, Bootstrap-, FontAwesome- ja Google-kirjasimiin.
Lisäksi olemme sulkeneet Python-koodin HTML-koodin sisällä oleviin hakasulkeisiin. Huomaa, että jokaisen Post-tyyppisen objektin kohdalla näytämme sen otsikon, julkaisupäivämäärän ja tekijän sekä lopuksi sen tekstin. Lopuksi punaisena näet, että viittaamme myblog/views.py-osoitteen kautta palautettuihin objekteihin:
Ok, tässä on posts.html-tiedosto:
<!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>
Yllä olevassa mallissa rivinvaihtosuodatinta käytetään pelkän tekstin rivinvaihdon korvaamiseen vastaavalla HTML-vastineella (
Seuraavaksi meidän on määritettävä kartoitus sovelluksemme URL-osoitteiden ja tiedot palauttavien vastaavien näkymien välille. Voit tehdä tämän luomalla omablogiin tiedoston nimeltä urls.py, jossa on seuraava sisältö:
from django.conf.urls import url
from . import views
urlpatterns = [
url(r'^$', views.posts, name='posts'),
]
r'^$' ansaitsee hieman enemmän selitystä. Alussa oleva r käskee Djangoa käsittelemään yksittäisten lainausmerkkien sisällä olevaa merkkijonoa säännöllisenä lausekkeena.
Erityisesti r'^$' edustaa tyhjää merkkijonoa, joten kun osoitamme selaimemme osoitteeseen http://ip-address:8000 (eikä mitään muuta), views.py-muuttujan posts palauttamat tiedot (katso edellinen osio) esitetään kotisivullamme:
Viimeisenä, mutta ei vähäisimpänä, sisällytämme blogisovelluksemme urls.py-tiedoston (~/myfirstdjangoenv/myfirstdjangoproject/myblog/urls.py) -kansioon. urls.py pääprojektistamme (~/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')),
]
Aloitetaan sitten verkkopalvelin:
cd ~/myfirstdjangoenv/myfirstdjangoproject
python manage.py runserver 0.0.0.0:8000
Meidän pitäisi nyt nähdä luettelot aiemmin luomistamme viesteistä:
Bootstrapin ansiosta voit silti saada erinomaisen visualisoinnin pienemmässä laitteessa:
Yhteenvetona
Tarkastellaan nyt käsitteitä, joita olemme käsitelleet tässä artikkelissa ja koko tässä sarjassa:
1. Jokainen malli määrittelee objektin ja yhdistää sen tietokantataulukkoon, jonka kentät puolestaan kartoittavat kyseisen objektin ominaisuudet. Toisaalta malli määrittää käyttöliittymän, jossa näkymän palauttamat tiedot näytetään.
Oletetaan, että haluamme muokata malliamme lisäämällä Viesti-objektiin kentän nimeltä yhteenveto, johon tallennamme valinnaisen lyhyen kuvauksen jokaisesta viestistä. Lisätään seuraava rivi kohtaan myblog/models.py:
summary = models.CharField(max_length=350, blank=True, null=True)
Kuten opimme edellisessä artikkelissa, meidän on siirrettävä muutokset tietokantaan:
python manage.py makemigrations myblog
python manage.py migrate myblog
Käytä sitten järjestelmänvalvojan käyttöliittymää muokataksesi viestejä ja lisäämällä lyhyt yhteenveto jokaiseen viestiin. Korvaa lopuksi seuraava rivi mallissa (posts.html):
<p>{{ post.text|linebreaks }}</p>
kanssa
<p>{{ post.summary }}</p>
Päivitä kotisivu nähdäksesi muutokset:
2. View-funktio vastaanottaa HTTP-pyynnön ja palauttaa HTTP-vastauksen. Tässä artikkelissa def posts(request) osoitteessa views.py kutsuu taustalla olevaan tietokantaan noutaakseen kaikki viestit. Jos haluamme hakea kaikki viestit, joiden otsikossa on sana ansible, meidän tulee korvata.
posts = Post.objects.filter(whenPublished__lte=timezone.now()).order_by('-whenPublished')
kanssa
posts = Post.objects.filter(title__icontains="ansible").order_by('-whenPublished')
Erottamalla käyttöliittymän verkkosovellusten sovelluslogiikasta Django helpottaa sovellusten ylläpito- ja laajennustehtäviä.
3. Jos noudatit tässä sarjassa annettuja ohjeita, projektisi rakenteen tulisi olla seuraava:
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
Jos yllä oleva luettelo ei näy oikein selaimessasi, tässä on kuvakaappaus seuraavan komennon tulosteesta:
tree myfirstdjangoenv/myfirstdjangoproject
Yhteenveto
Vaikka kaikki nämä käsitteet saattavat aluksi tuntua hieman pelottavilta, voin vakuuttaa teille, että Django on kaikkien ponnistelujen arvoinen tutustuakseen siihen.
Toivon, että esimerkki, jota olemme käyttäneet tässä sarjassa esitelläksemme sinulle tämän erinomaisen verkkokehyksen, motivoi sinua oppimaan lisää. Jos näin on, virallinen Django-dokumentaatio (joka pidetään jatkuvasti ajan tasalla) on paras paikka aloittaa.
Voin vakuuttaa, että Djangossa on paljon enemmän kuin voimme riittävästi käsitellä artikkelisarjassa, joten voit vapaasti tutkia sitä ja oppia tekemällä!
Voit lähettää meille kysymyksiä tai ehdotuksia alla olevalla lomakkeella.