Django开发个人博客网站——8、博客首页的开发

现在我们进入博客的首页127.0.0.1:8000，发现还是欢迎页面，因为我们还没有给博客添加任何模板，也就是前端html页面。

博客前端模板托管在GitHub：django_blog_templates

将项目下载到本地后，将static文件夹整个拷贝到博客项目根目录下，然后在将index.html拷贝到templates目录下。这里的index.html就是我们博客的首页。

创建视图函数

django中后端的控制都是在视图函数中进行的，也就是view.py，每创建一个app，该app目录下都会有一个view.py，我们主要就是在这里进行后端代码的书写的。

from django.views import Viewclass IndexView(View):"""首页"""def get(self, request):return render(request, 'index.html')

通过url将视图函数与模板关联起来

现在我们有了index.html页面了，也有了视图函数IndexView，但是怎么才能通过127.0.0.1:8000访问到这个页面呢？django中是通过url将这个页面与视图函数关联起来，也就是前后端的API接口。

在url.py中编写：

from myblog.views import IndexViewurlpatterns = [url(r'^admin/', admin.site.urls),url(r'^$', IndexView.as_view(), name='index'),  #首页的url
]

当我们访问127.0.0.1:8000这个页面时，django会通过正则表达式解析这个url，从而判断出该url连接到哪个视图函数，我们这里对应的就是IndexView。然后在IndexView中，将index.html传递给前端，并通过浏览器展示给用户。

这样我们便配置好了首页。

首页样式的加载

但是在刷新首页时，我们发现并没有样式，样式文件我们放在static文件夹中了，而index.html并没有定位到该目录。需要配置下：

setting.py中添加，STATICFILES_DIRS：

STATICFILES_DIRS = (os.path.join(BASE_DIR, 'static'),
)

index.html中，在第二行添加：

{% load staticfiles %}

然后将代码中的css、js以及image路径指定到static文件夹中对应的文件，比如：

<link href="/static/css_js/jquery.fancybox.css" rel="stylesheet" type="text/css">

还可以这么写：

<link href="{% static 'css_js/jquery.fancybox.css' %}" rel="stylesheet" type="text/css">

不要忘了将头像路径也改一下。

最后再刷新下页面，发现我们的博客首页便出现了，是不是很有成就感呢？

视图函数中获得数据库中数据并传递给前端

但是现在我们展示的还只是静态页面，首页中博客的内容是我之前做测试时随便添加的，为了将我们自己从后台添加的博客展示到前端，我们还需要对视图函数进行进一步完善。

view.py

from myblog.models import Blog, Category, Tagclass IndexView(View):def get(self, request):all_blog = Blog.objects.all().order_by('-id')return render(request, 'index.html', {'all_blog': all_blog,})

我们将models.py创建的三个表import进来，然后获取所有的博客queryset，并将其通过render传递到前端。

index.html

{% for blog in all_blog %}<article>...</article>{% endfor %}

对博客queryset进行for循环，article对象只需要保留一个就行了，其它的都可以删掉。

然后对article对象中的内容进行更改如下：

{{ blog.title }}   #博客的标题
{{ blog.create_time|date:'Y-m-d' }}  #博客的发表时间，用装饰器date指定显示格式
{{ blog.category.name }}  博客的分类
{{ blog.content }}   博客的内容

然后我们再次刷新首页，即可看到我们之前在后台添加的一篇博客，并且只有这一篇，我们可以再次登录admin，再添加几篇博客，看一看效果。

到这里，我们的首页可以显示出博客的内容了，但是还有很多需要完善的地方，后面会继续完善的。

——————————————————————————————————————————

项目的完整代码：django_blog
觉得有用的欢迎给个star。

Django开发个人博客网站——8、博客首页的开发相关推荐

java基于ssm的个人博客系统个人博客网站个人博客项目源码
简介 Java ssm开发的个人博客系统,可以发布博客,照片,站长留言. 演示视频 https://www.bilibili.com/video/BV1sf4y1y7Ne/?share_source= ...
运营商精准大数据获客网站APP访客实时截流
企业想要获得精准客户线索的问题主要表现为两个方面,一是目标人群不够精准;二是轻视用户画像.因此,精准获客成败的前提是,是否有足够精确的"用户画像"来做支撑.因此企业解决精准获客这两 ...
.net开发网站CMS博客框架
做一个网站基本步骤一般完整的包括需求分析-ui设计-前端开发-后端开发-测试-运维,一般需求确定了基本就可以,这里主要介绍后台.net网站开发,即拿到前端代码后如何进行.net后台开发,这里以一个博客 ...
沈阳大学博客网站的设计与实现
沈阳大学博客系统的设计与实现目录引言 3 1 系统概述 5 1.1 设计背景 5 1.2 设计意义 5 1.3研究现状 5 1.4 研究本设计的影响 6 1.4.1 对经济的影响 6 1.4. ...
jav简单的个人博客网站代码_每个人都可以拥有的个人博客网站
题记 ------去过的地方越多,越知道自己想回到什么地方去! 雨又下了一夜,曾经多少次觉得下雨天是最适合睡觉的天气.而最近的雨,总感觉有些嘈杂,总怕吵醒远方睡梦中的星,晨.以至于翻来覆去睡不着.但是 ...
关于CSDN, cnblog, iteye和51cto四个博客网站的比较与分析
CSDN:http://blog.csdn.net/ cnblog: http://www.cnblogs.com/ iteye: http://www.iteye.com/blogs/ 51cto: ...
如何成功打造一个能够赚钱的个人博客网站？
今天的天气格外开朗,心情也自然好了很多,所以一到公司做下来,充满了激情和斗志.工作要继续做,日记要坚持写.由于最近一段时间,笔者发现国内一下子出来了大批的博客网站,采用跟笔者个人网站相同的主题,有的只 ...
Flutter开发实战高仿微信（一）首页
Flutter开发实战高仿微信(一)首页 Flutter开发实战高仿微信(一)首页 flutter 开发微信项目 (一) 1. 开发HomePage页 2. 用到的知识点讲解 2.1 Bottom ...
pbp 读取 mysql数据_pbp: Django项目开发，个人博客网站类。
pbp 项目介绍首个Django项目开发,个人博客网站类. 框架模型 Django 运行平台 Linux 安装部署 1.安装Python3环境 CentOS 7 curl -o /etc/yum.r ...
Django开发个人博客网站——1、开发环境
1.写在前面的话刚最开始自学python,然后学习django框架,中间断断续续有几个月的时间,是时候通过一个项目来检验下自己的学习成果了.既然学习了django web框架,那很自然的就是想到要搭 ...

Django开发个人博客网站——8、博客首页的开发

Django开发个人博客网站——8、博客首页的开发相关推荐

最新文章

热门文章