Django 模板小结

逃离我推掉我的手 2022-01-26 09:39 263阅读 0赞

前面几篇用简单的 **django.http.HttpResponse** 来把内容显示到网页上，本文将讲解如何使用 渲染模板 的方法来显示内容：

1、在上一篇的基础上，mysite工程的settings.py的INSTALLED\_APPS加入learn

INSTALLED_APPS = [
        'django.contrib.admin',
        'django.contrib.auth',
        'django.contrib.contenttypes',
        'django.contrib.sessions',
        'django.contrib.messages',
        'django.contrib.staticfiles',
        'learn'
    ]

2、在 learn目录下新建一个 templates文件夹，再在templates下建一个 learn 文件夹，在templates/learn里面新建一个 home.html，home.html内容如下：

<!DOCTYPE html>
    <html>
    <head>
        <title>测试Django demo</title>
    </head>
    <body>
    
    <h3>这里"http://127.0.0.1:8000/home/"访问后得到的网页内容</h3>
    
    </body>
    </html>

之所以，在app下的templates文件夹再建一个appname的文件夹（最终形式：app-name/templates/app-name），是因为django是遍历的方式去templates下面找文件的，如果找到了，就停止找下一个了。如果其他的app里面包含了名称一样的文件，那么在浏览器访问的结果可能不是我们所要的了。

3、打开 learn/views.py 写一个首页的视图

from django.shortcuts import render
    
    def home(request):
        return render(request, 'learn/home.html')

这里如果直接写'home.html'而不是'learn/home.html'，在浏览网址时，则会提示模板不存在：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hlbGxva2FuZHk_size_16_color_FFFFFF_t_70][]

但是这样写，并不是不可以，需要在settings.py里面修改一下：

TEMPLATES = [
        {
            'BACKEND': 'django.template.backends.django.DjangoTemplates',
            #'DIRS': [BASE_DIR,], 
            'DIRS': [os.path.join(BASE_DIR, 'learn/templates/learn'),],#包含learn的模板路径
            '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',
                ],
            },
        },
    ]

4、url.py修改如下：

urlpatterns = [
        path('home/', learn_views.home, name='home'),  # home 
        path('', learn_views.index),  # add
        path('add/', learn_views.add, name='add'),  # new
        path('add/<int:a>/<int:b>/', learn_views.add2, name='add2'),  # new + 1    
        path('admin/', admin.site.urls),
    ]

5、在浏览器输入：[http://127.0.0.1:8000/home/][http_127.0.0.1_8000_home]

![20190528181831473.png][]

6、创建数据库表（可选）

python manage.py migrate

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hlbGxva2FuZHk_size_16_color_FFFFFF_t_70 1][]

再次启动开发服务器，可以看到之前的一些提示已经消失（提示你要创建数据库之类的）

--------------------

模板补充知识：

网站模板的设计，一般的，我们做网站有一些通用的部分，比如 **导航，底部，访问统计代码等等**

**nav.html, bottom.html, stats.html**

可以写一个 base.html 来包含这些通用文件（include)

<!DOCTYPE html>
    <html>
    <head>
        <title>{% block title %}默认标题{% endblock %}</title>
    </head>
    <body>
     
    {% include 'nav.html' %}
     
    {% block content %}
    <div>这里是默认内容，所有继承自这个模板的，如果不覆盖就显示这里的默认内容。</div>
    {% endblock %}
     
    {% include 'bottom.html' %}
     
    {% include 'stats.html' %}
     
    </body>
    </html>

比如首页 home.html，继承或者说扩展(extends)原来的 **base.html，**可以简单这样写，重写部分代码（默认值的不用改）

{% extends 'base.html' %}
     
    {% block title %}欢迎光临首页{% endblock %}
     
    {% block content %}
    {% include 'ad.html' %}
    这里是首页，欢迎光临
    {% endblock %}

注意：模板一般放在app下的templates中，Django会自动去这个文件夹中找。但假如我们每个app的templates中都有一个 index.html，当我们在views.py中使用的时候，直接写一个 render(request, 'index.html')，Django 能不能找到当前 app 的 templates 文件夹中的 index.html 文件夹呢?（答案是不一定能，有可能找错）

**Django 模板查找机制**： Django 查找模板的过程是在每个 app 的 templates 文件夹中找（而不只是当前 app 中的代码只在当前的 app 的 templates 文件夹中找）。各个 app 的 templates 形成一个文件夹列表，Django 遍历这个列表，一个个文件夹进行查找，当在某一个文件夹找到的时候就停止，所有的都遍历完了还找不到指定的模板的时候就是 Template Not Found （过程类似于Python找包）。这样设计有利当然也有弊，有利是的地方是一个app可以用另一个app的模板文件，弊是有可能会找错了。所以我们使用的时候在 templates 中建立一个 app 同名的文件夹，这样就好了。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hlbGxva2FuZHk_size_16_color_FFFFFF_t_70]: /images/20220126/0265e94a4df64cb0a84d6b0d11a107df.png
[http_127.0.0.1_8000_home]: http://127.0.0.1:8000/home/
[20190528181831473.png]: /images/20220126/c3fc5386768e40238f2d55691f1ee9f0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hlbGxva2FuZHk_size_16_color_FFFFFF_t_70 1]: /images/20220126/dcb9b214c2cd49e4a33c66a08f6371e2.png