Kuidas luua mobiilisõbralikke veebirakendusi Django raamistiku abil - 3. osa


Selle seeria 1. osas õppisite Django virtuaalsesse keskkonda installima ja konfigureerima ning lõite oma esimese projekti skeleti.

Seejärel lõime 2. osas rakenduse ja Posti objektide mudeli, mille hiljem migreerisime andmebaasi. Lõpuks näitasime teile, kuidas integreerida oma äsja loodud rakendus Django administreerimise kasutajaliidesesse.

Need artiklid on osa Django seeriast:

Selles viimases juhendis arutleme, kuidas kasutajaliidese abil rakendusele juurde pääseda ja kuidas seda mobiilsõbralikuks muuta igasuguste seadmete jaoks. See tähendab, et alustame.

Objektide loomine Django administraatori liidese kaudu

Post-tüüpi objektide loomiseks (pidage meeles, et see on mudel, mille määratlesime selle seeria 2. osas), kasutame Django admini liidest.

Veenduge, et Django sisseehitatud veebiserver töötab pordil 8000 (või muus teie valitud), käivitades järgmise käsu välisest kataloogist myfirstdjangoproject:

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

Nüüd avage oma veebibrauser ja osutage http:// ip-address: 8000/admin , seejärel logige sisse eelmises artiklis seadistatud mandaatide abil ja alustage postituse kirjutamist (mis loob objekti tüüpi Post ja sisestab seotud andmed aluseks olevasse andmebaasi):

Korrake protsessi 2 või 3 korda:

Kui oleme paar postitust loonud, vaatame, mida me peame tegema, et neid oma veebibrauseri abil kuvada.

Meie esialgne vaade

Meie esimene vaade (~/myfirstdjangoenv/myfirstdjangoproject/myblog/views.py) vastutab kõigi Postiobjektide filtreerimise ja nende tagastamise eest, kus väärtus()) järjestuses kahanevas järjekorras, kui avaldatud, mis on sama, mis öelda "viimane enne".

Need objektid salvestatakse muutujaks, mis on mugavalt nimega postitused, ja tagastatakse (identifitseeritakse kui kõik postitused), et need HTML-i lisada, nagu näeme järgmises jaotises:

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

Lõpuks kasutatakse ülaltoodud whenPublished__lte topeltkriipsutust andmebaasi välja (whenPublished) eraldamiseks filtrist või toimingust (lte = väiksem või võrdne).

Kui oleme oma esialgse vaate määratlenud, töötame seotud malliga.

Looge mall meie esimese projekti jaoks

Järgides eelmises jaotises antud juhiseid ja teid, salvestame oma esialgse malli saidi myblog/templates/myblog. See tähendab, et peate looma kataloogi nimega mallid ja alamkataloog nimega myblog:

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

Helistame malliks posts.html ja sisestame sellesse järgmise koodi. Märkate, et lisame veebiviiteid jQuery, Bootstrap, FontAwesome ja Google fontidele.

Lisaks oleme lisanud Pythoni koodi lokkisulgudesse HTML-i sisse. Pange tähele, et iga Post-tüüpi objekti puhul kuvame selle pealkirja, avaldamise kuupäeva ja autori ning lõpuks ka teksti. Lõpuks näete punasega, et viidame myblog/views.py kaudu tagastatud objektidele:

Ok, siin on fail 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>

Ülalolevas mallis kasutatakse reavahetuste filtrit, et asendada lihtteksti reavahetused vastava HTML-i vastega (
või

), et vormindada iga korralikult postitada lõigu eraldamisega.

Järgmisena peame seadistama kaardistamise oma rakenduse URL-ide ja vastavate andmete tagastavate vaadete vahel. Selleks looge myblogi sees fail nimega urls.py järgmise sisuga:

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

r ^$ väärib veidi rohkem selgitust. Juhtiv r annab Djangole käsu käsitleda jutumärkides olevat stressi regulaaravaldisena.

Eelkõige tähistab r ^$ tühja stringi, nii et kui suuname brauseri http:// ip-address: 8000 (ja mitte millegi muu) juurde, tagastatakse andmed muutuja postitused views.py sees (vt eelmist jaotist) esitatakse meie avalehel:

Viimasena, kuid mitte vähem tähtsana, lisame oma ajaveebirakenduse URL-i faili (~/myfirstdjangoenv/myfirstdjangoproject/myblog/urls.py) meie põhiprojekti URL-i (~/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')),
]

Seejärel alustame veebiserverit:

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

Nüüd peaksime nägema varem loodud postituste loendeid:

Tänu Bootstrapile saate väiksemas seadmes endiselt suurepärase visualiseerimise:

Summeerida

Vaatame nüüd üle selles artiklis ja kogu selles seerias käsitletud mõisted:

1. Iga mudel määratleb objekti ja kaardistab andmebaasitabeli, mille väljad omakorda kaardistavad selle objekti omadused. Teiselt poolt määratleb mall kasutajaliidese, kus kuvatakse vaate tagastatud andmed.

Oletame, et soovime oma mudelit muuta, lisades postituse objektile välja nimega kokkuvõte, kuhu salvestame iga postituse valikulise lühikirjelduse. Lisame saidile myblog/models.py järgmise rea:

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

Nagu eelmises artiklis teada saime, peame muudatused andmebaasi üle viima:

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

Seejärel kasutage postituste muutmiseks administraatori liidest ja lisage igale postitusele lühike kokkuvõte. Lõpuks asendage mallis järgmine rida (posts.html):

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

koos

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

Muudatuste nägemiseks värskendage avalehte:

2. Vaatefunktsioon võtab vastu HTTP-päringu ja tagastab HTTP-vastuse. Selles artiklis helistab views.py postitused (taotlus) aluspõhisele andmebaasile kõigi postituste hankimiseks. Kui tahame leida kõik postitused pealkirjas sõnaga ansible, peaksime selle asendama.

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

koos

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

Eraldades veebirakendustes kasutajaliidese rakendusloogikast, hõlbustab Django rakenduste hooldamise ja eskaleerimise ülesandeid.

3. Kui järgisite selles seerias toodud juhiseid, peaks teie projekti ülesehitus olema järgmine:

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

Kui ülaltoodud loendit ei kuvata teie brauseris õigesti, on siin järgmise käsu väljundi ekraanipilt:

# tree myfirstdjangoenv/myfirstdjangoproject

Kokkuvõte

Kuigi kõik need mõisted võivad alguses tunduda veidi hirmutavad, võin teile kinnitada, et Django on väärt kõiki vajalikke jõupingutusi, et sellega tutvuda

Loodan, et näide, mida selles sarjas oleme teile selle silmapaistva veebiraamistiku tutvustamiseks kasutanud, motiveerib teid lisateavet saama. Kui jah, on ametlik Django dokumentatsioon (mida pidevalt ajakohastatakse) parim koht alustamiseks.

Võin teile kinnitada, et Djangol on palju muud, kui suudame artiklite seerias piisavalt kajastada, nii et uurige seda julgelt ja õppige tehes!

Heitke meile julgelt alloleva vormi abil märkus küsimuste või ettepanekutega.