首先設計博客主頁,前面根據Pure,製做了一個基本的博客框架,如今就要向這個框架裏添加內容,毫無疑問仍然是url, template, views三部曲結合的結果,首先設計url使得url更加結構化,及引用方便 css
修改myblog/urls.py html
#/myblog/myblog/urls.py #全局入口 1 from django.conf.urls import include, url 2 from django.contrib import admin 3 from blog import views 4 5 urlpatterns = [ 6 url(r'^blog/', include('blog.urls')), #http://serverIP:8000/blog 匹配blog裏面的urls 7 url(r'^admin/', include(admin.site.urls)), 8 ]
這樣每一個應用都有本身的url,設計上進一步進行應用級別上的分離 前端
新增blog/urls.py python
#/myblog/blog/urls.py 1 from django.conf.urls import patterns, include, url 2 3 from django.contrib import admin 4 5 from blog import views 6 7 urlpatterns =[ 8 url(r'^$', views.index, name='index'), #http://serverIP:8000/blog 調用views.index方法 9 ]
修改視圖文件,傳blogs, tags參數到index.html頁面中 數據庫
#/myblog/blog/views.py 1 from django.shortcuts import render,render_to_response 2 3 # Create your views here. 4 from blog.models import Blog,Tag, Author 5 from django.http import HttpResponse, Http404, HttpResponse,HttpResponseRedirect 6 7 def index(request): 8 blogs = Blog.objects.all() 9 tags = Tag.objects.all() 10 return render_to_response('index.html',{'blogs':blogs, #render_to_response經過字典傳參 11 'tags': tags,})新增index.html,這個文件繼承於base.html,這是django中template的繼承特質,意味着繼承了base的博客框架,並加上本身的特性(博客題目,博客標籤,博客內容)
1 {% extends "base.html" %} #繼承base並進行擴展 2 {% block content %} #下面的內容代替base.html中的{%block content%}{%endblock%} 3 <div class = "posts"> 4 {% for blog in blogs %} #template中的html仍然能夠編程,如for,if這也是django的特質 5 <section class="post"> 6 <header class="post-header"> 7 <h2 class= "post-title"><a href="#">{{blog.title}}</a><h2> #{{var}}變量由雙大括號括起來,由視圖函數傳過來 8 <p class = "post-meta"> 9 Time: <a class="post-author" href="#">{{blog.date_time | date:'Y M d'}}</a>  10 Tag: 11 {% for tag in tags %} 12 <a class="post-category" href="#">{{tag.tag_name}}</a> 13 {% endfor %} 14 </p> 15 </header> 16 17 <div class="post-description"> 18 <p> 19 {{blog.content}} 20 </p> 21 </div> 22 </section> 23 {% endfor %} 24 {% endblock %}修改後的前端顯示以下:
可見用到的url是blog/urls.py, 博客顯示在右3/4處,包含標題,時間,標籤,內容,這是一個主頁,如何才能單篇博客詳細查看呢 django
三部曲之一: 增長url 編程
#/myblog/blog/urls.py 1 from django.conf.urls import patterns, include, url 2 3 from django.contrib import admin 4 5 from blog import views 6 7 urlpatterns =[ 8 url(r'^$', views.index, name='index'), #http://serverIP:8000/blog 調用views.index方法 9 url(r'^(?P<id>(\d+))/$', views.detail, name='detail'), #傳參數id給視圖函數detail進行處理 10 ]三部曲之二:修改views.py
#/myblog/blog/views.py 1 from django.shortcuts import render,render_to_response 2 3 # Create your views here. 4 from blog.models import Blog,Tag, Author 5 from django.http import HttpResponse, Http404, HttpResponse,HttpResponseRedirect 6 7 def index(request): 8 blogs = Blog.objects.all() 9 tags = Tag.objects.all() 10 return render_to_response('index.html',{'blogs':blogs, 11 'tags': tags,}) 12 def detail(request,id): #參數由url傳過來 13 try: 14 blog = Blog.objects.get(id=id) #檢查該博客是否存在 15 except Blog.DoesNotExist: 16 raise Http404 17 return render_to_response('detail.html',{'blog':blog}) #返回一個單獨博客頁面三部曲之三: templates, 須要作兩步
step 1: 單獨博客頁面的入口是在主頁中點擊該博客的標題進入的,因此要修改連接 session
#/myblog/blog/templates/index.html <h2 class= "post-title"><a href="#">{{blog.title}}</a><h2> => <h2 class= "post-title"><a href="{% url 'detail' id=blog.id %}">{{blog.title}}</a><h2> #超連接到 http://serverIP:8000/blog/blog.id
step 2: 新增一個單獨博客的頁面,本來是顯示全部博客,只須要顯示一個博客,所以只要在主頁基礎上去掉循環便可 框架
#/myblog/blog/templates/detail.html 相對於index.html只是把循環去掉,題目再也不有超連接 1 {% extends "base.html" %} 2 {% block content %} 3 <div class = "posts"> 4 <section class="post"> 5 <header class="post-header"> 6 <h2 class= "post-title">{{blog.title}}<h2> 7 <p class = "post-meta"> 8 Time: <a class="post-author" href="#">{{blog.date_time | date:'Y M d'}}</a>  9 Tag: 10 {% for tag in blog.tags.all %} 11 <a class="post-category" href="#">{{tag.tag_name}}</a> 12 {% endfor %} 13 </p> 14 </header> 15 16 <div class="post-description"> 17 <p> 18 {{blog.content}} 19 </p> 20 </div> 21 </section> 22 {% endblock %}點擊標題後的單個博客顯示效果
單個博客顯示成功,那麼若是要發表文章的話則須要一個新的post.html專門用於寫博客,這邊分兩步走: 函數
step 1 提供一個寫博客的頁面 post.html
#/myblog/blog/templates/post.html 1 {% extends "base.html" %} 2 {% block content %} 3 <style type="text/css"> #content輸入框的大小 4 textarea { 5 resize: none; 6 width: 600px; 7 height: 200px; 8 } 9 </style> 10 <div class = "posts"> 11 <section class="post"> 12 <form action={% url 'blog_add' %} class="pure-form pure-form-stacked" method="post"> #form的動做是http://serverIP:8000/blog_add 數據傳輸方式爲POST 13 <label>title</label> 14 <input name="title" type="text"> #django經過input name屬性來取值 15 <label>tags</label> 16 <input class="pure-input-1-4" name="tags" type="text"> 17 <label>content</label> 18 <textarea width:400px height:600px name='content'>content</textarea> 19 <button class="pure-button" type="submit">Submit</button> 20 </form> 21 </section> 22 {% endblock %}
step 2 在post.html寫博客並把寫的數據存入數據庫,在視圖中的方法是blog_add
#/myblog/blog/urls.py 1 from django.conf.urls import patterns, include, url 2 3 from django.contrib import admin 4 5 from blog import views 6 7 urlpatterns =[ 8 url(r'^$', views.index, name='index'), 9 url(r'^(?P<id>(\d+))/$', views.detail, name='detail'), 10 url(r'^post/$', views.post, name='post'), #在主頁中點擊post按鈕,跳轉到post.html 11 url(r'^blog_add/$', views.blog_add, name='blog_add'), #把post.html輸入的內容存到數據庫中 12 ]增長視圖函數
#/myblog/blog/views.py 21 def post(request): #跳轉到post.html,這一步能夠直接在前端實現 22 return render_to_response('post.html') 23 24 def blog_add(request): 25 content = request.POST.get('content') #在前端經過POST發送content數據給後臺 26 author = Author.objects.get(name='terry') #做者暫定爲terry,之後能夠根據實際登陸人做爲做者 27 title = request.POST.get('title') #在前端經過POST發送title數據給後臺 28 tag_name = request.POST.get('tags') #在前端經過POST發送tags數據給後臺 28 tag_name_string= request.POST.get('tags') #tag_name字符串是咱們輸入的一串tags以逗號隔開 29 tag_name_list = tag_name_string.split(',') #經過split函數據全部的tag分裝在列表中 30 tags = Tag.objects.all() #原先就有的tags 31 for tag_name in tag_name_list: #雙重循環作的是若是輸入的一串標籤中原先沒有的,就新建一個標籤 32 for tag in tags: 33 if tag_name==tag.tag_name: 34 break 35 else: 36 Tag.objects.create(tag_name=tag_name) 37 blog=Blog.objects.create(title=title, #新建博客寫入數據庫中 38 author=author, 39 content=content, 40 ) 41 for tag_name in tag_name_list: 42 blog.tags.add(Tag.objects.get(tag_name=tag_name)) #給博客加入標籤 44 id= Blog.objects.order_by('-date_time')[0].id #查找最新文章的id 45 return HttpResponseRedirect('/blog/%s' %id) #數據輸入到數據庫這是後臺作的事,前端顯示該博客的單篇博客詳細內容比較合適測試在post.html中輸入數據
After Submit:
可見新建的數據已經顯示出來了,但問題也隨之出現,在輸入的時候是有回車的,可是顯示卻沒有分行,這個功能須要優化
注: 若是數據是POST方式傳到後臺須要註釋掉settings.py中的csrf,這不是好的方式,之後再進行研究django的中間件,不然因爲django的保護,post傳不到後臺
#/myblog/myblog/settings.py 43 MIDDLEWARE_CLASSES = ( 44 'django.contrib.sessions.middleware.SessionMiddleware', 45 'django.middleware.common.CommonMiddleware', 46 # 'django.middleware.csrf.CsrfViewMiddleware', 47 'django.contrib.auth.middleware.AuthenticationMiddleware', 48 'django.contrib.auth.middleware.SessionAuthenticationMiddleware', 49 'django.contrib.messages.middleware.MessageMiddleware', 50 'django.middleware.clickjacking.XFrameOptionsMiddleware', 51 'django.middleware.security.SecurityMiddleware', 52 )