Hvernig á að búa til farsímavæn vefforrit með Django Framework - Part 3


Í hluta 1 af þessari seríu lærðir þú hvernig á að setja upp og stilla Django í sýndarumhverfi og þú bjóst til beinagrind fyrsta verkefnisins þíns.

Síðan í hluta 2 bjuggum við til forrit og líkan fyrir Post-hluti, sem við fluttum síðar í gagnagrunninn. Að lokum sýndum við þér hvernig á að samþætta nýstofnaða forritið þitt við Django stjórnunarviðmótið.

Þessar greinar eru hluti af Django seríunni:

Í þessari lokahandbók munum við ræða hvernig á að fá aðgang að forritinu með notendaviðmótinu og hvernig á að gera það farsímavænt fyrir alls kyns tæki. Sem sagt, við skulum byrja.

Búa til hluti í gegnum Django admin tengi

Til að búa til hluti af gerðinni Post (mundu að það er líkanið sem við skilgreindum í hluta 2 í þessari röð), munum við nota Django admin tengi.

Gakktu úr skugga um að innbyggði Django vefþjónninn sé í gangi á höfn 8000 (eða annarri að eigin vali) með því að keyra eftirfarandi skipun úr ytri myfirstdjangoproject möppunni:

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

Opnaðu nú vafrann þinn og bentu á http://ip-address:8000/admin, skráðu þig svo inn með því að nota skilríkin sem þú settir upp í fyrri grein og byrjaðu að skrifa færslu (sem aftur, mun búa til hlut af gerðinni Post og setja tengd gögn inn í undirliggjandi gagnagrunn):

Endurtaktu ferlið 2 eða 3 sinnum:

Eftir að við höfum búið til nokkrar færslur skulum við sjá hvað við þurfum að gera til að birta þær með vafrann okkar.

Upphafleg skoðun okkar

Fyrsta sýn okkar (~/myfirstdjangoenv/myfirstdjangoproject/myblog/views.py) mun sjá um að sía alla Post-hluti og skila þeim þar sem gildi whenPublished er minna en eða jafnt og núverandi dagsetningu og tíma (whenPublished__lte=timezone.now()) raðað með því að lækka whenPublished, sem er það sama og að segja „nýjast fyrst“.

Þessir hlutir eru vistaðir í breytu sem heitir færslur og er skilað til baka (auðkenndar sem allar færslur) til að vera felldar inn í HTML, eins og við munum sjá í næsta kafla:

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

Að lokum er tvöfaldur undirstrik í whenPublished__lte hér að ofan notaður til að aðgreina gagnagrunnsreit (whenPublished) frá síu eða aðgerð (lte = minna en eða jafnt).

Þegar við höfum skilgreint upphafssýn okkar skulum við vinna að tilheyrandi sniðmáti.

Búðu til sniðmát fyrir fyrsta verkefnið okkar

Með því að fylgja leiðbeiningunum og slóðunum sem gefnar eru upp í fyrri hlutanum munum við geyma upphafssniðmátið okkar í myblog/templates/myblog. Þetta þýðir að þú þarft að búa til möppu sem heitir sniðmát og undirskrá sem heitir myblog:

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

Við munum kalla sniðmátið posts.html og setja eftirfarandi kóða inn í það. Þú munt taka eftir því að við erum að bæta við tilvísunum á netinu í jQuery, Bootstrap, FontAwesome og Google leturgerðir.

Að auki höfum við lokað Python kóða innan krullaðra sviga inni í HTML. Vinsamlegast athugaðu að fyrir hvern hlut af gerðinni Post munum við sýna titil hans, birtingardag og höfund og að lokum texta hans. Að lokum, í rauðu muntu sjá að við vísum til hlutanna sem skilað er í gegnum myblog/views.py:

Allt í lagi, hér er posts.html skráin:

<!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>

Í ofangreindu sniðmáti er línuskilasían notuð til að skipta út línuskilum í venjulegum texta fyrir samsvarandi HTML jafngildi (
eða

) til að forsníða hvert pósta almennilega með greinarskilum.

Næst þurfum við að setja upp kortlagningu á milli vefslóða í forritinu okkar og samsvarandi skoðana sem skila gögnunum. Til að gera það skaltu búa til skrá sem heitir urls.py inni á myblog með eftirfarandi efni:

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

r^$ á skilið aðeins meiri útskýringu. Leiðandi r gefur Django fyrirmæli um að meðhöndla strenginn inni í stökum gæsalappir sem venjulega segð.

Sérstaklega táknar r^$ tóman streng þannig að þegar við beinum vafranum okkar á http://ip-address:8000 (og ekkert annað), þá skiluðu gögnunum með breytilegum færslum inni í views.py (sjá fyrri hluta) verða kynntar á heimasíðunni okkar:

Síðast en ekki síst munum við setja urls.py skrá bloggforritsins okkar (~/myfirstdjangoenv/myfirstdjangoproject/myblog/urls.py) inn í urls.py aðalverkefnisins okkar (~/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')),
]

Þá skulum við ræsa vefþjóninn:

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

Við ættum nú að geta séð lista yfir færslur sem við bjuggum til áðan:

Þökk sé Bootstrap geturðu samt haft framúrskarandi sjón í smærra tæki:

Leggja saman

Við skulum nú fara yfir hugtökin sem við höfum fjallað um í þessari grein og í þessari röð:

1. Hvert líkan skilgreinir hlut og varpar í gagnagrunnstöflu, en reitir hennar varpa aftur á eiginleika þess hlutar. Á hinn bóginn skilgreinir sniðmát notendaviðmótið þar sem gögnin sem skjárinn skilar munu birtast.

Segjum að við viljum breyta líkaninu okkar með því að bæta reit sem heitir samantekt við Post hlutinn, þar sem við munum geyma valfrjálsa stutta lýsingu á hverri færslu. Við skulum bæta við eftirfarandi línu í myblog/models.py:

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

Eins og við lærðum í fyrri grein þurfum við að flytja breytingarnar í gagnagrunninn:

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

Notaðu síðan stjórnunarviðmótið til að breyta færslunum og bæta stuttri samantekt við hverja færslu. Að lokum skaltu skipta um eftirfarandi línu í sniðmátinu (posts.html):

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

með

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

Endurnýjaðu heimasíðuna til að sjá breytingarnar:

2. Útsýnisaðgerð tekur HTTP beiðni og skilar HTTP svari. Í þessari grein hringir def posts(request) í views.py í undirliggjandi gagnagrunn til að sækja allar færslur. Ef við viljum sækja allar færslur með orðinu ansible í titlinum ættum við að skipta út.

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

með

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

Með því að aðskilja notendaviðmótið frá rökfræði forrita í vefforritum auðveldar Django verkefnin við að viðhalda og auka öpp.

3. Ef þú fylgdir leiðbeiningunum í þessari röð ætti uppbygging verkefnisins að vera sem hér segir:

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

Ef listinn hér að ofan birtist ekki rétt í vafranum þínum, hér er skjáskot af framleiðslu eftirfarandi skipunar:

# tree myfirstdjangoenv/myfirstdjangoproject

Samantekt

Þótt öll þessi hugtök kunni að virðast svolítið ógnvekjandi í fyrstu get ég fullvissað þig um að Django er vel þess virði allrar viðleitni sem þarf til að kynnast því

Ég vona að dæmið sem við höfum notað í þessari röð til að kynna þér þennan framúrskarandi veframma muni hvetja þig til að læra meira. Ef svo er, þá er opinbera Django skjölin (sem er stöðugt uppfærð) besti staðurinn til að byrja.

Ég get fullvissað þig um að það er miklu meira við Django en við getum fjallað nægilega um í röð greina, svo ekki hika við að kanna það og læra með því að gera!

Ekki hika við að senda okkur athugasemd með spurningum eða ábendingum með því að nota formið hér að neðan.