這是《Django Web開(kāi)發(fā)指南》中的最后一個(gè)實(shí)例。如果說(shuō)上一個(gè)實(shí)例Liveblog重點(diǎn)講的是Django和Ajax的協(xié)作,那么我們?cè)赑astebin中,將學(xué)習(xí)到Django和高亮語(yǔ)法JS的協(xié)作,順便復(fù)習(xí)一下在Django中加入表單。
新邵網(wǎng)站制作公司哪家好,找創(chuàng)新互聯(lián)!從網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站建設(shè)、微信開(kāi)發(fā)、APP開(kāi)發(fā)、成都響應(yīng)式網(wǎng)站建設(shè)等網(wǎng)站項(xiàng)目制作,到程序開(kāi)發(fā),運(yùn)營(yíng)維護(hù)。創(chuàng)新互聯(lián)于2013年成立到現(xiàn)在10年的時(shí)間,我們擁有了豐富的建站經(jīng)驗(yàn)和運(yùn)維經(jīng)驗(yàn),來(lái)保證我們的工作的順利進(jìn)行。專注于網(wǎng)站建設(shè)就選創(chuàng)新互聯(lián)。
1.創(chuàng)建項(xiàng)目和應(yīng)用
我們先來(lái)創(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
接下來(lái)開(kāi)始創(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 datetimefrom django.db import modelsfrom 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})
首先修改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í)候,建議順便修改一下語(yǔ)言和時(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ù)庫(kù)就建好了。
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 adminfrom 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
http://127.0.0.1:8000/admin/
然后輸入你剛才創(chuàng)建的管理員賬號(hào)和密碼,登錄管理界面,你可以先嘗試添加一些東西,或者,什么都不做。
7.創(chuàng)建表單我們希望訪問(wèn)者可以直接在頁(yè)面上粘貼他們的代碼,下面我們來(lái)創(chuàng)建一個(gè)表單,實(shí)現(xiàn)這個(gè)功能。
在pastebin下創(chuàng)建forms.py文件,添加下面的內(nèi)容:
pastebin/forms.py:
from django import formsfrom pastebin.models import Paste class PasteForm(forms.ModelForm): class Meta: model= Paste fields= ('title', 'poster', 'syntax', 'content')
我們這里用了一個(gè)ModelForm,它可以直接繼承我們的Paste模型,只要告訴它,我們需要用到哪些字段就行。
8.編寫視圖接下來(lái)我們開(kāi)始編寫視圖,
編輯pastebin/views.py 文件,添加下面的內(nèi)容:
pastebin/views.py:
from django.template import RequestContextfrom django.shortcuts import render_to_responsefrom django.views import genericfrom pastebin.models import Pastefrom pastebin.forms import PasteFormfrom django.core.urlresolvers import reversefrom 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,通用視圖勝在簡(jiǎn)單,只要指定一下模型和模板名稱就可以了。
注意create_info這個(gè)視圖,在這里,我們們將request.POST數(shù)據(jù)(就是訪問(wèn)者在表單中提交上來(lái)的數(shù)據(jù))交給PasteForm來(lái)處理,PasteForm會(huì)做一個(gè)儲(chǔ)存動(dòng)作,然后跳轉(zhuǎn)到success_url,還記得我們?cè)谇懊娴膶?shí)例中學(xué)過(guò)的reverse函數(shù)嗎?它可以將它可以將'pastebin:display_info'轉(zhuǎn)換成首頁(yè)的鏈接,你也可以嘗試修改成功提交表單后跳轉(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:’'
{% block title %}{% endblock %} 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; } Pastebin
{% block content %}{% endblock %}
新增 • 列出全部
接下來(lái)我們要從這個(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 %}最近粘帖
創(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 %}` object `
語(yǔ)言: ` object`.`get_syntax_display `
日期: {{ object.timestamp|date:"r" }}
` object`.`content `
我們?cè)谏厦孢@個(gè)模板中加入了顯示代碼高亮的腳本,注意這一行:
` object`.`content `
”brush”后面的“{{ object.get_syntax_display|lower }}”實(shí)質(zhì)上就是我們?cè)趍odels.py中“SYNTAX_CHOICES”的一項(xiàng)內(nèi)容,比如css、python等。我們使用了一個(gè)叫Syntax Highlighter的代碼著色工具,應(yīng)用起來(lái)非常簡(jiǎn)單,分成三步:
呆會(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 %}隨心貼
標(biāo)題: ` form`.`title `
作者: ` form`.`poster `
語(yǔ)言: ` form`.`syntax `
` form`.`content `
{% endblock %}
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, urlfrom pastebin import views urlpatterns= patterns('', url(r'^$', views.IndexView.as_view(), name='display_info'), url(r'^(?P\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, urlfrom django.contrib import admin urlpatterns= patterns('', url(r'^admin/', include(admin.site.urls)), url(r'^paste/', include('pastebin.urls', namespace="pastebin")), )
現(xiàn)在什么都沒(méi)有,讓我們點(diǎn)擊上方的“新增”鏈接來(lái)加入一些內(nèi)容:
輸入完后點(diǎn)擊“粘貼”按鈕,會(huì)跳轉(zhuǎn)回首頁(yè):
點(diǎn)擊“Pastebin的css(CSS)”這個(gè)鏈接,看一下效果:
看到了吧?我們的代碼已經(jīng)被著上了相應(yīng)的顏色。你也可以嘗試粘貼一些其它類型的代碼。
附:本實(shí)例源代碼下載地址:舍得學(xué)苑下載中心
【The End】
本文版權(quán)歸舍得學(xué)苑所有,歡迎轉(zhuǎn)載,轉(zhuǎn)載請(qǐng)注明作者和出處。謝謝!
作者:舍得
首發(fā):舍得學(xué)苑@博客園