最新消息:欢迎光临 魔力 • Python!大家可以点开导航菜单中的【学习目录】,这个目录类似图书目录,更加方便学习!

Django2:Web项目开发入门笔记(5)

Django教程 小楼一夜听春语 12303浏览 0评论

前面的教程我们对Django2中的URL分发以及视图进行了初步的了解,这一篇教程我们接触模板的使用。

既然我们是创建Web项目,就少不了HTML代码。

每个呈现给用户的页面,都是由HTML代码所组成。

所以,对于HTML的相关知识,大家需要有一定的了解。

网上有很多关于HTML的教程,在此不做推荐。

另外一点,既然我们学习Web项目的开发,大家可以观察一下各类网站,页面是有分类的。

例如,一个新闻网站,会有不同种类新闻的列表页,还有各种新闻的内容页。

我们在制作网站的时候,肯定不会把每个HTML页面都写一遍,因为同类页面中的内容,往往只是有部分差异,大部分都是相同的。

例如,新闻列表页。

每一类新闻的列表页,只是列表内容不同,页面的其它部分往往是一样的。

那么,我们能不能把新闻列表页面只做一次,让里面的列表内容是可以动态加载的呢?

比如用户点击体育新闻就加载体育新闻的列表,点击经济新闻就加载经济新闻的列表。

当然是可以的,这就是模板的用途。

具体来说,模板可以是同一类页面的模板,也可以是不同页面中相同内容的模板。

也就是说,我们可以把同类页面只编写一次HTML代码,就可以通过动态载入数据呈现出不同的页面内容;也可以把多个页面中都存在的部分内容(例如页面导航和底部信息)只编写一次HTML代码,通过模板的嵌套加载到不同的页面中。

一、模板的使用

我们只需要创建包含HTML代码的模板文件,放置到模板文件夹(templates)中,然后在全局设置文件(settings.py)中添加相关配置,即可在视图中调用模板,并且通过视图函数可以将不同的数据与调用模板进行整合,形成不同的页面。

1、创建模板文件

在PyCharm项目文件列表的模板文件夹(templates)上点击鼠标右键,选择新建(New)一个HTML文件(HTML File)。

虽然,模板文件的后缀名称不要求必须是“.html”,但是在PyCharm中创建HTML文件会方便我们编写HTML代码(自动提示和代码补全)。

例如,我们创建一个名为“index.html”的文件,作为站点首页的模板,并写入HTML代码。

示例代码:

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
</head>
<body>
<h4>这是我的第一个模板页面。</h4>
</body>
</html>

2、添加视图函数

打开视图模块“views.py”,添加视图函数调用模板。

示例代码:

from django.shortcuts import render  # 创建应用时自动导入的模块

def index(request):  # 定义站点首页视图函数
    return render(request, 'index.html')  # 调用模板返回页面内容

3、配置URL分发

打开模块“urls.py”,在配置列表中添加新的配置。

示例代码:

from django.contrib import admin
from django.urls import path
from MySite import views as siteviews  # 导入视图模块并创建别名

urlpatterns = [
    path('', siteviews.index),  # 配置处理访问网站根目录的视图
    path('admin/', admin.site.urls),
]

完成上面的步骤后,启动开发服务器,通过浏览器访问当前项目,就能够看到页面内容了。

二、模板的嵌套

在很多页面都有的重复内容,我们可以做成模板,然后嵌套到页面中使用。

例如,我们新建两个HTML文件,一个作为顶部导航,一个作为底部信息,让index页面的模板中包含这两个模板的内容。

访问首页时效果如下图。

先来编写顶部导航内容的模板。

示例代码:(nav.html)

<h3>这里是顶部导航模板内容</h3>
<hr>

然后,编写底部信息内容的模板。

示例代码:(footer.html)

<hr>
<h3>这里是底部信息模板内容</h3>

最后,修改首页模板。

示例代码:(index.html)

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
</head>
<body>
{% include 'nav.html' %}
<h4>这是我的第一个模板页面。</h4>
{% include 'footer.html' %}
</body>
</html>

大家能够看到,通过“{% include ‘模板名称’ %}”就能够把其它模板嵌套到当前模板内。

三、模板的复用

实际上通过嵌套,我们就实现了部分内容(顶部导航和底部信息)的复用。

不过,我们在开发Web项目的过程中,会有很多页面都包含重复的内容。

我们在每一类页面的模板中都进行重复内容的嵌套也是很麻烦。

所以,我们可以先做一个基本的模板,然后各类页面的模板复用这个基本的模板,只把页面中不同的部分进行重写。

1、创建基本模板

示例代码:(base.html)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{% block title %}默认{% endblock %} - 我的网站</title>
</head>
<body>
{% include 'nav.html' %}
{% block content %}这里是网站内容!{% endblock %}
{% include 'footer.html' %}
</body>
</html>

在上方代码中,大家能够看到我们通过“{% block 名称 %}内容{% endblock %}”定义了一些内容,这些内容就能够在复用这个模板内容的模板中重写。

2、复用基本模板

接下来,我们在首页页面模板中复用上方的模板。

示例代码:(index.html)

{% extends 'base.html' %}

当完成上方代码中,大家通过浏览器访问当前项目,能够看到基本模板的内容。

但是,这不是我们想要的结果。

网站的标题和页面的内容都需要修改。

3、重写模板内容

我们在首页页面模板中继续添加内容,对复用的基本模板内容进行重写。

示例代码:(index.html)

{% extends 'base.html' %}
{% block title %}首页{% endblock %}
{% block content %}
    <h4>这是我的第一个模板页面。</h4>
{% endblock %}

通过上方代码,大家不难看出,“{% block 名称 %}内容{% endblock %}”能够对复用模板内容中相同名称的部分进行重写。

当完成上述内容,我们再次通过浏览器访问项目,就能够看到和之前一样的首页页面内容。

四、模板与数据整合

模板用于定义页面内容的展现,如果想动态的显示不同的内容,还需要与数据进行整合。

例如,访问不同的新闻列表页面,但是都是用相同的模板,模板中页面标题和新闻列表名称应该是可以改变的,而这些可变的数据应该由视图函数添加到模板定义的页面内容中。

1、创建模板

示例代码:(news_list.html)

{% extends 'base.html' %}
{% block title %}{{ news_type }}新闻{% endblock %}
{% block content %}
    {{ news_type }}新闻列表:
{% endblock %}

上方代码中“{{ 变量名称 }}”能够获取视图函数中存入的变量数据。

2、定义视图函数

示例代码:

def news_list(request, news_type):  # 定义新闻列表视图
    news_dict = {'economic': '经济', 'sport': '体育'}  # 创建参数字典
    return render(request, 'news_list.html', {'news_type': news_dict[news_type]})  # 整合数据并返回页面内容

3、设置URL分发

示例代码:

path('news_list/<str:news_type>', siteviews.news_list),

通过以上步骤,我们就完成了想要的功能。

访问经济新闻的连接:http://127.0.0.1:8888/news_list/economic

访问体育新闻列表的连接:http://127.0.0.1:8888/news_list/sport

 

本节练习源代码:【点此下载

转载请注明:魔力Python » Django2:Web项目开发入门笔记(5)

头像
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网站 (可选)

网友最新评论 (15)

  1. 头像
    模板使用写的挺好,已学习^^
    走路爱走神7年前 (2018-06-01)回复
  2. 头像
    四、模板与数据整合 1、创建模板 {% block title %}{{ news_type }} }}新闻{% endblock %} 多了两个"}"
    走路爱走神7年前 (2018-06-01)回复
    • 小楼一夜听春语
      谢谢,已修正!
      小楼一夜听春语7年前 (2018-06-01)回复
  3. 头像
    需要在setting.py文件种添加如下文本才可以找到模板: 'DIRS': [os.path.join(BASE_DIR, 'templates')],
    xingzhui7年前 (2018-06-16)回复
    • 小楼一夜听春语
      Django2自带的,不需要手动添加。
      小楼一夜听春语7年前 (2018-06-19)回复
  4. 头像
    最后一节讲得不清不楚, 下载的index.html也是不知写的什么鬼
    {% extends 'base.html' %}
    {% block title %}首页{% endblock %}
    {% block content %}
        <a href="{% url 'cu' 'a' 'b' %}" rel="nofollow">这是我的第一个模板页面。</a>
    {% endblock %}
    lzz7年前 (2018-07-14)回复
    • 小楼一夜听春语
      第1点最后一句和第3点第一句写的很清楚了,对base.html内容的重写。另外,建议同时学习礼貌待人!
      小楼一夜听春语7年前 (2018-07-14)回复
  5. 头像
    楼主,能否贴一下最后一步的文件结构。我在news_list这一步卡住了。 我在templates里新建了一个news_list的文件夹。然后在里面放了sports和economic两个html文件。可是访问的时候报:PermissionError at /news_list/sports
    时间的切面6年前 (2018-11-29)回复
    • 小楼一夜听春语
      文章末尾有源码
      小楼一夜听春语6年前 (2018-11-29)回复
  6. 头像
    已按着步骤写完了,虽然看似很简单,写的过程出了好几个小错误,还是实践为王啊。谢谢小楼老师。 还有各个数据的走向还是理解的不够深刻,继续边写边理解
    谢谢小楼老师6年前 (2019-01-24)回复
  7. 头像
    好像漏了在settings.py里面注册模板路径吧??
    半包辣条6年前 (2019-05-03)回复
    • 小楼一夜听春语
      Django2不需要,不要被其他旧教程影响。
      小楼一夜听春语6年前 (2019-05-04)回复
      • 头像
        我用的是pycharm社区版 命令行构建的项目,pycharm打开,templates是自己加的文件夹 所以settings文件里需要注册模板路径,我用的是Django3
        Clay5年前 (2020-02-16)回复
        • 头像
          是的,需要配置settings,我也在这卡住了
          lalala4年前 (2021-05-30)回复
  8. 头像
    感恩~~找到这样的教程真是幸运呀
    lalala4年前 (2021-05-30)回复