前言
大家好,我是小雨!
今天我们要介绍的知识点是 Django 中的 Templates,它也是 MVT 结构中的 T,Templates 可以叫它模板。Templates 究竟用来做什么,通过这一节的介绍,希望大家有一个基本的了解。
一、Templates 模板
在上一节当中,我们在浏览器中看到的是 HTTPResponse 返回的字符串,而这一节我们讲的 templates 最直接的功能是把前端的 html 页面显示出来,这样用户就能看到清晰美观的界面。那么 Django 是如何加载 html 网页的呢?下面介绍两种方式:
1.使用 render_to_string 加载 html
我们提前准备好一个 html 页面index.html,然后为了方便 views 中能成功访问到这个index.html,需要在settings.py中将templates文件夹的路径声明清楚。在 TEMPLATES 列表字典的DIRS属性下添加一下内容:
os.path.join(BASE_DIR,?'templates')??#?如果缺少os模块记得导入
render_to_string 的使用方法: 先使用from django.templates.loader import render_to_string导入模块,然后给 render_to_string 传入 html 文件后,最后将其以 HttpResponse 的方式返回出去即可。
from?django.http?import?HttpResponse
from?django.templates.loader?import?render_to_string
def?index(request):
????html?=?render_to_string("index.html")
????return?HttpResponse(html)
2. 使用 render 加载 html
这里我们需要从django.shortcut导入 render 模块,一般情况下 Django 会默认导入这个模块,views 中如果没有的话就手动导入一下:
from?django.shortcut?import?render
接着 render 中传入 html 文件,记得添加 request 参数,然后使用 return 返回 render 即可:
def?index(request):
????return?render(request,'index.html')
最后记得在 urls.py 中将路径对应的 views.index 添加进来就可以了。
二、模板语言的基本使用
我们要知道 templates 作为 MVT 架构中的 T,不仅仅是加载前端中的页面,它还包含一种模板语言,能够在 htmlL 语言中实现逻辑控制(条件选择、循环),相对于 JavaScript 会更加的灵活。
接下来,我们就以一个简单的例子来介绍 Django 模板语言的使用。
1.功能需求分析
我们有一个存储学生信息的Students.csv文件,包含了学号、姓名、性别、手机号码、出生日期、电子邮箱等信息。
319001,赵一,男,1998/12/27,18706012232,532211428@qq.com,北京市海淀区颐和园路5号,342622199801144314,2019/9/1,计算机,赵一,13655512212
319002,钱二,女,1995/10/25,13459732456,572501101@qq.com,北京市海淀区双清路30号,342622199709066819,2019/9/1,物联网,王二,13856909992
这里数据其实有很多条,为了减少篇幅我们就罗列出两条。
现在需要将这些数据加载到前端的 html 页面中,通过 tabel 标签显示出来。
2. 实现过程
(1)准备
首先用 pycharm 新建一个 Django 项目,为了方便使用直接把 application 和 templates 文件夹都建好。
在 templates 中新建一个 index.html 文件,写好用于显示学生信息的标题以及表格框架。
学生信息列表
????
????????
????????????
????????????????学号
????????????????姓名
????????????????性别
????????????????出生日期
????????????????手机号码
????????????????电子邮箱
????????????????家庭地址
????????????
????????
????????
????????
????
(2)views 设置
为了读取 csv 文件,写一个read_form_file方法,将文件中的信息存储在 Students 列表中。
def?read_from_file(path:str):
????students?=?[]
????try:
????????with?open(path,?mode="r",?encoding="UTF-8")?as?fd:
????????????#?读取当前行
????????????current_line?=?fd.readline()
????????????#?判断当前行是否为空
????????????while?current_line:
????????????????temp_line?=?current_line.split(",")
????????????????students.append(temp_line)
????????????????current_line?=?fd.readline()
????????return?students
????except?Exception?as?e:
????????raise?e
接下来,我们定义一个 student 方法,用来显示 html 内容给前端,这里面我们还是使用 render 将获取的数据传递给前端页面index.html。
注意使用 context 参数,它的值我们设置为一个字典,键设置为 DTL 模板语言中要引用的变量,值设置为本地获取的数据
def?student(request):
????students?=?read_from_file(r"D:\Python\Project\Demo\Student.csv")
????return?render(request,?"index.html",?context={"all_student":students})
(3)DTL 模板语言
在index.html中,表格内容的填充,我们通过 DTL 模板语言来完成。在 HTML 代码中要插入 DTL 模板语言,需要使用{%语句%},for 语句还要使用{% endfor %}来结尾,在语句内部调用变量列表中的元素也是直接使用变量名.数字并且需要包裹两层大括号。这里我们以循环输出 student 列表中的各个元素为例,其 DTL 模板语言的写法如下:
?{%?for?student?in?all_student?%}
????
????{{?student.0?}}
????{{?student.1?}}
????{{?student.2?}}
????{{?student.3?}}
????{{?student.4?}}
????{{?student.5?}}
????{{?student.6?}}
????
?{%?endfor?%}
(4)urls 配置
接下来配置路由,添加 student 路径
path('student/',app01_views.student),
(5)运行效果
一切准备就绪后,执行python manage.py runserver,在浏览器中打开127.0.0.1:8000/student效果如下:
三、加载静态文件
1. 什么是静态文件
不能与服务器做动态交互的文件叫静态文件; 对于 HTML 中的图片、视频、css、js 这些都属于静态文件。Django 对于这些文件有一套明确的管理机制。 如果我们只遵循 HTML 的规范去加载静态文件,在 Django 中是显示不出来的。
2. 如何加载静态文件
为了解决这个问题,我们首先要确保配置文件 settings.py 中 INSTALLED_APP 下静态文件模块有被加载到:
'django.contrib.staticfiles',??#?必须确保安装静态模块
然后使用STATICFILES_DIRS这个全局变量来存储静态文件的路径。
STATICFILES_DIRS?=?[
????os.path.join(BASE.DIR,?'static'),
]
然后在 html 中开始加上模板语言,如果让 html 引用静态文件,那就需要先导入静态模块。在 html 语句第一行写上
{%?load?static?%}
对于要引用静态图片的标签路径使用{% static "路径文件名 "%},如:
![]()
这样 Django 就能显示静态文件图片了。
3. 显示效果
4. 注意事项
一般情况下,static 文件夹我们会放在app目录下。这时候访问静态文件,则需要在STATICFILES_DIRS的 os.path.join 参数中再多添加一个子文件夹名,可以写成:
STATICFILES_DIRS?=?[
????os.path.join(BASE.DIR,?'app01','static'),
]
5. 直接访问静态文件
在 Django 配置的文件 settings.py 中有一个全局变量STATIC_URL,它定义了一个给外界用户直接访问静态文件的路径。 上面我们添加在标题中的 logo.png,我们可以在浏览器中直接通过
127.0.0.1:8000/student/static/logo.png来访问。
四、加载静态文件综合案例
为了更好地巩固 Django 加载静态文件的知识,我们做一个小案例。学生信息管理系统的登录页面。有显示图片 logo,有用户名和密码的输入框,并且有提交按钮。当点击按钮时,会弹出提示表示登录成功。
这里简单说明一下:
界面采用了 Bootstrap 框架,登录按钮的功能函数用了 jQuery 脚本。关于前端的知识我们这里就不做过多介绍了。
{%?load?static?%}
????
????login
????
????
????
????
????
????
????
????????
????????????
????????
????
将以上 html 文件保存在 templates 中,在 views 中配置好方法,urls 中配置好路由,最后在 settings 中配置好静态文件路径,最后启动 Django 服务器,页面显示效果如下:
效果演示:
最后
本节,我们介绍了 Django 中 templates 的知识,Django 加载 HTML 方法、模板的语言的使用,以及加载静态文件的方法。希望大家多多练习,才能巩固所学的知识。下一节我们将继续介绍 Django 中 URL 跳转的知识!
感谢大家的阅读!