模板介绍

  • 作为Web框架,Django提供了模板,用于编写html代码
    • 还可以嵌入模板代码更快更方便的完成页面开发
    • 再通过在视图中渲染模板,将最终生成的网页返回给客户端浏览器
  • 模版致力于表达外观,而不是程序逻辑
  • 模板的设计实现了业务逻辑view显示内容template的解耦
    • 一个视图可以使用任意一个模板,一个模板可以供多个视图使用
  • 模板包含两部分
    • 静态部分,包含htmlcssjs
    • 动态部分,就是模板语言
  • Django模板语言,简写DTL,定义在django.template包中

项目准备

  • 建项目+创建应用+安装应用+配置模板路径+本地化+mysql数据库+URLconf+视图

    • mysql数据库使用之前的Bookdb

        DATABASES = {
            'default': {
                'ENGINE': 'django.db.backends.mysql', # 数据库引擎
                'NAME': 'Bookdb', # 数据库名称
                'HOST': 'localhost', # 数据库主机
                'PORT': '3306', # 数据库端口
                'USER': 'root', # 数据库用户名
                'PASSWORD': 'mysql', # 数据库密码
            }
        }
      
      # 测试项目逻辑
      url(r'^testproject/$', views.testproject),
      
      # 测试项目逻辑
      def testproject(reqeust):
        # 没有调用模板
        return HttpResponse('OK!')
      

模板处理

  • Django处理模板分为两个阶段

    • 1.加载:根据给定的路径找到模板文件,编译后放在内存中
    • 2.渲染:使用上下文数据对模板传值并返回动态生成的网页
      • 为了减少开发人员重复编写加载、渲染的代码,Django提供了简写函数render,用于加载、渲染模板
  • 模板的配置

    • DIRS定义一个目录列表,模板引擎按列表顺序搜索目录以查找模板文件,通常是在项目的根目录下创建templates目录

      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',
                ],
            },
        },
      ]
      
  • 创建模板文件

  • 加载渲染模板

      # 测试项目逻辑
      def testproject(reqeust):
          # 构造上下文
          context = {'test':'测试项目逻辑!!!'}
          # render函数加载、渲染模板
          return render(reqeust, 'Book/testproject.html', context)
    
  • 模板获取并使用上下文数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试项目逻辑</title>
</head>
<body>

<h1>{{ test }}</h1>

</body>
</html>