Django blog - 06 - 博客首页

时间:2024-03-18 18:00:11

首页视图函数

上一节阐明了 Django的开发流程:

->配置 URL,把 URL和相应的视图函数绑定,一般写在 urls.py文件里

->在工程的 urls.py 文件引入

->编写视图函数,视图中需要渲染模板,在 settings.py 中进行了模板相关的配置,让 Django能够找到需要渲染的模板路径

->渲染完成的 HTTP 响应返回

接下来只需专心编写视图函数,实现想要的功能即可。

视图函数代码:

blog/view.py

Django blog - 06 - 博客首页

模型管理器objects的使用:

all()方法从数据库里获取了全部的文章,存在了post_list变量里

all方法返回的是一个QuerySet(可以理解成一个类似于列表的数据结构)

调用order_by方法对这个返回的 queryset 进行排序(通常来说博客文章列表是按文章发表时间倒序排列的,即最新的文章排在最前面)

排序依据的字段是created_time,即文章的创建时间

-号表示逆序,如果不加-则是正序

渲染 blog\index.html模板文件,并且把包含文章列表数据的post_list变量传给了模板

处理静态文件

项目使用了从网上下载的一套博客模板(模板

包含 HTML文档,以及一些 CSS文件和 JavaScript文件

下面对 Django做一些必要的配置,让 Django在开发服务器中引入这些 CSS JavaScript文件,让博客页面的 CSS样式生效

->blog应用下建立一个 static 文件夹

-> CSS JavaScript文件放在blog应用 static\ 目录下

-> static\ 目录下建立一个 blog文件夹(为了避免和其它应用中的 CSS JavaScript文件命名冲突,如其他应用中也会包含同名),模板中的 css js文件夹连同里面的全部文件一同拷贝进这个目录

->最终 blog 应用目录结构:

Django blog - 06 - 博客首页

->再用模板中的 index.html 文件替换掉之前的 index.html文件(一定要记得替换掉

->运行python manage.pyrunserver开发服务器,查看首页:

Django blog - 06 - 博客首页

浏览器无法正确加载 CSS 等样式文件使首页显示的样式混乱,用 Django的方式来正确地处理 CSS JavaScript等静态文件的加载路径。

->打开 index.html 文件,CSS样式文件通常在 HTML文档的 head标签里引入,在文件的开始处找到 head标签包裹的内容如下:

Django blog - 06 - 博客首页

   CSS样式文件的路径在 link标签的 href属性

   JavaScript文件的路径在 script标签的 src属性

诸如 `href="css/bootstrap.min.css"或者 src="js/jquery-2.1.3.min.js"这样的引用,引用文件的路径不对,使浏览器引入这些文件失败

->正确地引入 static 文件下的 CSS JavaScript文件,把代码改成下面样子:

Django blog - 06 - 博客首页

Django blog - 06 - 博客首页

•   {{ }}包裹起来的叫做模板变量,作用是在最终渲染的模板里显示由视图函数传过来的变量值

•   {% %}包裹起来的叫做模板标签,例如:href="{% static'blog/css/bootstrap.min.css' %}",模板标签的功能类似于函数,例如这里的static模板标签,把后面的字符串'css/bootstrap.min.css'转换成正确的文件引入路径,使 css js文件正确加载,样式正常显示

最顶部 {% loadstaticfiles %}是为了能在模板中使用 {% static %}模板标。static模板标签位于 staticfiles模块中,只有通过 load模板标签将该模块引入后,才能在模板中使用 {% static %}标签。

->替换完成后刷新页面并看看网页的源代码以及 {% static %} 模板标签在页面渲染后究竟被替换成了什么样的值

Django blog - 06 - 博客首页

其在浏览器中显示如下

Django blog - 06 - 博客首页

这正是custom.css文件所在的路径,其它的文件路径也被类似替换

其中, {% static %}标签的作用就是把后面的字符串加了一个 /static/前缀,比如{% static 'blog/css/custom.css' %}最终渲染的值是/static/blog/css/ custom.css

 /static/前缀是在 settings.py文件中通过STATIC_URL = '/static/'指定的,事实上,直接把引用路径写成/static/blog/css/ custom.css也可行

•那么使用 {% static %} 标签原因:

目前 URL的前缀是 /static/,如果哪一天因为某些原因,需要把 /static/改成 /resource/,如果你是直接写的引用路径而没有使用 static模板标签,可能需要改 N个地方

使用 static模板标签,只要在 settings.py处改一个地方就可以了,即把STATIC_URL = '/static/'改成STATIC_URL = '/resource/'

有时候按 F5刷新后页面还是很乱,这可能是因为浏览器缓存了之前的结果。按 Shift + F5(有些浏览器可能是 Ctrl + F5)强制刷新浏览器页面即可。

注意这里有一个 CSS 文件的引入

Django blog - 06 - 博客首页

这里的引用的文件是一个外部文件,不是我们项目里 static\blog\css\目录下的文件,因此无需使用模板标签。

->正确引入了静态文件后正常样式显示:

Django blog - 06 - 博客首页

 

修改模板

目前只是模板中预先填充的一些数据,需要显示从数据库中获取的文章数据,修改模板:

->在模板 index.html 中你会找到一系列 article标签:

templates/blog/index.html

Django blog - 06 - 博客首页

包裹的内容显示的就是文章数据

在视图函数 index里给模板传的post_list变量,包含着从数据库中取出的文章列表数据

就像 Python一样,在模板中循环这个列表,把文章一篇篇循环出来,然后一篇篇显示文章的数据。

->使用 {% for %} 循环模板标签,将 index.html中多余的 article标签删掉,只留下一个 article标签,然后写上下列代码:

Django blog - 06 - 博客首页

语法和 Python for循环类似,只是被 {% %}这样一个模板标签符号包裹着

{% empty %}的作用是当post_list为空,即数据库里没有文章时显示 {% empty %} 下面的内容,

{% endfor %}告诉 Django循环在这里结束

模板中的post_list是一个QuerySet(类似于一个列表的数据结构),其中每一项都是之前定义在 blog\models.py 中的 Post类的实例,且每个实例分别对应着数据库中每篇文章的记录

循环遍历post_list,每一次遍历的结果都保存在post变量里。故使用模板变量来显示post的属性值。例如这里的{{ post.pk }}pk primary key的缩写,即 post对应于数据库中记录的 id值,该属性尽管没有显示定义,但是 Django会自动添加)。

->现在可以在循环体内通过post变量访问单篇文章数据。分析 article 标签里面的 HTML内容,h1显示的是文章的标题

Django blog - 06 - 博客首页

->把标题替换成posttitle属性值。

注意要把它包裹在模板变量里,因为它最终要被替换成实际的 title

Django blog - 06 - 博客首页

-> 5 span标签里分别显示了分类(category)、文章发布时间、文章作者、评论数、阅读量

Django blog - 06 - 博客首页

->再次替换掉一些数据,由于评论数和阅读量暂时没法替换,实现了其他功能后再来修改它,目前只替换分类、文章发布时间、文章作者:

Django blog - 06 - 博客首页

->这里 p 标签里显示的是摘要

Django blog - 06 - 博客首页

->替换成post的摘要:

Django blog - 06 - 博客首页

->再次访问首页(刷新),显示:暂时还没有发布的文章!数据库中其实还没有任何数据呀

Django blog - 06 - 博客首页

 

下一篇《 Django blog - 07 - Django Admin 后台发布文章》

参考文献:http://zmrenwu.com/post/8/