Jinsi ya Kuunda Programu Zinazofaa kwa Wavuti kwa kutumia Mfumo wa Django - Sehemu ya 3

Katika Sehemu ya 1 ya mfululizo huu ulijifunza jinsi ya kusakinisha na kusanidi Django katika mazingira ya mtandaoni na ukaunda kiunzi cha mradi wako wa kwanza.

Kisha katika Sehemu ya 2 tuliunda programu na muundo wa vitu vya Machapisho, ambayo baadaye tulihamia kwenye hifadhidata. Hatimaye, tulikuonyesha jinsi ya kuunganisha programu yako mpya iliyoundwa kwa kiolesura cha mtumiaji wa utawala wa Django.

Nakala hizi ni sehemu ya safu ya Django:

Katika mwongozo huu wa mwisho tutajadili jinsi ya kufikia programu kwa kutumia UI na jinsi ya kuifanya iwe ya rununu kwa kila aina ya vifaa. Hiyo ilisema, wacha tuanze.

Kuunda vitu kupitia kiolesura cha msimamizi wa Django

Ili kuunda vipengee vya aina ya Chapisho (kumbuka huo ndio muundo tuliofafanua katika Sehemu ya 2 ya mfululizo huu), tutatumia kiolesura cha msimamizi wa Django.

Hakikisha seva ya wavuti iliyojengwa ndani ya Django inaendesha kwenye bandari 8000 (au nyingine unayochagua) kwa kutekeleza amri ifuatayo kutoka kwa saraka ya nje ya myfirstdjangoproject:

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

Sasa fungua kivinjari chako cha wavuti na uelekeze kwa http://ip-address:8000/admin, kisha ingia kwa kutumia stakabadhi ulizoweka katika makala yaliyotangulia na uanze kuandika chapisho (ambalo, tena, itaunda kitu cha aina ya Chapisho na kuingiza data inayohusika kwenye hifadhidata ya msingi):

Rudia utaratibu mara 2 au 3:

Baada ya kuunda machapisho kadhaa, hebu tuone kile tunachohitaji kufanya ili kuyaonyesha kwa kutumia kivinjari chetu cha wavuti.

Mtazamo wetu wa awali

Mtazamo wetu wa kwanza (~/myfirstdjangoenv/myfirstdjangoproject/myblog/views.py) utakuwa na jukumu la kuchuja vitu vyote vya Chapisho na kurudisha vile ambavyo thamani ya whenPublished ni chini ya au sawa na tarehe na wakati wa sasa (whenPublished__lte=timezone.now()) imeagizwa kwa kushuka whenPublished, ambayo ni sawa na kusema karibuni kwanza.

Vitu hivi huhifadhiwa katika machapisho yenye majina yanayofaa, na hurudishwa (yaliyotambuliwa kama machapisho yote) ili kupachikwa katika HTML, kama tutakavyoona katika sehemu inayofuata:

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

Hatimaye, alama mbili chini katika whenPublished__lte hapo juu inatumika kutenganisha uga wa hifadhidata (whenPublished) kutoka kwa kichujio au operesheni (lte = chini ya au sawa).

Baada ya kufafanua mtazamo wetu wa awali, wacha tufanye kazi kwenye kiolezo kinachohusika.

Unda Kiolezo cha Mradi wetu wa kwanza

Kufuatia maagizo na njia zilizotolewa katika sehemu iliyotangulia, tutahifadhi kiolezo chetu cha awali ndani ya myblog/templates/myblog. Hii inamaanisha utahitaji kuunda saraka inayoitwa templeti na saraka ndogo inayoitwa myblog:

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

Tutaita kiolezo posts.html na kuingiza msimbo ufuatao ndani yake. Utagundua kuwa tunaongeza marejeleo ya mtandaoni kwa jQuery, Bootstrap, FontAwesome, na fonti za Google.

Kwa kuongezea, tumeambatanisha msimbo wa Python ndani ya mabano yaliyopinda ndani ya HTML. Tafadhali kumbuka kuwa kwa kila kitu cha aina ya Chapisho tutaonyesha kichwa chake, tarehe yake iliyochapishwa na mwandishi, na hatimaye maandishi yake. Mwishowe, kwa rangi nyekundu utaona kwamba tunarejelea vitu vilivyorejeshwa kupitia myblog/views.py:

Sawa, hii hapa ni faili ya 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>

Katika kiolezo kilicho hapo juu, kichujio cha vivunja mstari kinatumika kuchukua nafasi ya kukatika kwa mstari katika maandishi wazi na HTML inayolingana (
 au

) ili kuumbiza kila moja. Chapisha ipasavyo na mgawanyo wa aya.

Kisha, tunahitaji kusanidi ramani kati ya URL katika programu tumizi yetu na mitazamo inayolingana ambayo inarudisha data. Ili kufanya hivyo, tengeneza faili inayoitwa urls.py ndani ya blogu yangu na yaliyomo:

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

r^$ inastahili maelezo zaidi. r inayoongoza inamwagiza Django kutibu mfuatano ndani ya nukuu moja kama usemi wa kawaida.

Hasa, r^$ inawakilisha mfuatano tupu ili tunapoelekeza kivinjari chetu kwa http://ip-address:8000 (na hakuna kingine), data ikarejeshwa. kwa machapisho yanayotofautiana ndani ya views.py (rejelea sehemu iliyotangulia) yatawasilishwa katika ukurasa wetu wa nyumbani:

Mwisho, lakini sio kwa umuhimu, tutajumuisha faili ya urls.py ya ombi letu la blogu (~/myfirstdjangoenv/myfirstdjangoproject/myblog/urls.py) kwenye urls.py ya mradi wetu mkuu (~/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')),
]

Kisha wacha tuanze seva ya wavuti:

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

Tunapaswa sasa kuona orodha za machapisho tuliyounda hapo awali:

Shukrani kwa Bootstrap, bado unaweza kuwa na taswira bora katika kifaa kidogo:

Muhtasari

Wacha sasa tupitie dhana ambazo tumeshughulikia katika nakala hii na katika safu hii yote:

1. Kila modeli inafafanua kitu na ramani kwenye jedwali la hifadhidata, ambalo sehemu zake kwa zamu huweka ramani ya sifa za kitu hicho. Kwa upande mwingine, template inafafanua kiolesura cha mtumiaji ambapo data iliyorejeshwa na mwonekano itaonyeshwa.

Hebu tuseme tunataka kurekebisha muundo wetu kwa kuongeza sehemu inayoitwa muhtasari kwa kitu cha Chapisho, ambapo tutahifadhi maelezo mafupi ya hiari ya kila chapisho. Wacha tuongeze laini ifuatayo katika myblog/models.py:

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

Kama tulivyojifunza katika nakala iliyotangulia, tunahitaji kuhamishia mabadiliko kwenye hifadhidata:

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

Kisha utumie kiolesura cha msimamizi kuhariri machapisho na kuongeza muhtasari mfupi kwa kila chapisho. Hatimaye, badilisha laini ifuatayo kwenye kiolezo (posts.html):

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

na

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

Onyesha upya ukurasa wa nyumbani ili kuona mabadiliko:

2. Kitendaji cha kutazama huchukua ombi la HTTP na kurudisha jibu la HTTP. Katika nakala hii, machapisho ya def(ombi) katika views.py yanatoa wito kwa hifadhidata ya msingi ili kupata machapisho yote. Ikiwa tunataka kurejesha machapisho yote yenye neno ansible katika kichwa, tunapaswa kuchukua nafasi.

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

na

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

Kwa kutenganisha kiolesura cha mtumiaji kutoka kwa mantiki ya programu katika programu za wavuti, Django hurahisisha kazi za kudumisha na kuongeza programu.

3. Ikiwa ulifuata maagizo yaliyotolewa katika mfululizo huu, muundo wa mradi wako unapaswa kuwa kama ifuatavyo:

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

Iwapo orodha iliyo hapo juu haionekani kwa usahihi kwenye kivinjari chako, hapa kuna picha ya skrini ya matokeo ya amri ifuatayo:

# tree myfirstdjangoenv/myfirstdjangoproject

Muhtasari

Ingawa dhana hizi zote zinaweza kuonekana kuwa za kutisha mwanzoni, ninaweza kukuhakikishia kuwa Django anastahili juhudi zote zinazohitajika ili kuifahamu.

Ninatumai kwamba mfano ambao tumetumia katika mfululizo huu kukutambulisha kwa mfumo huu bora wa wavuti utakuhimiza kujifunza zaidi. Ikiwa ni hivyo, hati rasmi ya Django (ambayo inasasishwa kila wakati) ndio mahali pazuri pa kuanzia.

Ninaweza kukuhakikishia kwamba kuna mengi zaidi kwa Django kuliko tunavyoweza kuandika vya kutosha katika mfululizo wa makala, kwa hivyo jisikie huru kuyachunguza na kujifunza kwa kufanya!

Jisikie huru kutuandikia barua yenye maswali au mapendekezo kwa kutumia fomu iliyo hapa chini.