Python + Django4 搭建个人博客（八）:实现博文列表页面的视图函数和模板

目录

实现获取文章视图函数

实现文章列表模板

创建并配置模板位置

创建模板文件

修改路由地址

结语

前文，我们已经熟悉了一个简单Django的Web应用实现Hello World！Python + Django4 搭建个人博客（四）: 创建APP和项目配置_李威威wiwi的博客-CSDN博客_django 博客

不过，这个应用没有和模型及数据库交互，也没有涉及前端网页的开发。

本篇我们来实现一个具体的Web页面：输入特定地址，在浏览器页面显示存储在数据库里面的文章列表。

通过前面的篇章我们知道，Django实现Web应用基于的是MTV模式。

MTV 包含的就是三个核心要素： Model（模型） ，Template（模板）和View（视图）。

模型和数据库，我们通过前面两篇已经完成创建和迁移.

Python + Django4 搭建个人博客（六）: 数据库表和模型设计_李威威wiwi的博客-CSDN博客

上篇我们利用后台也已经新建了一条文章记录。

Python + Django4 搭建个人博客（七）: 利用admin后台管理网站数据库_李威威wiwi的博客-CSDN博客

下面我们通过实现一个博文列表页面来熟悉下模板的配置和视图的创建。

同时加深下对MTV模式的了解。

实现获取文章视图函数

我们需要输出博文列表，首先就需要实现一个从数据库中获取文章相关数据的视图函数。

打开article 目录下的views.py，增加以下代码：

from django.shortcuts import render
 
# 导入数据模型Article
from .models import Article
 
def article_list(request):
    # 取出所有博客文章
    articles = Article.objects.all()
    # 需要传递给模板（templates）的对象
    context = { 'articles': articles }
    # render函数：载入模板，并返回context对象
    return render(request, 'article/list.html', context)

上面核心代码大概做了如下几个动作：

1、代码from django.shortcuts import render引入render函数，render可以说是Django的视图模块里面最核心，使用也是最频繁的函数之一，因为这个函数连接了模型数据和模板文件，可以将我们的模型数据已特定的数据格式传递给指定的模板。

render函数参数和语法如下：

render(request, template_name, context=None, content_type=None, status=None, using=None)

一般情况下我们只需要用到前两个参数 template_name（定义了模板文件的位置、名称）, context（定义了需要传入模板文件的上下文），其他的参数使用默认值就可以了。

简单说明下render函数的几个参数：

• request: 浏览器向服务器发送的请求对象，包含用户信息、请求内容和请求方式等（不用改，）。
• template_name: 要使用的模板的文件名, 可选的参数
• context: 添加到模板上下文的一个字典. 默认是一个空字典. 如果字典中的某个值是可调用的, 视图将在渲染模板之前调用它.
• content_type: 生成的文档要使用的MIME类型. 默认为DEFAULT_CONTENT_TYPE设置的值. 默认为"text/html"
• status: 响应的状态码. 默认为200
• using: 用于加载模板的模板引擎的名称

2、代码from .models import Article 导入数据模型Article，我们的视图函数需要用到Article模型，则需要引入。

3、代码def article_list(request):定义了一个视图函数article_list用户获取博客文章的信息，并传递给模板。

def article_list(request):
    # 取出所有博客文章
    articles = Article.objects.all()
    # 需要传递给模板（templates）的对象
    context = { 'articles': articles }
    # render函数：载入模板，并返回context对象
    return render(request, 'article/list.html', context)

Article.objects.all()是数据类的方法，可以获得所有的对象（即博客文章），并传递给articles变量

context定义了需要传递给模板的上下文，这里即articles 。

实现文章列表模板

Django作为Web框架，需要一种很便利的方法去动态地生成HTML网页，因此有了模板这个概念。

模板包含所需HTML的部分代码以及一些特殊的语法，特殊的语法用于描述如何将数据动态插入HTML网页中。

Django可以配置一个或多个模板引擎（甚至是0，如果不需要使用模板），模板系统有Django模板语言（Django Template Language, DTL）和Jinja2。

Django模板语言是Django内置的模板语言，Jinja2是当前Python最流行的模板语言。

本文使用Django内置的模板语言。

创建并配置模板位置

在使用模板之前我们先做两个准备工作：

1、创建一个文件夹用于存放我们的模板文件

• 在项目根目录下新建目录templates/,用于存放模板文件。
• 另外在模板文件夹在创建一个文件夹templates/article，用于存放article相关模板文件。

2、修改配置文件，告诉Django我们的模板文件在哪里

此项配置修改需要用到os模块我们先在setting.py文件里面通过代码import os引入os模块。

接着修改如下代码告诉Django我们模板所在的位置：

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        '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',
            ],
        },
    },
]

创建模板文件

前面编写视图的时候我们指定了模板的文件名和文件位置。

所以我们直接在对应文件夹templates/article中新建一个网页文件list.html并输入如下代码：

{% for article in articles %}
    
标题：{{ article.title }}
    
文章内容：{{ article.body }}
    
作者：{{ article.author }}
    
创建日期：{{ article.created }}
{% endfor %}

这里我们第一次接触到了Django的模板语法了{% for article in articles %}，{{ article.body }}等，用{% %} 标记起来的部分Django内称之为模板标签，{{ }}标记起来部分称为模板变量。

Django模板通过在HTML中嵌入模板标签和变量来动态生成HTML：

• {% for article in articles %}：articles为视图函数的context传递过来的上下文，即所有文章的集合。{% for %}循坏表示依次取出articles中的元素，命名为article，并分别执行接下来操作。末尾用{% endfor %}告诉Django循环结束的位置。
• {{ article.title }}：article为for中循环的变量，使用 . 符号来访问变量的属性。这里的article为模型中的某一条文章；我们在前面的Article中定义了文章的标题叫title，因此这里可以用article.title来访问文章的标题。

• ...

  即为html语言，中间包裹了一个段落的文字。

至此我们已经完成了展示博文的视图函数和模板。

修改路由地址

视图和模板创建好了之后，我们来做最后一步：通过指定路由地址将文章信息通过网页形式展示处理。

这里要做的就是把路由地址和视图函数对应起来就行了。

打开django4blog目录下的urls.py，增加以下展示文章的代码：

urlpatterns = [
    path('admin/', admin.site.urls),
    path('hello/', views.hello),
    # 添加此项
    path('article/', views.article_list),  # 展示文章
]

然后运行服务器：python manage.py runserver

在浏览器输入地址：http://127.0.0.1:8000/article/ 可以正常显示文章信息。

结语

本篇，我们在前文的模型和数据的基础上，应用MTV模式完整的实现了一个Django 应用功能：

输入如下地址 http://127.0.0.1:8000/article/ 在打开的网页中显示文章信息。

通过本篇的学习，我们了解了模板信息相关的配置文件，并了解到Django是如何识别模板信息的。

学习了视图函数的编写，了解了视图函数是如何将模型数据和模板相关联的。

下一篇我们将在本篇的基础上，学习如何在DJango模板中使用静态文件。

同时学习利用bootstrap框架，对我们的输出网页进行渲染美化。