Django学习笔记3:前台页面

从“Hello World”开始

似乎每个编程教程都会由一个类似"Hello World"的实例程序开始,大狗决定也遵从这个惯例。

首先,打开blog目录下的views.py文件,在其中加入下面的代码:

# encoding:utf-8
from django.shortcuts import render
from django.http import HttpResponse

def index(reqeust):
    return HttpResponse('学而时习之,不亦说乎')

在上面的代码中,我们创建了一个函数,接受一个HttpRequest参数,返回一个字符串形式的HttpResponse。

要想在浏览器中显示我们预想的内容,我们还需要为这个视图“绑定”一个地址,即URL。首先,我们在blog目录中创建一个名称为urls.py的文件,在其中输入以下内容:

from django.conf.urls import url
from . import views

urlpatterns = [
    url(r'^$', views.index, name = 'index')
]

通过上面的代码,我们将views.py中声明的index视图函数绑定至blog应用的默认地址。在这里我们用到了正则表达式(Regular Expression),指定需要绑定的默认地址(r'$'),其中“r”是python中代表“raw”,即禁止字符串转意,“”代表字符串的起始,“$”代表字符串的结束。一个正则表达式中只包含“^”和"$"代表空白字符串。如果想获得关于正则表达式的更多信息,请访问 Regular Expression in Wikipedia

然而,如果在浏览器中键入"http://127.0.0.1:8000/blog", 请发现并没有什么鸟用:

Django学习笔记3:前台页面_第1张图片
杯具了,怎么找不到

这是为神马?这是因为我们也仅仅是新建了一个URL绑定配置文件,并没有将这个绑定配置添加到项目。所以,要想让在这个文件中添加的绑定生效,我们还需要在项目的URL设置中引用这个文件,所以,我们需要在DjangoQuickTour目录的urls.py文件中添加如下内容:

from django.conf.urls import url,include
from django.contrib import admin

urlpatterns = [
    url(r'^blog/', include('blog.urls')),
    url(r'^admin/', admin.site.urls),
]

在上面的代码中,我们通过include函数将blog目录下的urls.py文件中定义的绑定配置添加至项目。可能有的同学会问,为什么这里的参数只有“^”而没有"$"呢,额~因为我们还有可能在“blog/”后面附加更多内容啊,比如"blog/year/2016",如果用"$"指定了字符串结尾,上面的URL可就匹配不到了啊!可能还有同学会问,既然DjangoQuickTour目录下的urls.py才是项目的URL配置文件,为什么我们不把所有的URL绑定配置写在这里呢。这是个好问题!我们之所以这样做,有两个原因:

第一个原因是,每个应用都应该对自身相关的URL绑定配置负责。如果一个应用的URL绑定配置,需要修改应用以外的文件,会影响应用的内聚性
第二个原因是,将应用相关的URL绑定配置放在应用内部,可以增强应用的可复用性,也就是说,我们可以将blog应用作为一个独立的模块,内嵌于多个项目,例如,我们还可以另建一个项目,命名为GuideMeToDjango,其中用到我们前面创建的blog应用,只是在这个项目中,blog模块的地址变为“DevTour”,我们也只需要在项目URL绑定配置文件中添加如下的代码:

from django.conf.urls import url,include
from django.contrib import admin

urlpatterns = [
    url(r'^DevTour/', include('blog.urls')),
    url(r'^admin/', admin.site.urls),
]

OK,那下面我们就将开发服务器跑起来,在浏览器中键入"http://127.0.0.1:8000/blog" 看看我们的工作成果:

Django学习笔记3:前台页面_第2张图片
Hello, world!

浏览器中显示的只是一行简单的文字,可能有的同学会问,如果想要显示更加复杂的内容怎么办?答案很简单,HTML啊~比如,我们把blog目录下的views.py修改一下:

# encoding:utf-8
from django.shortcuts import render
from django.http import HttpResponse

def index(reqeust):
    return HttpResponse('''

大狗的第一篇博客

孔子曰:学而时习之,不亦说乎''')
Django学习笔记3:前台页面_第3张图片
HTML大法好

Look,很简单吧?但是这只适用于最最简单的页面,在实际开发中,基本上不会有人这么做的。在实际开发中,会使用一种叫做模版(template)的机制。

模版和内容

正如前面所说,如今的网站构建中,已经鲜见纯动态或纯静态的实现方式,大多采用静态和动态相结合的方式,其中静态的部分,我们称其为“模板(template)”,而其中动态的部分,我们称其为“上下文(context)”。我们用一个例子来说明,比如下图中的电影票:

Django学习笔记3:前台页面_第4张图片
电影票

我们可以看出,其中粉色的部分,在这家影院卖出的每一张票都是相同的,我们把这部分就称为模版;而黑色的部分,每一张票可能不同,我们把这部分就称为上下文。就好像我们把黑色的字用打印机印在粉色的票纸上就制作出一张电影票一样,我们将上下文按照相应的规则填充在模版中,就创造出一个完整的网页。

我们还是从静态的模板部分开始吧。首先在blog目录中创建templates子目录,然后在templates目录下创建blog子目录,最后在内层blog子目录下创建"index.html"文件,完成上述操作后,blog目录的结构应该是这个样子的:

blog
├── __init__.py
├── __init__.pyc
├── admin.py
├── admin.pyc
├── apps.py
├── migrations
│   ├── 0001_initial.py
│   ├── 0001_initial.pyc
│   ├── __init__.py
│   └── __init__.pyc
├── models.py
├── models.pyc
├── templates
│   └── blog
│       └── index.html  <-  我们刚刚创建的文件
├── tests.py
├── urls.py
├── urls.pyc
├── views.py
└── views.pyc

(pyc文件是python的代码编译文件,请自行无视)

我们在新创建的"index.html"中简单的输入以下内容:


    
        模板测试
    
    
        

大狗汪叨叨


![](https://img5.doubanio.com/icon/u1200667-6.jpg) {{ authorName }}, 这是个测试的模板

文件中用两个大括号“{{}}”包围的部分就是上下文字段占位符,我们需要在视图函数中提供对应字段的值,以便网页渲染时可以自动填入相应的值。

所以,我们还需要对blog目录下views.py中的代码做如下修改:

# encoding:utf-8
from django.shortcuts import render
from django.http import HttpResponse
from django.template import loader

def index(reqeust):
    template = loader.get_template('blog/index.html')
    context = {
        'authorName' : '大狗',
    }
    return HttpResponse(template.render(context, reqeust))

在上面的代码中,首先利用loader的get_template函数加载页面模板,即页面的静态内容,然后,声明context字典,字典中的“authorName”是和html文件中用两个大括号包围的占位符是对应的。

我们运行开发服务器,在浏览器中键入"http://127.0.0.1:8000/blog", 就可以看到在视图函数的添加的上下文,已经被填充到页面模板中。

Django学习笔记3:前台页面_第5张图片
页面模板

然而,这似乎和我们预想中的博客还是相去甚远,请大家不要着急,我们将在下篇笔记中介绍Django的ORM,并用数据库中的数据进行模板填充,

你可能感兴趣的:(Django学习笔记3:前台页面)