Django之旅：第三节--templates模版的使用

本文链接：https://blog.youkuaiyun.com/qq_38934189/article/details/146323092

一、templates目录新建

方式一：

1、在app目录下新建templates目录，（默认先在app目录里面找）

2、在templates目录下新疆html文件（views视图所需要的html）

注：根据app的注册顺序，逐一去他们的templates目录下寻找

方式二：

1、在项目的根目录下创建templates目录

2、在settings.py文件里面设置（设置后，优先在根目录找，如果找不到，在根据默认注册app顺序寻找）

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
         #修改此处
        'DIRS': [BASE_DIR+"/templatec"],
        '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',
            ],
        },
    },
]

二、静态文件

在开发中过程中一般会将：图片、css、js，都会当作静态文件处理。

会在app下新创建static目录，并在static目录里面创建css、img、js、plugins目录。

1、css引用使用方法：

{% load static %} #顶部写入
#推荐路径使用该方法
<head>
    <link rel="stylesheet" href="{% static 'plugins/bootstrap-4.0.0-dist/css/bootstrap.css' %}">
</head>

2、js引用使用方法

{% load static %} #顶部写入
<!DOCTYPE html>
<html>
<head></head>
<body>
    <script src="{% static 'js/jquery-3.6.0.min.js' %}"></script>
    <script src="{% static 'plugins/bootstrap-4.0.0-dist/js/bootstrap.js' %}"></script>
</body>
</html>

三、模版语法

本质：在HTML中写一些占位符。由数据对这些占位符进行替换和处理。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>模版语法的学习</h1>

<div>列表{{ n1 }}</div>
<div>{{ n2.0 }}</div>

<div>
    <h5>列表for的语法</h5>
    {% for item in n2 %}
        <span>{{ item }}</span>
    {% endfor %}
</div>
<hr>
<h5>字典for的语法</h5>
{{ n3 }}
{{ n3.name }}
{{ n3.roles }}
<ul>
    {% for v in n3.values %}
        <li>{{ v }}</li>
    {% endfor %}
</ul>
<hr>
<h5>列表和字典混合for的语法</h5>
<span>列表：{{ n4 }}</span>
<br>
{% for n11 in n4 %}
    <span>字典：{{ n11 }}</span>
    {% for i in n11.items %}
        <h3>i:::{{ i }}</h3>
    {% endfor %}
    {#    {% for a,va in {{ foo }} %}#}
    <span>va</span>
{% endfor %}

<hr>
<h5>判断语法</h5>
{% if n1 == 'hanc' %}
    <h2>duiduidui</h2>
{% elif n1 == 'wewe' %}
    <h2>2222</h2>

{% else %}
    <h2>333</h2>

{% endif %}




<input type="text" id="realTimeInput" placeholder="输入内容">
<p id="displayText">正在输入：：</p>

<script>
document.getElementById("realTimeInput").addEventListener("input", function(e) {
  const value = e.target.value;
  document.getElementById("displayText").textContent = "当前输入: " + value;
});
</script>

</body>
</html>