簡易博客開發（3） ---- url, view, template三部曲

用戶首先在瀏覽器中輸入網址即URL，也是Django的入口

匹配views中的函數進行邏輯控制

再在template中的html頁面中顯示出來

最簡易的機制

#/myblog/myblog/urls.py
  1 """myblog URL Configuration                                                                           
  2                                                                                                       
  3 The `urlpatterns` list routes URLs to views. For more information please see:                         
  4     https://docs.djangoproject.com/en/1.8/topics/http/urls/                                           
  5 Examples:                                                                                             
  6 Function views                                                                                        
  7     1. Add an import:  from my_app import views                                                       
  8     2. Add a URL to urlpatterns:  url(r'^$', views.home, name='home')                                 
  9 Class-based views                                                                                     
 10     1. Add an import:  from other_app.views import Home                                               
 11     2. Add a URL to urlpatterns:  url(r'^$', Home.as_view(), name='home')                             
 12 Including another URLconf                                                                             
 13     1. Add a URL to urlpatterns:  url(r'^blog/', include('blog.urls'))                                
 14 """                                                                                                   
 15 from django.conf.urls import include, url                                                             
 16 from django.contrib import admin                                                                      
 17 from blog import views                                                                                
 18                                                                                                       
 19 urlpatterns = [                                                            #1.8之前不是列表是元組                                                                                   
 20                                                           
 21     url(r'^admin/', include(admin.site.urls)),                                                        
 22     url(r'^$', views.index, name='index'),                                 #入口匹配http://192.168.2.111:8000                                                      
 23 ]

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     return HttpResponse('hello world')   

前端顯示

爲了使得先後端分開，咱們通常所頁面保存在templates目錄中，後臺只顯示頁面，而前端具體如何實現則交給前端工程師去處理

在blog下面新建一個templates目錄，新建index.html

#/myblog/blog/templates/index.html
<h1>hello world</h1>

修改views.py渲染index.html到前端

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     return render_to_response('index.html')

前端顯示

至此前端與後端分開，後端專一於views,url的設計，前端專一於template中的html編寫，今天並不打算具體寫項目中的代碼，而是做爲一個web工程師，雖而後端是工做本質，但前端也要有所瞭解，今天介紹一個輕量級的前端css工具， Pure，它可讓咱們這些對前端不太瞭解的人也能像樣的寫一些簡易的頁面出來，具體學習在 http://www.purecss.org

柵格

柵格class 與 單元格class
    Pure柵格系統有兩種class組成：柵格 class (pure-g) 和 單元格 class (pure-u 或 pure-u-*)。柵格相似Excel的表格，由單元格組成。 
單元格的寬度是分數
    單元格用不一樣的class名錶示寬度。好比 pure-u-1-2 表示寬1/2即50%， 一樣 pure-u-1-5 表示寬1/5即20%。 
柵格的全部子元素必須是單元格
    柵格，即class名包含pure-g的元素，它的子元素必須是單元格，即class名包含 pure-u 或 pure-u-*的元素。 
內容在單元格中
    全部須要顯示的內容都要放在單元格中。這樣才能保證內容正確的顯示。

菜單

添加class pure-menu-horizontal 可實現橫向菜單效果，選中菜單class：pure-menu-selected
菜單默認就是縱向的，添加classpure-menu就能夠了，添加pure-menu-open顯示菜單
給<a>添加classpure-menu-disabled可實現禁用的效果    
給<ul>加classpure-paginator可實現分頁效果，若是再添加pure-button可實現按鈕效果

表格

給table添加class pure-table 能夠添加默認的padding、border，同時突出表頭
在默認表格上加classpure-table-bordered
在默認表格上加classpure-table-horizontal
爲了讓比較大的表格看起來容易區分行。隔行添加classpure-table-odd可實現斑馬紋的效果

按紐

給<a> 或者 <button> 元素添加class pure-button，可實現默認按鈕樣式
先添加classpure-button，再加pure-button-disabled
一樣先添加pure-button，而後再添加pure-button-active就能夠實現「激活/按下」的效果
添加classpure-button和pure-button-primary

表單

給<form>加個classpure-form就能夠建立默認的單行表單    橫向
加了classpure-form後，再加個classpure-form-stacked 縱向
仍是先給<form>標籤加默認classpure-form，而後再加pure-form-aligned 對齊
標籤<fieldset>加classpure-group而後把input包起來，可實現分組的效果，適合註冊表單

從新編寫前端博客基礎框架base.html

1 <!doctype html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="utf-8">
  5     <meta name="viewport" content="width=device-width, initial-scale=1">                          #響應式
  6     <meta name="description" content="show a blog">
  7         <title>Blog &ndash; Layout Exapmles &ndash; Pure</title>
  8 <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0/pure-min.css">
  9 <link rel="stylesheet" href="http://picturebag.qiniudn.com/blog.css">                             #pure免費博客模板
 10 <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0/grids-responsive-min.css">
 11 <div id="layout" class="pure-g">                                                                  #柵格
 12     <div class="sidebar pure-u-1 pure-u-md-1-4">                                                  #寬度1/4
 13         <div class="header">
 14             <h1 class="brand-title">terry ding blog</h1>
 15             <h2 class="brand-tagline">Welcome to this Blog</h2>
 16             <nav class="nav">
 17                 <ul class="nav-list">
 18                     <li class="nav-item">
 19                         <a class="pure-button" href="#">Blog</a>
 20                     </li>
 21                     <li class="nav-item">                          
 22                         <a class="pure-button" href="#">Tag</a>
 23                     </li>                                          
 24                     <li class="nav-item">                          
 25                         <a class="pure-button" href="#">Post</a>
 26                     </li>                                          
 27                     <li class="nav-item">                          
 28                         <a class="pure-button" href="#">About</a>
 29                     </li>                                          
 30                 </ul>
 31             </nav>      
 32         </div>      
 33     </div> 
 34     
 35     <div class="content pure-u-1 pure-u-md-3-4">                                           #博客內容                                          
 36         <div>                                                                               
 37         </div>                                                                              
 38     </div>                                                                                  
 39                                                                                             
 40 </div>                                                                                      
 41 </body>                                                                                     
 42 </html>  

修改視圖函數把這個框架show出來

/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     return render_to_response('base.html') 

這個頁面經過django演染的效果如圖

有了pure以及免費的博客模板，咱們就能夠在此基礎上添加博文以及其它的feature