MTV框架之Template(模板/界面)

关注公众号“轻松学编程”了解更多。

1、模板目录位置

  • 应用下

    • 不需要注册
    • 无法跨应用地进行复用
  • 工程下

    • 需要注册

      • settings.py范例

        # django默认的模板配置
        TEMPLATES = [
        {
        ...,
        # 模板路径
        'DIRS': [
        os.path.join(BASE_DIR, 'templates'),
        ],
        ...
        },
        ]
    • 可以在不同应用中复用

1.1Django框架自带模板位置

2、模板语法

2.1 读取数据
  • {{ xxx }}
  • {{ xxx.attr }}
  • {{ xxx.method }}
  • {{ xxx.i }}
  • {{ xxx.key }}
2.2 注释
  • {# 模板注释是不可见的 (在html页面中是看不到的) #}
  • {% comment %}…{% endcomment %}
  • 注释多行内容
2.3 模板内计算
  • 加减

    • {{ value|add:10 }} //value加10
    • {{ value|add:-10 }} //value减10
  • 乘除
    • {% widthratio a b c %} //widthratio 是关键字

      • a/b*c
  • 大小写转换
    • {{ animal.a_name|lower }} //小写
    • {{ animal.a_name|upper }} //大写
  • 判断是否整除
    • {% if forloop.counter|divisibleby:2 %} //如果循环变量的下标整除2
  • 连接容器内元素
    • {{ animals|join:’=’ }}
2.4 加载静态文件
  • {% load static %}

  • {% load staticfiles %}

  • #访问静态资源
    <img src="{% static 'img/dragon.gif' %}">
    <img src="/static/img/dragon.gif">
    <img src="{% static imgName %}"> #imgName是一个变量,由视图层传过来
  • settings.py配置

    • 静态文件夹位置

    • 访问路由

    -#静态文件访问路由
    STATIC_URL = '/static/' #静态文件存储目录:根目录/static/
    STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'static'),
    ]
2.5 流程控制
  • 遍历

    • {% if forloop.first %} //如果第一个循环变量为真

    • {% if forloop.last %} //如果最后一个循环变量为真

    • {{ forloop.counter0 }}

      • 正序下标,索引从0开始
    • {{ forloop.counter }}

      • 正序下标,索引从1开始算
    • {{ forloop.revcounter }}

      • 索引从最大长度到1
    • forloop.revcounter0

      • 索引从最大长度到0
    • forloop.parentloop

      • 获取上一层 for 循环的 forloop
    • {% empty %}

      • 当列表为空时用 for empty

        {% for animal in animals %}
        <li>{{ animal.a_name }}</li>
        {% empty %}
        <h3>动物都跑啦</h3>
        {% endfor %}
        #当animals为空时,才会显示<h3>标签

for循环中使用变量:

{% for i in comments %}
<blockquote>
<p>{{ i.user.name }}:</p>
<p>{{ i.content }}</p>
<small><a href="{% url 'good' i.id book.id %}">点赞({{ i.good }})</a>
</small>
</blockquote>
{% endfor %}
  • if条件

    • {% if forloop.first %}…{% elif forloop.last %}…{% else %}…{% endif %}
    • {% ifequal value1 value2 %}…{% else %}…{% endifequal %}
      • 如果value1==value2
    • {% ifnotequal value1 value2 %}…{% else %}…{% endifnotequal %}
      • 如果value1!=value2
2.6 转义开关

html转义就是将 html关键字(包括标签,特殊字符等) 进行过滤替换.

过滤替换格式如下:

假设:content=<h1>hello world</h1>
  • 转义

    • {% autoescape off %} {{ content }} {% endautoescape %}

      • 关闭自动抑制——进行转义
        浏览器输出一号标题hello world
    • {{ content|safe }}

      • 确认数据是安全的——对数据进行转义
        浏览器输出一号标题hello world
  • 抑制

    直接展示数据模式使用抑制(不转义)
    • {% autoescape on %} {{ content }} {% endautoescape %}

    • {{ content }}

      • 浏览器直接输出:<h1>hello world</h1>
    2.7 继承与兼并
    • {% extends ‘base_main.html’ %}

      • 继承父模板
    • {% include xxx.html %}

      • 兼并另一个模板使之成为页面的一部分
    • 父模板

    {% block header %}
    {% endblock %}

      #重写父模板的当前块
    {% block header %}
    ...
    {% endblock %}
    • {{ block.super }}

      • 引用父模板对当前块的实现
2.8 翻页框架
  • 引入

    • 样式

      • <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/css/swiper.css">
        
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/css/swiper.min.css">
        
        
    • 脚本

      • <script src="https://cdn.bootcss.com/jquery/1.11.1/jquery.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/js/swiper.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/js/swiper.jquery.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/js/swiper.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/js/swiper.jquery.min.js"></script>
  • 样式

    • <div class="swiper-container" id="topSwiper">
      • 外层包裹,需要配合脚本使用
    • <div class="swiper-wrapper">
      • 翻页包装器
    • <div class="swiper-slide">...</div>
      • 分页内容1
    • <div class="swiper-slide">...</div>
      • 分页内容2
    • 如果需要分页器

      • <div class="swiper-pagination"></div>
    • 如果需要导航按钮

      • <div class="swiper-button-prev"></div>
    • 如果需要滚动条

      • <div class="swiper-scrollbar"></div>
  • 脚本

            $(function () {
    var swiper = Swiper(".swiper-container",{});
    })

例子:

{% load static %}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{{ title }}</title>
<style type="text/css">
.swiper-container img {
height: 300px;
}
</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/css/swiper.min.css"> <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/js/swiper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/js/swiper.jquery.min.js"></script> </head>
<body>
{# 轮播 #}
<div class="swiper-container" style=" text-align: center;">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="{% static 'img/c++.jpg' %}">
</div>
<div class="swiper-slide">
<img src="{% static 'img/python.jpg' %}">
</div>
<div class="swiper-slide">
<img src="{% static 'img/go.jpg' %}">
</div>
</div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination"></div> <!-- 如果需要导航按钮 -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div> <!-- 如果需要滚动条 -->
<div class="swiper-scrollbar"></div>
</div>
<script>
$(function () {
var mySwiper = new Swiper(
'.swiper-container',
{
direction: 'horizontal',
loop: true, // 如果需要分页器
pagination: '.swiper-pagination', // 如果需要前进后退按钮
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev', // 如果需要滚动条
scrollbar: '.swiper-scrollbar',
}
)
}) </script>
</body> </html>

效果图:

2,9 模板渲染过程
 加载模板
- template = loader.get_template('Hello.html')
<class 'django.template.backends.django.Template'>
- 渲染模板
result = template.render()
<class 'django.utils.safestring.SafeText'>
result = template.render(context={"haha":"你哈什么哈"})
- 渲染时给模板传递数据

后记

【后记】为了让大家能够轻松学编程,我创建了一个公众号【轻松学编程】,里面有让你快速学会编程的文章,当然也有一些干货提高你的编程水平,也有一些编程项目适合做一些课程设计等课题。

也可加我微信【1257309054】,拉你进群,大家一起交流学习。
如果文章对您有帮助,请我喝杯咖啡吧!

公众号

关注我,我们一起成长~~

python框架Django中MTV框架之Template(模板/界面)的更多相关文章

  1. python框架Django中MTV框架之VIew(业务控制器)

    MTV框架之VIew(业务控制器) 关注公众号"轻松学编程"了解更多. 1.什么是视图 视图层=路由表(urls.py)+视图函数(views.py) 其角色相当于MVC中的Con ...

  2. python框架Django中MTV之Model(数据模型)

    MTV框架之Model(数据模型) 关注公众号"轻松学编程"了解更多. 1.连接MySQL数据库 项目中的settings.py设置范例 # 配置数据库 DATABASES = { ...

  3. 写写Django中DRF框架概述以及序列化器对象serializer的构造方法以及使用

    写写Django中DRF框架概述以及序列化器对象serializer的构造方法以及使用 一.了解什么是DRF DRF: Django REST framework Django REST framew ...

  4. python框架Django中的MTV架构

    MTV架构 关注公众号"轻松学编程"了解更多. ​ 通过V对M和T进行连接,用户通过T(界面)对服务器进行访问(发送请求),T把请求传给V(调度),V调用M(数据模型)获取数据,把 ...

  5. python框架django中结合vue进行前后端分离

    一:创建django项目 1.django-admin startproject mysite # 创建mysite项目 2.django-admin startapp app01# 创建app01应 ...

  6. 测试开发之Django——No4.Django中前端框架的配置与添加

    我们在开发一个web项目的时候,虽然我们不是专业开发,但是我们也想要做出来一个美美的前端页面. 这种时候,百度上铺天盖地的前端框架就是我们的最好选择了. 当然,在网上直接下载的框架,我们是不能直接用的 ...

  7. Python—在Django中使用Celery

    一.Django中的请求 Django Web中从一个http请求发起,到获得响应返回html页面的流程大致如下: http请求发起 经过中间件 http handling(request解析) ur ...

  8. python django中restful框架的使用

    在使用django进行前后台分离开发时通常会搭配django-rest-framework框架创建RESTful风格的接口API.框架介绍及版本要求可参考官方地址:https://www.django ...

  9. 在python的web框架Django中使用SQL Server

    在pycharm中安装 安装pyodbc和Django——pyodbc是一个用python写的ODBC引擎 安装Django-pyodbc-azure                  在后方网址中查 ...

随机推荐

  1. centos7安装YouCompleteMe,vim打造成C++的IDE

    一.安装python3 1.安装编译工具 yum -y groupinstall "Development tools" yum -y install zlib-devel bzi ...

  2. CUMTCTF'2020 未完成 wp

    Web babysqli burp抓包,发现有 的过滤,用/**/过滤空格. 报错注入 payload username=admin&password='/**/or/**/extractva ...

  3. 003 01 Android 零基础入门 01 Java基础语法 01 Java初识 03 Java程序的执行流程

    003 01 Android 零基础入门 01 Java基础语法 01 Java初识 03 Java程序的执行流程 Java程序长啥样? 首先编写一个Java程序 记事本编写程序 打开记事本 1.wi ...

  4. Makefile常用函数(转)

    一.字符串处理函数 1.$(subst FROM,TO,TEXT) 函数名称:字符串替换函数-subst. 函数功能:把字串"TEXT"中的"FROM"字符替换 ...

  5. 多测师讲解接口测试 _linux中搭建环境cms_高级讲师肖sir

    cms后台的搭建, 我们主要是用来做接口测试和接口自动化测试: 我们搭建的流程和之前搭建多有米一样: 后期给我们一个war包就要知道搭建一个文档: 要知道环境项目怎么讲?   讲解下搭建cms环境的流 ...

  6. Kubernetes K8S之存储ConfigMap详解

    K8S之存储ConfigMap概述与说明,并详解常用ConfigMap示例 主机配置规划 服务器名称(hostname) 系统版本 配置 内网IP 外网IP(模拟) k8s-master CentOS ...

  7. day18 Pyhton学习 内置函数最后七个

    1. enumerate  枚举函数 for i in enumerate(['a','b','c'],1): print(i)#(1, 'a')(2, 'b')(3, 'c') goods_lst= ...

  8. pytest学习纪要123-针对经常用到的内容详实记录

    pytest123 本文主要参考:https://www.cnblogs.com/yoyoketang/tag/pytest 如有侵权,请站内联系我 目录 pytest123 1.setup和tear ...

  9. <二分查找+双指针+前缀和>解决子数组和排序后的区间和

    <二分查找+双指针+前缀和>解决子数组和排序后的区间和 题目重现: 给你一个数组 nums ,它包含 n 个正整数.你需要计算所有非空连续子数组的和,并将它们按升序排序,得到一个新的包含 ...

  10. Zookeeper入门看这篇就够了

    https://blog.csdn.net/java_66666/article/details/81015302