溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

實戰(zhàn)Django：LiveBlog

發(fā)布時間：2020-06-09 03:22:46 來源：網(wǎng)絡(luò) 閱讀：759 作者：chongeryan 欄目：web開發(fā)

 

《Django Web開發(fā)指南》的實例講的差不多了，除了今天要介紹的LiveBlog，還有一個Pastebin。這樣，書中的實例基本講完了。做完這些實例之后，舍得建議回頭看看這本書，或許你會從書中找到舍得所講的實例里忽略掉的一些細節(jié)。此外，《Django Web開發(fā)指南》中有幾個章節(jié)是關(guān)于Django的基礎(chǔ)或高級技術(shù)的，建議閱讀并設(shè)法把它應(yīng)用到你所練習(xí)過的實例中。

正如你已經(jīng)看到的，Django提供了豐富的內(nèi)置功能,你可以很輕松地用這些功能來完成很多工作。但和所有的工具一樣，Django也不是萬能的，它缺乏的最明顯的一個Web功能就是沒有集成Ajax，即異步JavaScript和XML。
在這個實例中，我們要展示一個相對簡單的Ajax應(yīng)用，即“l(fā)iveblog"。liveblog是一個列出了一系列簡短的，帶時間戳的條目的網(wǎng)頁，它能進行自動更新，而無須你去刷新頁面。

1.創(chuàng)建項目和應(yīng)用

我們先來創(chuàng)建本實例的項目，在dos命令提示符下轉(zhuǎn)到Scripts文件夾(如“c:\python32\Scripts”），然后運行如下命令：

$ django-admin startproject liveproject

然后在dos命令提示符下繼續(xù)輸入如下命令,進入項目文件夾：

cd liveproject

接下來開始創(chuàng)建應(yīng)用，在dos命令提示符下輸入命令：

$ python manage.py startapp liveblog

命令執(zhí)行完后，項目根文件夾下會出現(xiàn)一個叫l(wèi)iveblog的文件夾，應(yīng)用創(chuàng)建完畢。

2.建立模型

編輯liveblog/models.py文件，改成下面這樣：

liveblog/models.py：

from django.db import models
import datetime

class Update(models.Model):
    timestamp = models.DateTimeField(default=datetime.datetime.now)
    text = models.TextField()
    
    class Meta:
        ordering = ['-id']

    def __str__(self):
        return "[%s] %s" % (
            self.timestamp.strftime("%Y-%m-%d %H:%M:%S"),
            self.text
        )
3.激活模型

首先修改liveproject/settings.py這個文件，找到INSTALLED_APPS這段設(shè)置，把它改成下面這個樣子：

liveproject/settings.py：

INSTALLED_APPS = (
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'liveblog',
)

編輯settings.py的時候，建議順便修改一下語言和時區(qū)的設(shè)置，具體的方法請參考：《實戰(zhàn)Django：官方實例Part1》

此外，找到文件中的：

USE_TZ = True

把它改為:

USE_TZ = False

然后在dos命令提示符下運行如下命令：

$ python manage.py makemigrations liveblog

繼續(xù)在dos命令提示符下運行命令：

$ python manage.py migrate

這樣，數(shù)據(jù)庫就建好了。

4.創(chuàng)建管理員賬號

在dos命令提示符下運行如下命令： 

$ python manage.py createsuperuser

然后依次輸入admin,你的郵箱，輸入兩次密碼，完成創(chuàng)建管理員的操作。

5.在管理界面注冊應(yīng)用

編輯liveblog/admin.py 文件，讓它變成下面這個樣子：

liveblog/admin.py：

from django.contrib import admin
from liveblog.models import Update

admin.site.register(Update)

6.啟動服務(wù)器

在dos命令提示符下運行如下命令：

$ python manage.py runserver
服務(wù)器啟動成功后，打開瀏覽器，在地址欄內(nèi)輸入： 
http://127.0.0.1:8000/admin/

然后輸入你剛才創(chuàng)建的管理員賬號和密碼，登錄管理界面，你會看到下面這樣的畫面：

實戰(zhàn)Django：LiveBlog

7.添加內(nèi)容

點擊Updates后面的“增加”按鈕，然后在”增加update“頁面的Text文本框中輸入些內(nèi)容，比如”我的第一條消息“：

實戰(zhàn)Django：LiveBlog

輸入完畢后點擊”保存“按鈕。

8.編寫視圖

接下來我們開始編寫視圖，編輯liveblog/views.py 文件，添加下面的內(nèi)容：

liveblog/views.py： 

from django.views import generic

from liveblog.models import Update

class IndexView(generic.ListView):
    template_name = 'liveblog/update_list.html'
    def get_queryset(self):
        return Update.objects.all()

我們只寫了一個簡單的首頁視圖，這個視圖中的get_queryset方法甚至可以去掉，直接加入model=Update，也能實現(xiàn)同樣的效果。

9.編寫模板

首先創(chuàng)建模板文件夾，在liveblog文件夾下建立templates文件夾，然后在templates下再建一個liveblog文件夾。

隨后我們在這個文件夾下建立update_list.html文件，這個update_list.html文件的正確路徑應(yīng)該是：

liveblog/templates/liveblog/update_list.html

編輯update_list.html文件，加入如下內(nèi)容：

liveblog/templates/liveblog/update_list.html：

<html>
    <head>
        <title>Liveblog</title>
        <style type="text/css">
            div.update {padding: 8 1.5em; }
                div.even { background: #ddd; }
            div.timestamp { float: left; font-weight: bold; }
            div.text { float: left; padding-left: 10px; }
            div.clear { clear: both; height: 1px; }
            body { padding: 0 2em; font-family: Microsoft Yahei,sans-serif; background: #fff; }
            h2 { background: #1E2933; padding: 15 0.8em; margin: 0;  color:#fefefe; }
            p { background: #3776AB; padding: 15 2em; margin: 0;  color:#fefefe;  font-size:12px; }
        </style>
    </head>
    <body>
        <h2>Liveblog</h2>
        <p>本頁面會每隔15秒自動更新一次——請<b>不要</b> 手動刷新頁面!</p>
        
        {% if object_list %}
            <div id="update-holder">
                {% for object in object_list %}
                <div class="update {% cycle even,odd %}"
                    id="` object`.`id `">
                    <div class="timestamp">
                        {{ object.timestamp|date:"Y-m-d H:i:s" }}
                    </div>
                    <div class="text">
                        {{ object.text|linebreaksbr }}
                    </div>
                    <div class="clear"></div>
                </div>
                {% endfor %}
            </div>
        {% else %}
            <p>暫無更新 - 請稍后重試!</p>
        {% endif %}
    </body>
</html>

10.設(shè)計URL

在liveblog文件夾下創(chuàng)建一個叫url.py的文件，然后添加如下內(nèi)容：

liveblog/urls.py ： 

from django.conf.urls import patterns, include, url
from liveblog import views


urlpatterns = patterns('',
    url(r'^$', views.IndexView.as_view(), name='index'),
    )

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

liveproject/urls.py ： 

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

urlpatterns = patterns('',
    url(r'^admin/', include(admin.site.urls)),
    url(r'^live/', include('liveblog.urls')),
)

我們來看一下首頁，訪問http://127.0.0.1:8000/live/：

實戰(zhàn)Django：LiveBlog

現(xiàn)在，應(yīng)用看上去已經(jīng)做好了——但是，說好的”ajax”呢？我們接下來給頁面加入Ajax功能，讓它能幫助我們實現(xiàn)自動更新。

11.加入Ajax

實際上來說，網(wǎng)站“實現(xiàn)Ajax”主要包含了以下三個主要任務(wù)。

  • 導(dǎo)入類庫：需要告訴我們的頁面，使用哪個Ajax庫；
  • 定義客戶端回調(diào)函數(shù)：我們需要在模板中加入一個向服務(wù)器發(fā)出請求的函數(shù)，并用返回的結(jié)果更新網(wǎng)頁；
  • 定義服務(wù)器端邏輯：我們必須定義一個響應(yīng)客戶端請求的視圖。

首先我們得先下載一個Ajax庫，我們選擇了當(dāng)下比較流行的Jquery庫，這是官方的下載地址：http://code.jquery.com/jquery-2.1.1.min.js，你也可以呆會直接下載我們的源代碼包，那里已經(jīng)給你準備好了這個文件。

下載好jquery后，在項目根文件夾下建立一個media文件夾，然后再在其下建立一個js文件夾，將jquery-2.1.1.min.js文件放到j(luò)s文件夾下，這樣，文件夾的結(jié)構(gòu)會是下面這個樣子：

liveproject/
    manage.py
    liveproject/
    liveblog/
    media/
        js/
        jquery-2.1.1.min.js

接下來我們要修改模板，把下面的代碼加入到”</style>“和”</head>”之間：

liveblog/templates/liveblog/update_list.html：

        <script type="text/javascript" language="javascript"
            src="/media/js/jquery-2.1.1.min.js"></script>
        <script type="text/javascript" language="javascript">
            function update() {
                update_holder = $("#update-holder");
                most_recent = update_holder.find("div:first");
                $.getJSON("updates-after/" + most_recent.attr('id') + "/",
                    function(data) {
                        cycle_class = most_recent.hasClass("odd")
                            ? "even" : "odd";
                        jQuery.each(data, function() {
                            update_holder.prepend('<div id="' + this.pk
                                + '" class="update "' + cycle_class
                                + '"><div class="timestamp">'
                                + this.fields.timestamp.replace('T',' ')
                                + '
<div class="text">' + this.fields.text + '
<div class="clear">
' ); cycle_class = (cycle_class == "odd") ? "even" : "odd"; }); } ); } $(document).ready(function() { setInterval("update()", 15000); }) </script>

然后我們編輯liveblog/views.py 文件，讓它變成下面這樣：

liveblog/views.py： 

from django.http import HttpResponse
from django.core import serializers
from django.views import generic

from liveblog.models import Update


def updates_after(request, id):
    response = HttpResponse()
    response['Content-Type'] = "text/javascript"
    response.write(serializers.serialize("json", Update.objects.filter(pk__gt=id)))
    return response

class IndexView(generic.ListView):
    template_name = 'liveblog/update_list.html'
    def get_queryset(self):
        return Update.objects.all()

這里我們利用了Django內(nèi)置的序列化庫，把模型對象轉(zhuǎn)換成json格式，再把它寫到HttpRespose里去。最后，要讓JavaScript能正確解析和使用響應(yīng)的正文，還需要在響應(yīng)里設(shè)置Content-Type頭。

最后需要修改URL模式，編輯liveblog/urls.py 文件，讓它變成下面這樣：

liveblog/urls.py ： 

from django.conf.urls import patterns, include, url
from liveblog import views


urlpatterns = patterns('',
    url(r'^$', views.IndexView.as_view(), name='index'),
    url(r'^updates-after/(?P<id>\d+)/$', views.updates_after, name='updates_after'),
    )

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

liveproject/urls.py ： 

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

urlpatterns = patterns('',
    url(r'^admin/', include(admin.site.urls)),
    url(r'^live/', include('liveblog.urls')),
    url(r'^(?P<path>.*)', 'django.views.static.serve'),
)

做完上述工作后，我們可以去測試一下，先刷新一下瀏覽器，然后到后臺新增一個update,比如叫”我的第二條消息“，回到首頁（http://127.0.0.1/live/),不要刷新頁面，觀察新添加的內(nèi)容有無被自動刷新。

 

附：本實例源代碼下載地址：舍得學(xué)苑下載中心

 

【The End】

本文版權(quán)歸舍得學(xué)苑所有，歡迎轉(zhuǎn)載，轉(zhuǎn)載請注明作者和出處。謝謝！
作者：舍得
首發(fā)：舍得學(xué)苑@博客園

 
向AI問一下細節(jié)
推薦閱讀：
  1. 【從0開始Python開發(fā)實戰(zhàn)】Django集成Celery
  2. 【從0開始Python開發(fā)實戰(zhàn)】Django集成Redis，

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

猜你喜歡

AI
助
手