Django学习笔记（二）：使用Template让HTML、CS

2018-10-24 本文已影响1人亦中

Django学习笔记（二）：使用Template让HTML、CSS参与网页建立

通过本文章实现：

了解Django中Template的使用
让HTML、CSS等参与网页建立
利用静态文件应用网页样式

一、Template的使用

Template是Django利用渲染器将模板文件与数据内容结合，完成网页整合的方式。

1、Template的建立

在项目文件夹（manage.py所在路径）内，建立templates文件夹。
在setting.py中配置TEMPLATES的DIR。将setting.py文件中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',
            ],
        },
    },
]

主要是在'DIRS': [os.path.join(BASE_DIR, 'templates')]中配置。

2、编写HTML模板文件

在templates文件夹中编写drugs_index.html文件，内容如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>药品搜索</title>
</head>
<body>
<h1>{{html_time}}</h1>
</body>
</html>

文件与一般HTML一致，{{show_time}}部分表示show_time用于后续与Django进行数据通信。
点击查看HTML教程

3、Django与HTML之间的数据通信

在APP下的views.py中先引入get_template模块。

from django.shortcuts import render
from django.http import HttpResponse
import datetime
from django.template.loader import get_template


# Create your views here.
def index(request):
    # 确定引入的模板文件
    template = get_template('drugs_index.html')
    # 定义显示的内容
    time = datetime.datetime.now().strftime("%Y-%m-%d %H:%M:%S")
    views_time = '今天是：' + time
    # 将views_time通信到HTML中的html_time
    html = template.render({'html_time':views_time})
    return HttpResponse(html)

cmd中运行python manage.py runserver 0.0.0.0:8000，打开网页可看到数据通信成功。

4、CSS静态文件引入改善页面显示效果

除了在HTML中使用传统的引入方式使用CSS文件外，在Django中，CSS、JS和图片文件可以看作是静态文件，有专门的配置方式。
本笔记使用bootstrap.min.css的本地文件的方式进行演示。点击查看CSS教程

在templates文件夹中建立static子文件夹，在static文件夹内再建立css子文件夹。将bootstrap.min.css文件复制到css子文件夹内。
在settings.py中找到STATIC_URL = '/static/'，并增加内容如下：

# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/1.11/howto/static-files/
STATIC_URL = '/static/'

STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'templates/static'),
]

应用CSS与普通情况一样，直接在HTML中编辑。将drugs_index.html文件修改如下：

<!DOCTYPE html>
<!-- 加载静态文件 -->
{% load staticfiles %}
<html lang="en">
<head>
    <!-- 以链接方式引用static文件夹中的css文件 -->
    <link rel="stylesheet" href="{% static 'bootstrap.min.css' %}">
    <meta charset="UTF-8">
    <title>药品搜索</title>
</head>
<body>
<!-- 应用css文件中的样式 -->
<p class="text-center muted">{{html_time}}</p>
</body>
</html>

运行后查看网页，可看到使用了css中的样式,使文字可以居中显示，文字颜色变为灰色。