溫馨提示×

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

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

實(shí)戰(zhàn)Django：Pastebin

發(fā)布時(shí)間：2020-07-14 12:07:24 來源：網(wǎng)絡(luò) 閱讀：915 作者：chongeryan 欄目：web開發(fā)

 

這是《Django Web開發(fā)指南》中的最后一個(gè)實(shí)例。如果說上一個(gè)實(shí)例Liveblog重點(diǎn)講的是Django和Ajax的協(xié)作，那么我們?cè)赑astebin中，將學(xué)習(xí)到Django和高亮語法JS的協(xié)作，順便復(fù)習(xí)一下在Django中加入表單。

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

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

$ django-admin startproject pastebinproject

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

cd pastebinproject

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

$ python manage.py startapp pastebin

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

2.建立模型

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

pastebin/models.py：

import datetime
from django.db import models
from django.db.models import permalink

class Paste(models.Model):
    """A single pastebin item"""
    
    SYNTAX_CHOICES = (
        (0, "Plain"), 
        (1, "Python"), 
        (2, "HTML"), 
        (3, "SQL"), 
        (4, "Javascript"),
        (5, "CSS"),
        )

    content = models.TextField()
    title = models.CharField(blank=True, max_length=30)
    syntax = models.IntegerField(max_length=30, choices=SYNTAX_CHOICES, default=0)
    poster = models.CharField(blank=True, max_length=30)
    timestamp = models.DateTimeField(auto_now_add=True, blank=True)
        
    class Meta:
        ordering = ('-timestamp',)
        
    def __str__(self):
        return "%s (%s)" % (self.title or "#%s" % self.id, self.get_syntax_display()) 

    @permalink
    def get_absolute_url(self):
        return ('paste_detail', 
            None, {'pk': self.id})
3.激活模型

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

pastebinproject/settings.py：

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

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

然后在dos命令提示符下運(yùn)行如下命令：

$ python manage.py makemigrations pastebin

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

$ python manage.py migrate

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

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

在dos命令提示符下運(yùn)行如下命令： 

$ python manage.py createsuperuser

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

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

編輯pastebin/admin.py 文件，讓它變成下面這個(gè)樣子：

pastebin/admin.py：

from django.contrib import admin
from pastebin.models import Paste

class PasteAdmin(admin.ModelAdmin):
    list_display = ('__str__', 'title', 'poster', 'syntax', 'timestamp')
    list_filter = ('timestamp', 'syntax')

admin.site.register(Paste, PasteAdmin)

6.啟動(dòng)服務(wù)器

在dos命令提示符下運(yùn)行如下命令：

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

然后輸入你剛才創(chuàng)建的管理員賬號(hào)和密碼，登錄管理界面，你可以先嘗試添加一些東西，或者，什么都不做。

7.創(chuàng)建表單

我們希望訪問者可以直接在頁面上粘貼他們的代碼，下面我們來創(chuàng)建一個(gè)表單，實(shí)現(xiàn)這個(gè)功能。

在pastebin下創(chuàng)建forms.py文件，添加下面的內(nèi)容：

pastebin/forms.py：

from django import forms
from pastebin.models import Paste

class PasteForm(forms.ModelForm):
  
    class Meta:
        model = Paste
        fields = ('title', 'poster', 'syntax', 'content')

我們這里用了一個(gè)ModelForm,它可以直接繼承我們的Paste模型，只要告訴它，我們需要用到哪些字段就行。

8.編寫視圖

接下來我們開始編寫視圖，

編輯pastebin/views.py 文件，添加下面的內(nèi)容：

pastebin/views.py：

from django.template import RequestContext
from django.shortcuts import render_to_response
from django.views import generic
from pastebin.models import Paste
from pastebin.forms import PasteForm
from django.core.urlresolvers import reverse
from django.http import HttpResponseRedirect

class IndexView(generic.ListView):
    model = Paste
    template_name = 'pastebin/paste_list.html'
        
class DetailView(generic.DetailView):
    model = Paste
    template_name = 'pastebin/paste_detail.html'

def create_info(request):
    context = RequestContext(request)

    if request.method == 'POST':
        form = PasteForm(request.POST)
        if form.is_valid():
            form.save(commit=True)
            success_url = reverse('pastebin:display_info')
            return HttpResponseRedirect(success_url)
        else:
            print (form.errors)
    else:
        form = PasteForm()

    return render_to_response('pastebin/paste_form.html', {'form': form}, context)

前兩個(gè)視圖我們?nèi)匀皇褂猛ㄓ靡晥D,通用視圖勝在簡單,只要指定一下模型和模板名稱就可以了。

注意create_info這個(gè)視圖，在這里，我們們將request.POST數(shù)據(jù)（就是訪問者在表單中提交上來的數(shù)據(jù)）交給PasteForm來處理，PasteForm會(huì)做一個(gè)儲(chǔ)存動(dòng)作，然后跳轉(zhuǎn)到success_url,還記得我們?cè)谇懊娴膶?shí)例中學(xué)過的reverse函數(shù)嗎？它可以將它可以將'pastebin:display_info'轉(zhuǎn)換成首頁的鏈接，你也可以嘗試修改成功提交表單后跳轉(zhuǎn)的鏈接。

9.編寫模板

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

隨后我們?cè)谶@個(gè)文件夾下創(chuàng)建base.html文件，這個(gè)base.html文件的正確路徑應(yīng)該是：

pastebin/templates/pastebin/base.html

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

pastebin/templates/pastebin/base.html：’'

<html>
<head>
<title>{% block title %}{% endblock %}</title>
<style type="text/css">
            body { padding: 0 2em; font-family: Microsoft Yahei,sans-serif; background: #fff; }
            h2 { background: #255074; padding: 1 0.8em; margin: 0;  color:#fefefe; }
            h3 { background: #3776AB; padding: 8 1em; margin: 0;  color:#E9D143; }
            h5 { background: #1E2933; padding: 1 1.5em; margin: 0; color:#fefefe;}
            p { background: #3776AB; padding: 8 2em; margin: 0;  color:#fefefe;  font-size:12px; }
            p a { text-decoration: none; color: #fefefe; }
            pre { padding: 20px; background: #ddd; }
            li { padding: 5 0em;  background: #fff; }
            form { padding: 5 2em;  font-size:12px; background: #fff; }
</style>
</head>
<body>
    <h5>Pastebin</h5>
    <p><a href="{% url 'pastebin:create_info' %}">新增</a> &bull; <a href="{% url 'pastebin:display_info' %}">列出全部</a></p>
    {% block content %}{% endblock %}
</body>
</html>

接下來我們要從這個(gè)base.html模板擴(kuò)展出三個(gè)模板，先創(chuàng)建paste_list.html文件，添加以下內(nèi)容：

pastebin/templates/pastebin/paste_list.html：

{% extends "pastebin/base.html" %}
{% block title %}最近粘帖{% endblock %}
{% block content %}
<h3>最近粘帖</h3>
<ul>
    {% for object in object_list %}
    <li><a href="{% url 'pastebin:paste_detail'  object.id %}">` object `</a></li>
    {% endfor %}
</ul>
{% endblock %}

創(chuàng)建paste_detail.html文件，添加以下內(nèi)容：

pastebin/templates/pastebin/paste_detail.html：

{% extends "pastebin/base.html" %}
{% load staticfiles %}

{% block title %}` object `{% endblock %}
{% block content %}
<h3>` object `</h3>
<p>語言: ` object`.`get_syntax_display `<br>
日期: {{ object.timestamp|date:"r" }}</p>
<code><pre name="code" class="brush: {{ object.get_syntax_display|lower }}">
` object`.`content `</pre></code>

<script language="javascript" src="{% static 'js/shCore.js' %}"></script>
<script language="javascript" src="{% static 'js/shBrushPlain.js' %}"></script> 
<script language="javascript" src="{% static 'js/shBrushPython.js' %}"></script> 
<script language="javascript" src="{% static 'js/shBrushXml.js' %}"></script>
<script language="javascript" src="{% static 'js/shBrushJscript.js' %}"></script>
<script language="javascript" src="{% static 'js/shBrushSql.js' %}"></script>
<script language="javascript" src="{% static 'js/shBrushCss.js' %}"></script>
<link type="text/css" rel="stylesheet"
    href="{% static 'css/shCore.css' %}"></link>
<link type="text/css" rel="stylesheet"
    href="{% static 'css/shThemeDefault.css' %}"></link>
<script type="text/javascript">
SyntaxHighlighter.config.clipboardSwf = "{% static 'js/clipboard.swf' %}";
SyntaxHighlighter.all();
</script>
{% endblock %}

我們?cè)谏厦孢@個(gè)模板中加入了顯示代碼高亮的腳本，注意這一行：

<prename="code" class="brush: {{ object.get_syntax_display|lower }}">
` object`.`content `</pre>

”brush”后面的“{{ object.get_syntax_display|lower }}”實(shí)質(zhì)上就是我們?cè)趍odels.py中“SYNTAX_CHOICES”的一項(xiàng)內(nèi)容，比如css、python等。我們使用了一個(gè)叫Syntax Highlighter的代碼著色工具，應(yīng)用起來非常簡單，分成三步：

  • 逐個(gè)導(dǎo)入腳本，從shCore.js到shBrushCss.js；
  • 鏈接css文件：shCore.css和shThemeDefault.css；
  • 加入SyntaxHighlighter.all()語句;

呆會(huì)我們?cè)僭敿?xì)講Syntax Highliter相關(guān)的設(shè)置。

最后創(chuàng)建paste_form.html文件，添加以下內(nèi)容：

pastebin/templates/pastebin/paste_form.html：

{% extends "pastebin/base.html" %}
{% block title %}新增{% endblock %}
{% block content %}
<h3>隨心貼</h3>
<form action="" method="POST">
<span class="form">
標(biāo)題: ` form`.`title `<br>
作者: ` form`.`poster `<br>
語言: ` form`.`syntax `<br>
` form`.`content `<br>
<input type="submit" name="submit" value="粘貼" id="submit">
</span>
</form>

{% endblock %}

因?yàn)槲覀兊哪０逦募惺褂昧酥形模砸宦室獌?chǔ)存為UTF-8編碼。

10.Syntax Highlighter

先下載Syntax Highlighter,下載地址：Synatax Highlighter 2.1..364.或者，你也可以直接在本文的末尾下載實(shí)例的源代碼。

下載后,先解壓.然后在我們的項(xiàng)目根文件夾下創(chuàng)建一個(gè)static文件夾，再在static下創(chuàng)建pastebin,在pastebin下分別創(chuàng)建css和js文件夾，其文件夾的結(jié)構(gòu)象下面這樣：

pastebinproject/
    manage.py
    pastebinproject/
    pastebin/
    static/
        pastebin/
            css/
            js/

將Syntax Highlighter中的scripts下的文件復(fù)制到j(luò)s文件夾下，將styles文件夾下的文件復(fù)制到css文件夾下。

注意：可以只復(fù)制我們?cè)趐aste_detail用到的.js和.css文件。

做完上述工作后，我們需要修改一下設(shè)置文件，編輯settings.py文件，在文件末尾加入如下內(nèi)容：

pastebinproject/settings.py： 

STATIC_PATH = os.path.join(BASE_DIR, 'static')
STATICFILES_DIRS = (
    STATIC_PATH,
)

STATIC_PATH指明了static這個(gè)文件夾的絕對(duì)路徑，這里的BASE_DIR就是我們的項(xiàng)目根文件夾。

STATICFILES_DIRS旨在告訴Django，可以從哪些文件夾中去搜索靜態(tài)文件。

設(shè)置完后，我們可以在瀏覽器地址欄中輸入如下內(nèi)容：

http://127.0.0.1:8000/static/css/shCore.css

若能看到文件的內(nèi)容（而非錯(cuò)誤提示），則表示靜態(tài)文件的設(shè)置生效了。

11.設(shè)計(jì)URL

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

pastebin/urls.py ： 

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

urlpatterns = patterns('',
    url(r'^$', views.IndexView.as_view(),  name='display_info'),
    url(r'^(?P<pk>\d+)/$', views.DetailView.as_view(), name='paste_detail'),
    url(r'^add/$', views.create_info, name='create_info'),
)

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

lpastebinproject/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'^paste/', include('pastebin.urls', namespace="pastebin")),
)

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

實(shí)戰(zhàn)Django：Pastebin

現(xiàn)在什么都沒有，讓我們點(diǎn)擊上方的“新增”鏈接來加入一些內(nèi)容：

實(shí)戰(zhàn)Django：Pastebin

輸入完后點(diǎn)擊“粘貼”按鈕,會(huì)跳轉(zhuǎn)回首頁：

實(shí)戰(zhàn)Django：Pastebin

 

點(diǎn)擊“Pastebin的css(CSS)”這個(gè)鏈接，看一下效果：

實(shí)戰(zhàn)Django：Pastebin

看到了吧？我們的代碼已經(jīng)被著上了相應(yīng)的顏色。你也可以嘗試粘貼一些其它類型的代碼。

 

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

 

【The End】

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

 
向AI問一下細(xì)節(jié)

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

AI
助
手