簡易博客開發(4)---- blog 開發邏輯

首先設計博客主頁,前面根據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>&nbsp
 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>&nbsp
  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 %}



post.html提供了三個輸入框,分別是title, tags, textarea

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 )
相關文章
相關標籤/搜索