Django之旅：第三节--templates模版的使用
一、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>