實戰Django：網絡相冊Part2

時間 2020-01-08

標籤實戰 django 網絡相冊 part2 欄目 Python 简体版

原文原文鏈接

在Part1中咱們完成了框架搭建等一系列的準備工做，捨得前面講過Django的幾個要素：模型、視圖、模板、連接，如今咱們僅僅完成了模型部分的工做。css

10.添加內容 html

在講其它內容以前，讓咱們先往items應用裏添加些內容。django

在上一步打開的頁面中點擊Items後面的」增長「按鈕：網絡

作過前面兩個實例的童鞋，相信對這樣的表單已經很熟悉了。一個item比如一個帖子，它能夠配上多幅圖片，咱們這裏默認設置的是3張圖片。要添加更多的圖片，能夠點擊下方的」添加另外一個Photo」連接。框架

咱們依次在Name、Description、Title、Caption的文本框中輸入文字，點擊Image下的」瀏覽「按鈕，而後在彈出的窗口中選擇一張圖片，點擊「打開」按鈕返回到頁面。ide

操做完成後，點擊「保存」按鈕。你能夠重複執行一樣的操做，多建幾個item。編碼

11.編寫視圖 url

編輯items/views.py 文件，添加下面的內容：spa

items/views.py：3d

from django.views import generic
from items.models import Item, Photo
        
class IndexView(generic.ListView):
    template_name = 'items/index.html'
    def get_queryset(self):
        return Item.objects.all()[:5]
        
class ListView(generic.ListView):
    model = Item
    template_name = 'items/items_list.html'
        
class ItemDetailView(generic.DetailView):
    model = Item    
    template_name = 'items/items_detail.html'
        
class PhotoDetailView(generic.DetailView):
    model = Photo
    template_name = 'items/photos_detail.html'

對比起咱們官方實例中的視圖，這個視圖顯然簡單多了：

每一個視圖擁有一樣的模式，都是先指定模型，而後指定模板名稱，至於數據，只要告訴視圖你用哪一個模型，數據會自動取出來。

咱們總共有四個視圖，共使用了Django通用視圖中的兩大類型：ListView和DetailView。

各個視圖的功能以下：

視圖1：首頁;

視圖2：圖片列表頁;

視圖3：Item內容頁；

視圖4：照片內容頁；

12.編寫模板

根據上面的這些視圖，咱們來一一編寫模板。雖然這裏有4個模板，但咱們但願它們使用統一的風格，因此，先作一個base.html，在這基礎上進行擴展，可讓咱們的代碼更精簡。

首先建立模板文件夾，在items文件夾下創建templates文件夾，而後在templates下再建一個items文件夾。

隨後咱們在這個文件夾下創建base.html文件，這個base.html文件的正確路徑應該是：

items/templates/items/base.html

其它的模板也會放在同一個文件夾下.

編輯base.html文件，加入以下內容：

items/templates/items/base.html：

<html>
    <head>
        <title>網絡相冊 - {% block title %}{% endblock %}</title>
        <style type="text/css">
            body { margin: 30px; font-family: Microsoft Yahei,sans-serif; background: #fff; }
            h1 { background: #6E94A3; padding: 20px; color:#fefefe; }
            h2 { background: #ddf; padding: 10px 20px; }
            h3 { background: #D7E8F0; padding: 5px 20px; }
            p { padding: 5px 20px; }
            table { width: 100%; }
            table th { text-align: left; }
        </style>
    </head>
    <body>
        <h1>網絡相冊</h1>
        {% block content %}{% endblock %}
    </body>
</html>

在這個base.html模板中，咱們定義了兩個可繼承的塊，分別是{% block title %}和{% block content %}。

接下來建立index.html模板，並加入以下代碼：

items/templates/items/index.html：

{% extends "items/base.html" %}

{% block title %}首頁{% endblock %}

{% block content %}

<p>歡迎使用網絡相冊，在這裏你能夠看到一幅幅不一樣的圖片，點擊下方的「查看全部圖片」連接能夠看到全部的圖片.</p>

<h3>陳列櫃</h3>
<table>
    <tr>
    {% for item in object_list %}
        <td>
            <a href="` item`.`get_absolute_url `"><b>` item`.`name `</b><br />
            {% if item.photo_set.count %}
                <img src="` item`.`photo_set`.`all`.`0`.`image`.`thumb_url `" />
                
            {% else %}
                <span>No photos (yet)</span>
            {% endif %}
            </a>
        </td>
    {% endfor %}
    </tr>
</table>
<p><a href="{% url 'item_list'  %}">查看相冊列表 &raquo;</a></p>
{% endblock %}

而後建立items_list.html模板，加入以下代碼：

items/templates/items/items_list.html：

{% extends "items/base.html" %}

{% block title %}相冊列表{% endblock %}

{% block content %}

<p><a href="{% url 'index' %}">&laquo; 返回首頁</a></p>

<h2>相冊列表</h2>
{% if object_list %}
<table>
    <tr>
        <th>標題</th>
        <th>縮略圖</th>
        <th>描述</th>
    </tr>
    {% for item in object_list %}
    <tr>
        <td><i>` item`.`name `</i></td>
        <td>
            {% if item.photo_set.count %}
            <a href="` item`.`get_absolute_url `">
                <img src="` item`.`photo_set`.`all`.`0`.`image`.`thumb_url `" />
            </a>
            {% else %}
            (No photos currently uploaded)
            {% endif %}
        </td>
        <td>` item`.`description `</td>
    </tr>
    {% endfor %}
</table>
{% else %}
<p>There are currently no items to display.</p>
{% endif %}

{% endblock %}

而後建立items_detail.html,加入以下代碼：

items/templates/items/items_detail.html：

{% extends "items/base.html" %}

{% block title %}` object`.`name `{% endblock %}

{% block content %}

<p><a href="{% url 'item_list' %}">&laquo; 返回相冊列表</a></p>

<h2>` object`.`name `</h2>
<p>` object`.`description `</p>

<h3>Photos</h3>
<table>
    <tr>
        <th>標題</th>
        <th>縮略圖</th>
        <th>說明</th>
    </tr>
    {% for photo in object.photo_set.all %}
    <tr>
        <td><i>` photo`.`title `</i></td>
        <td>
            <a href="` photo`.`get_absolute_url `">
                <img src="` photo`.`image`.`thumb_url `" />
            </a>
        </td>
        <td>` photo`.`caption `</td>
    </tr>
    {% endfor %}
</table>

{% endblock %}

最後建立photos_detail.html,加入以下代碼：

items/templates/items/photos_detail.html：

{% extends "items/base.html" %}

{% block title %}` object`.`item`.`name ` - ` object`.`title `{% endblock %}

{% block content %}
<a href="` object`.`item`.`get_absolute_url `">&laquo; 返回到 ` object`.`item`.`name ` 內容頁</a>

<h2>` object`.`item`.`name ` - ` object`.`title `</h2>
<img src="` object`.`image`.`url`" />
{% if object.caption %}<p>` object`.`caption `</p>{% endif %}

{% endblock %}

別忘了把全部的模板都儲存爲UTF-8編碼。

13.建立URL模式

在itmes文件夾下建立一個叫url.py的文件，而後添加以下內容：

items/urls.py ：

from django.conf.urls import patterns, url
from items import views

urlpatterns = patterns('',
    url(r'^$', views.IndexView.as_view(), name='index'),
    url(r'^list/$', views.ListView.as_view(), name='item_list'),
    url(r'^(?P<pk>\d+)/$', views.ItemDetailView.as_view(), name='item_detail'),
    url(r'^photo/(?P<pk>\d+)/$', views.PhotoDetailView.as_view(), name='photo_detail'),
    )

編輯gallery/urls.py 文件，讓它變成下面這樣：

gallery/urls.py ：

from django.conf.urls import patterns, include, url
from django.contrib import admin
from gallery import settings

urlpatterns = patterns('',
    url(r'^admin/', include(admin.site.urls)),
    url(r'^media/(?P<path>.*)$', 'django.views.static.serve', {'document_root':settings.MEDIA_ROOT}),
    url(r'^items/', include('items.urls')),
)

第6行很是重要，咱們用它來讓meida文件夾下的圖片文件得以顯示。但這種作法僅限於咱們調試過程使用，在生產中並不推薦這樣操做，應該使用專業的Web服務，如Apache或Nginx來進行這些靜態文件的處理。具體的處理方法，能夠參考官網的文章：https://docs.djangoproject.com/en/dev/howto/static-files/deployment/

來看一下咱們的勞動成果吧，首先是首頁，訪問http://127.0.0.1:8000/items/：

首頁的陳列櫃中咱們顯示了一排相冊，咱們在首頁視圖中將輸出數量設置爲5.這僅僅是最簡單的作法，你能夠本身嘗試去修改出不一樣的效果。

注意觀察咱們在模板中使用了item.get_absolute_url來獲取相冊的連接，用 {% url 'item_list' %}來獲取相冊列表的連接，以及用image.thumb_url來獲取每個相冊的第一幅照片的縮略圖——這是應用程序不少可擴展的地方之一。

下面的相冊列表所用的手法和首頁基本相同，只不過這裏咱們取了全部的相冊數據，分三列顯示了相冊的內容。之後相冊數量增長到必定程度的時候，咱們還能夠考慮加入分頁的方法。

相冊的內容頁和相冊列表看上去相差很少，區別在於它會列出這個相冊的全部照片，而不單單是第一幅照片。

最後就是照片的內容頁，在這裏你能夠看到原始照片，而再也不是縮略圖。

附：本實例源代碼，下載地址：捨得學苑下載中心

【The End】

本文版權歸捨得學苑全部，歡迎轉載，轉載請註明做者和出處。謝謝！
做者：捨得
首發：捨得學苑@博客園