Django框架学习笔记(三)Templates模板

前言

大家好,我是小雨!
这一节,要介绍的知识点是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文件夹都建好。


图片.png

在templates中新建一个index.html文件,写好用于显示学生信息的标题以及表格框架。

<div id="title">学生信息列表</div>
<div id="table_main">
    <table border="1">
        <thead>
            <tr>
                <th>学号</th>
                <th>姓名</th>
                <th>性别</th>
                <th>出生日期</th>
                <th>手机号码</th>
                <th>电子邮箱</th>
                <th>家庭地址</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
</div>

(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 %}
    <tr>
    <td>{{ student.0 }}</td>
    <td>{{ student.1 }}</td>
    <td>{{ student.2 }}</td>
    <td>{{ student.3 }}</td>
    <td>{{ student.4 }}</td>
    <td>{{ student.5 }}</td>
    <td>{{ student.6 }}</td>
    </tr>
 {% 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中是显示不出来的。


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 "路径文件名 "%},如:

<img src="{% static "logo.png"%}">

这样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 %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>login</title>
    <!--加载外部的CSS文件-->
    <link type="text/css" rel="stylesheet" href="{% static "css/bootstrap.min.css" %}">
    <link type="text/css" rel="stylesheet" href="{% static "css/basic.css" %}">
    <!--加载外部的js文件-->
    <script src="{% static "js/jquery.min.js" %}"></script>
    <script src="{% static "js/login.js" %}"></script>
</head>
<body>
    <div class="container">
        <div id = "login">
            <form class="form">
                <h2><img src="{% static "imags/mainlogo.png" %}"></h2>
                <h2>学生信息管理系统登录</h2>
                <hr>
                <hr>
                <div class="form-group">
                    <label for="user">用户名:</label>
                    <input type="text" class="form-control" placeholder="请输入用户名" id="user">
                </div>
                <div class="form-group">
                    <label for="password">密码</label>
                    <input type="password" class="form-control" placeholder="请输入密码" id="password">
                </div>
                <div class="form-group">
                    <div class="checkbox">
                        <label>
                            <input type="checkbox">请记住我
                        </label>
                    </div>
                </div>
                <button id="submit01" class="form-control">提交</button>
            </form>
        </div>
    </div>
</body>
</html>

将以上html文件保存在templates中,在views中配置好方法,urls中配置好路由,最后在settings中配置好静态文件路径,最后启动Django服务器,页面显示效果如下:

效果演示:
登录页面案例演示

最后

本节,我们介绍了Django中templates的知识,Django加载HTML方法、模板的语言的使用,以及加载静态文件的方法。希望大家多多练习,才能巩固所学的知识。下一节我们将继续介绍Django中URL跳转的知识!

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 215,463评论 6 497
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,868评论 3 391
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 161,213评论 0 351
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,666评论 1 290
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,759评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,725评论 1 294
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,716评论 3 415
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,484评论 0 270
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,928评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,233评论 2 331
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,393评论 1 345
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,073评论 5 340
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,718评论 3 324
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,308评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,538评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,338评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,260评论 2 352

推荐阅读更多精彩内容