简易博客开发（3） ---- url, view, template三部曲-CSDN博客

用户首先在浏览器中输入网址即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演染的效果如图