从0到1搭建个人博客-Django(五)

你好，我是goldsunC

让我们一起进步吧！

从0到1搭建个人博客-Django(五)

在以下链接快速回顾系列文章内容

本篇内容简单改写下视图函数，然后编写模板(Template)做了个简单的页面标题输出。同时对Django模板语言做了介绍以及配置好了Bootstrap4环境。

简单回顾

在前一篇文章，我们已经创建了数据库，也建立了模型类并实现了数据迁移，这一章我们从数据库中国读取数据并展示在浏览器页面。

好的，知道了简单的需求，那我们想想应该改写设置哪些文件呢？

首先，我们需要借助模型从数据库中读取数据，然后通过视图将数据展示在浏览器页面上。

扫描二维码关注公众号，回复： 11949044 查看本文章

模型类我们已经理解一些了，那视图呢？如果认真学习的小伙伴应该知道我们已经简单的实现过视图了，在第二篇文章中为了让我们小有成就感，简单的编写了一个视图，使浏览器页面左上角出现了一个小小的Hello world!。

还记得Hello world!页面的网址吗？如果不急得的话去路由文件里面看看，知道怎么看吗？首先找到项目路由文件my_blog\urls，里面有一行：

path('article/', include('article.urls',namespace = 'article')),

说明如果如果来的路由地址是http://127.0.0.1:8000/article/*的话，去article\urls下去匹配路由，注意那个*号，在这里我将它当作是统配符的意思，即只要前面是article就到article\urls下去匹配视图函数，那我们打开article\urls文件，里面只要一个：

path('',views.HelloWorld, name = 'HelloWorld'),

那个空字符串的意思就是没有空参数啦，也就是匹配http://127.0.0.1:8000/article/了，这个网址的话去调用views中的HelloWorld函数，也就是返回一个HttpResponse对象Hello world!，这样我们就在浏览器页面上看到了它，这么说你能理解吗？

如果理解了，那我们准备好改写视图，Hello world!的作用已经够了，该舍弃它了。

视图简介

视图功能简称"View"，是一系列的Python函数，它接受一个Web请求，然后返回一个Web响应。这个响应可以直接是Web页面的HTML内容，或重定向、404错误、XML文档、图像等。创建视图是在views.py文件中创建视图函数，这个函数会进行相应的操作。当Django服务器接收到特定的url后，通过该url路由找到相应的视图函数，调用该视图函数，然后models去访问数据库取数据，然后通过模板(Template)，Views函数把响应对象返回客户端最终显示出来。视图函数是由框架发起调用的，不需要直接调用视图函数。

在编写视图函数时，每一个视图函数至少有一个request参数，这是一个触发这个视图、包含当前Web请求信息的对象，是类django.http.HttpRequest的一个实例。例如我们之前的Hello world!就是一个django.http.HttpRequest的实例。

改写视图

打开article/views.py文件，改写文件内容如下：

from django.shortcuts import render
# Create your views here.
# 导入我们的数据类ArticlePost
from .models import ArticlePost
def article_list(request):
    articles = ArticlePost.objects.all()
    context = {
    
    
        'articles':articles
    }
    return render(request, 'article/list.html', context)

简单分析一下：

render是一个渲染函数，它负责渲染视图调用的模板(Template)，简单讲模板就是一个大致的编写好的HTML页面，然后我们有时候需要更改模板页面中的一些内容，render函数就负责把更改后的内容和模板渲染出来通过浏览器呈现。
ArticlePost就是我们之前创建好的模型类。
article_list函数的作用就是：首先获得ArticlePost表(注意我们说过一个模型类就是一张表，每一个实例就是一行数据)的所有对象即所有数据，然后context定义了需要传递给模板的内容，这里只传递了articles，最好返回渲染好的HttoResponse对象。

render函数中的三个参数：

request：这个参数就是浏览器传过来的请求。
article/list.html：这个HTML文件是我们的一个模板，大家会发现我们现在并没有这个文件啊，是的我们还没有创建这个文件，不过先照着写，马上创建。
context：它就是需要传入模板的内容，等下结合模板文件更好理解。

编写模板

在项目文件my_blog下创建新目录templates，然后在其下新建article目录，再在其下新建list.html文件，创建完成后项目目录如下：

my_blog
│  db.sqlite3
│  manage.py
│
├─article
│  
├─my_blog
│
└─templates
    └─article
            list.html

在list.html中写入如下代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的博客</title>
</head>
<body>
{% for article in articles %}
    <h1 align="center">{
   
   { article.title }}</h1>
{% endfor %}
</body>
</html>

编写好之后打开my_blog/settings.py，找到如下代码片段并在'DIRS'列表中增加一行代码：

TEMPLATES = [
    {
    
    
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        # 定义我们的模板位置，让Django可以加载
        'DIRS': [os.path.join(BASE_DIR, 'templates')],
        'APP_DIRS': True,
        'OPTIONS': {
    
    
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

然后修改article的路由，打开article/urls.py文件，做如下修改：

# 2020.10.14更改代码
urlpatterns = [
    path('article-list/',views.article_list, name = 'article_list'),
]

重新定义我们的视图函数

完毕后，虚拟环境启动服务器，输入哪个网址呢？当然是这个：

http://127.0.0.1:8000/article/article-list/，出现如下界面：

如图，显示了数据库中每篇文章的标题，注意是每一篇，我这里只有一个标题是因为我上次新建文章的时候只新建了一个，如果你当时新建了多个，那所有标题都会显示在上面，如果不信的话可以去试试哦，什么？忘了怎么创建？那还是建议你多去折腾折腾，大不了重头再来，只有理解了才好。

Django模板语言

Django模板引擎提供了一个小型的语言来定义应用程序面向用户的层。先简单介绍下上面list.html文件中使用到的代码(不会HTML的建议找点资料看看，几个小时就能入门)：

{% for article in articles %}：articles为视图函数context传递过来的上下文，即所有文章标题的集合，可以去views.py中回顾一下。语法看着和Python的for语句相似是吧，其实就是那回事，for标签用于顺序遍历序列中的每条数据。每次循环模板系统都会渲染{% for %}和{% endfor %}之间的所有内容。

{ {article.title}}：它表示将article变量的title值插入我们的模板中。

Django模板语言还有其它的一些使用方法：

过滤器

语法格式：{ {var | filters}}

模板过滤器将变量在显示前转换它们的值的方式。例如：

{ {string | lower}}，它将字符转换为小写。

{ {string | truncatewords:10}}，过滤器将截断字符串，只显示前10个字符。

配置Bootstrap4

Bootstrap是用于网站开发的开源前端框架，它提供字体排印、窗体、按钮、导航及其他各种组件，旨在使动态网页和Web应用的开发更加容易。

首先我们需要下载Bootstrap4文件，又因为bootstrap.js依赖jquery.js才能正常运行，因此这个文件我们也需要一并下载保存。

下载之前我们先在项目文件夹my_blog下创建static文件夹目录，再在其下创建bootstrap、jquery两个文件夹目录。然后下载两个文件：

bootstrap：https://getbootstrap.com/docs/4.1/getting-started/download/

jquery.js：https://jquery.com/download/

记得解压，完成之后目录结构如下：

my_blog
│  db.sqlite3
│  manage.py
│  │
├─article
│  │
├─my_blog
│
├─static
│  ├─bootstrap
│  │  ├─css
│  │  │
│  │  └─js
│  │
│  └─jquery
│          jquery-3.5.1.js
│
└─templates
    └─article
            list.html

然后更改配置让Django能调用它们，打开setting.py文件，在文件的最末尾加上如下代码：

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

参考文献：

https://www.dusaiphoto.com/article/2/
http://c.biancheng.net/view/7288.html
http://www.python3.vip/tut/webdev/django/