• 使用Python进行页面开发——模板层

    目录

    一、Django的模板介绍

    模板引擎配置

    二、模板语法

    1.变量

    2.标签

    3.过滤器

    4.注释

    5.模板运算

    6.自定义 标签 或 过滤器

    三、模板继承

    三层继承结构

    四、Ajax实战笔记--城市级联操作

    1. 项目架构搭建

    2. 开发《城市级联信息操作》

    一、Django的模板介绍

    • 作为Web 框架，Django 需要一种很便利的方法来动态地生成HTML。
    • 常见做法是使用模板。 模板包含所需HTML 输出的静态部分，以及一些特殊的语法，描述如何将动态内容插入。
    • 模板任务就是输出数据，输出方式：直接输出，过滤输出、判断输出，循环输出
    • 在Django框架中如何使用模板：     

            1. 在项目的settings.py配置文件中配置模板目录         

                    'DIRS': [os.path.join(BASE_DIR,'templates')],   

             2. 在应用的视图文件加载模板，并放置要输出的数据         

                    return render(request,“目录/模板文件.html”,{放置字典数据})     

            3. 在模板文件中使用变量、标签和过滤器等输出信息         

                    {{ 变量 }}    {% 标签 %}    {{ 变量|过滤器 }}

    模板引擎配置

    模板引擎使用该TEMPLATES设置进行配置。这是一个配置列表，每个引擎一个。

    默认值为空。在 settings.py由所产生的startproject命令定义一个更有用的值：

    在做下面模板配置的同时，也要在项目的根目录下创建一个templates目录

    1. # 项目目录下的settings.py配置文件添加TEMPLATES中的DIRS配置
    2. TEMPLATES = [
    3.         {
    4.             'BACKEND': 'django.template.backends.django.DjangoTemplates',
    5.             'DIRS': [os.path.join(BASE_DIR,'templates')],
    6.             'APP_DIRS': True,
    7.             'OPTIONS': {
    8.                 'context_processors': [
    9.                     'django.template.context_processors.debug',
    10.                     'django.template.context_processors.request',
    11.                     'django.contrib.auth.context_processors.auth',
    12.                     'django.contrib.messages.context_processors.messages',
    13.                 ],
    14.             },
    15.         },
    16.     ]

    二、模板语法

    1.变量

    • 变量输出语法 
      {{  var  }}
    • 当模版引擎遇到一个变量，将计算这个变量，然后将结果输出
    • 变量名必须由字母、数字、下划线（不能以下划线开头）和点组成
    • 当模版引擎遇到点(".")，会按照下列顺序查询：
      • 字典查询，例如：foo["bar"]
      • 属性或方法查询，例如：foo.bar
      • 数字索引查询，例如：foo[bar]
    • 如果变量不存在， 模版系统将插入'' (空字符串)
    • 在模板中调用方法时不能传递参数

    2.标签

    • 语法 
      {%  tag  %}
    • 作用
      • 在输出中创建文本
      • 控制循环或逻辑
      • 加载外部信息到模板中

    for标签

    1. {%  for ... in ...  %}
    2.     循环逻辑
    3.  
    4. {%  endfor  %}

    if标签

    1. {%  if ...  %}
    2.     逻辑1
    3. {%  elif ...  %}
    4.     逻辑2
    5. {%  else  %}
    6.     逻辑3
    7. {%  endif  %}

    例：

    {% if vo.state == 0 %}

                管理员

     {% elif vo.state == 1 %}

                 VIP账户

      {% else %}

                  禁用账户

       {% endif %}

     

    comment标签

    1. {%  comment  %}
    2.     多行注释
    3. {%  endcomment  %}

    include：加载模板并以标签内的参数渲染

    {%  include "base/index.html"  %}

    url：反向解析

    {%  url 'name' p1 p2  %}

    csrf_token：这个标签用于跨站请求伪造保护

    {%  csrf_token  %}

    3.过滤器

    • 语法： 
      {{  变量|过滤器  }}，例如{{  name|lower  }}，表示将变量name的值变为小写输出
    • 使用管道符号 (|)来应用过滤器
    • 通过使用过滤器来改变变量的计算结果
    • 关闭HTML自动转义 
      {{  data|safe  }}
    • 可以在if标签中使用过滤器结合运算符 
      if list1|length > 1
    • 过滤器能够被“串联”，构成过滤器链 
      name|lower|upper
    • 过滤器可以传递参数，参数使用引号包起来 
      list|join:", "
    • default：如果一个变量没有被提供，或者值为false或空，则使用默认值，否则使用变量的值 
      value|default:"什么也没有"

    • date：根据给定格式对一个date变量格式化

      value|date:'Y-m-d'

    • 官方文档内置过滤器参考：

    • 网址：Built-in template tags and filters | Django 文档 | Django

    4.注释

    • 单行注释
    {# 注释 #}
    • 多行注释
    1. {%  comment  %}
    2.       多行注释
    3. {%  endcomment  %}

    这个注释是在网页上源代码里也看不到的 

    5.模板运算

    • 加 
      1. {{  value|add:10  }}
      2. note:value=5,则结果返回15
    • 减 
      1. {{  value|add:-10  }}
      2. note:value=5,则结果返回-5，加一个负数就是减法了
    • 乘 
      1. {%  widthratio 5 1 100  %}
      2. note:等同于：(5 / 1) * 100 ，结果返回500，
      3. withratio需要三个参数，它会使用参数1/参数2*参数3的方式进行运算，进行乘法运算，使「参数2」=1
    • 除 
      1. {%  widthratio 5 100 1  %}
      2. note:等同于：(5 / 100) * 1,则结果返回0.05,和乘法一样，使「参数3」= 1就是除法了。

    6.自定义 标签 或 过滤器

    • 首先在当前应用目录下创建一个templatetags模板标签目录，建议内放一个__init__.py的空文件
    • 然后在templatetags目录下创建一个模板标签文件pagetag.py（这个名字随意取）,具体代码如下：
    1.  templatetags
    2.     ├── pagetag.py
    3.     ----------------pagetag.py-------------------------
    4.     from django import template
    5.  
    6.     register = template.Library()
    7.  
    8.     # 自定义过滤器（实现大写转换）
    9.     @register.filter
    10.     def myupper(val):
    11.         # print ('val from template:',val)
    12.         return val.upper()
    13.  
    14.     # 自定义标签（实现减法计算）
    15.     #from django.utils.html import format_html
    16.     @register.simple_tag
    17.     def jian(a,b):
    18.         res = int(a) - int(b)
    19.         return res
    • 使用：在模板文件使用 {% load pagetag %}
    1.   <h4>6. 自定义标签 h4>
    2.   {% load pagetag %}
    3.   大写：{{name|myupper}} <br/>
    4.   相减：{% jian m1 m2 %}

    三、模板继承

    • 模板继承可以减少页面内容的重复定义，实现页面内容的重用
    • 典型应用：网站的头部、尾部是一样的，这些内容可以定义在父模板中，子模板不需要重复定义
    • block标签：在父模板中预留区域，在子模板中填充
    • extends继承：继承，写在模板文件的第一行
    • 定义父模板base.html
    1. { %  block block_name  % }
    2.    这里可以定义默认值
    3.    如果不定义默认值，则表示空字符串
    4. { %  endblock  % }
    • 定义子模板index.html
    { %  extends "base.html"  % }
    • 在子模板中使用block填充预留区域
    1. { %  block block_name  % }
    2. 实际填充内容
    3. { %  endblock  % }

    说明

    • 如果在模版中使用extends标签，它必须是模版中的第一个标签
    • 不能在一个模版中定义多个相同名字的block标签
    • 子模版不必定义全部父模版中的blocks，如果子模版没有定义block，则使用了父模版中的默认值
    • 如果发现在模板中大量的复制内容，那就应该把内容移动到父模板中
    • 使用可以获取父模板中block的内容
    • 为了更好的可读性，可以给endblock标签一个名字
    1. { %  block block_name  % }
    2.     区域内容
    3. { %  endblock block_name  % }

    三层继承结构

    • 三层继承结构使代码得到最大程度的复用，并且使得添加内容更加简单

    1.创建根级模板

    • 名称为“base.html”
    • 存放整个站点共用的内容
    1. html>
    2. <html>
    3.     <head>
    4.         <title>{ %  block title  % }{ %  endblock  % } 水果超市title>
    5.     head>
    6.     <body>
    7.         top--{{logo}}
    8.         <hr/>
    9.         { %  block left  % }
    10.  
    11.         { %  endblock  % }
    12.  
    13.         { %  block content  % }
    14.  
    15.         { %  endblock  % }
    16.         <hr/>
    17.         bottom
    18.     body>
    19. html>

    2.创建分支模版

    • 继承自base.html
    • 名为“base_*.html”
    • 定义特定分支共用的内容
    • 定义base_goods.html
    1. { %  extends 'temtest/base.html'  % }
    2.  
    3. { %  block title  % }商品{ %   endblock   % }
    4.  
    5. { %  block left  % }
    6.     
      goods left
    7. { %  endblock  % }
    • 定义base_user.html
    1. { %  extends 'temtest/base.html'  % }
    2.  
    3. { %  block title  % }用户中心{ %  endblock   % }
    4.  
    5. { %  block left  % }
    6.     'blue'>user left
    7. { %  endblock  % }
    • 定义index.html，继承自base.html，不需要写left块
    1. { %  extends 'temtest/base.html'  % }
    2.  
    3. { %  block content  % }
    4.     首页内容
    5. { %  endblock content  % }

    3.为具体页面创建模板，继承自分支模板

    • 定义商品列表页goodslist.html
    1. { %  extends 'temtest/base_goods.html'  % }
    2. { %  block content  % }
    3.     商品正文列表
    4. { %  endblock content  % }
    • 定义用户密码页userpwd.html
    1. { %  extends 'temtest/base_user.html'  % }
    2. { %  block content  % }
    3.     用户密码修改
    4. { %  endblock content  % }

    4.视图调用具体页面，并传递模板中需要的数据

    • 首页视图index
    1. logo='welcome to itcast'
    2. def index(request):
    3.     return render(request, 'temtest/index.html', {'logo': logo})
    • 商品列表视图goodslist
    1. def goodslist(request):
    2.     return render(request, 'temtest/goodslist.html', {'logo': logo})
    • 用户密码视图userpwd
    1. def userpwd(request):
    2.     return render(request, 'temtest/userpwd.html', {'logo': logo})

    5.配置url

    1. from django.urls import path
    2. from . import views
    3. urlpatterns = [
    4.     path('', views.index, name='index'),
    5.     path('list/', views.goodslist, name='list'),
    6.     path('pwd/', views.userpwd, name='pwd'),
    7. ]

    四、Ajax实战笔记--城市级联操作

    • Ajax = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。
    • Ajax 不是新的编程语言，而是一种使用现有标准的新方法。
    • Ajax 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。

    1. 项目架构搭建

    • 1.1 创建项目tpdemo,创建应用myapp

      1.   # 创建项目框架tpdemo
      2.   $ django-admin startproject tpdemo
      3.  
      4.   $ cd tpdemo
      5.  
      6.   # 在项目中创建一个myapp应用
      7.   $ python manage.py startapp myapp
      8.  
      9.   # 创建模板目录
      10.   $ mkdir templates
      11.   $ mkdir templates/myapp
      12.  
      13.   $ cd ..
      14.  
      15.   $ tree tpdemo
      16.  
      17.   tpdemo
      18.   ├── tpdemo
      19.   │   ├── __init__.py
      20.   │   ├── settings.py
      21.   │   ├── urls.py
      22.   │   └── wsgi.py
      23.   ├── manage.py
      24.   ├── myapp
      25.   │   ├── admin.py
      26.   │   ├── apps.py
      27.   │   ├── __init__.py
      28.   │   ├── models.py
      29.   │   ├── tests.py
      30.   │   └── views.py
      31.   └── templates
      32.       └── mytest
    • 1.2 编辑tpdemo/tpdemo/settings.py文件，配置数据库连接
    1. ...
    2. #配置自己的服务器IP地址
    3. ALLOWED_HOSTS = ['*']
    4.  
    5. ...
    6. #添加自己应用
    7. INSTALLED_APPS = [
    8.     'django.contrib.admin',
    9.     'django.contrib.auth',
    10.     'django.contrib.contenttypes',
    11.     'django.contrib.sessions',
    12.     'django.contrib.messages',
    13.     'django.contrib.staticfiles',
    14.     'myapp',
    15. ]
    16. ...
    17.  
    18. # 配置模板路径信息
    19. TEMPLATES = [
    20.     {
    21.         'BACKEND': 'django.template.backends.django.DjangoTemplates',
    22.         'DIRS': [os.path.join(BASE_DIR,'templates')],
    23.         'APP_DIRS': True,
    24.         'OPTIONS': {
    25.             'context_processors': [
    26.                 'django.template.context_processors.debug',
    27.                 'django.template.context_processors.request',
    28.                 'django.contrib.auth.context_processors.auth',
    29.                 'django.contrib.messages.context_processors.messages',
    30.             ],
    31.         },
    32.     },
    33. ]
    34.  
    35.  
    36. ...
    37. # 数据库连接配置
    38. DATABASES = {
    39. 'default': {
    40.     'ENGINE': 'django.db.backends.mysql',
    41.     'NAME': 'mytest',
    42.     'USER': 'root',
    43.     'PASSWORD': '',
    44.     'HOST': 'localhost',
    45.     'PORT': '3306',
    46. }
    47. ...
    • 1.3 Django使用MySQL数据库需要加载 MySQLdb模块，需要安装 mysqlclient，若已经安装请略过。
       pip install  mysqlclient
    • 1.4 编写项目主路由urls配置,配置对myapp应用路由的访问连接配置: tpdemo/tpdemo/urls.py
    1.  
    2. from django.urls import include,path
    3. from django.contrib import admin
    4.  
    5. urlpatterns = [
    6.     path('admin/', admin.site.urls),
    7.     path('', include('myapp.urls')),
    8. ]

    • 1.5 配置当前应用myapp的路由配置

    • 在myapp应用目录下创建一个路由文件urls.py文件，注意此文件编码为utf-8（建议复制一个）。

    • 编辑应用中的路由配置文件：tpdemo/myapp/urls.py, 内容如下：

    1.  
    2. from django.urls import path
    3.  
    4. from . import views
    5.  
    6. urlpatterns = [
    7.     path('', views.index, name="index"),
    8. ]
    • 1.6 编写视图tpdemo/myapp/views.py
    1. from django.shortcuts import render
    2. from django.http import HttpResponse
    3.  
    4. # 网站首页
    5. def index(request):
    6.     return render(request,'myapp/index.html')
    • 1.7 定义模板并编写模板 tpdemo/templates/myapp/index.html
    1. html>
    2. <html lang="cn">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Django框架案例title>
    6. head>
    7. <body>
    8.       <h2>Django框架案例h2>
    9.  
    10.       <h4><a href="#">1. Ajax实战笔记--城市级联操作a>h4>
    11. body>
    12. html>
    • 1.8 启动服务，通过浏览器测试效果
    1. [root@localhost tpdemo]# ls
    2. tpdemo  manage.py  myapp  templates
    3.  
    4. [root@localhost tpdemo]# python manage.py runserver 0.0.0.0:8000

    2. 开发《城市级联信息操作》

    • 2.1 将提前准备好的district.sql信息导入到mydb数据库中

      在mydb数据库中存在一个district（城市区县信息表）

    • 2.2 编写model类：打开tpdemo/myapp/models.py文件

    1. from django.db import models
    2.  
    3. # 自定义城市区县信息model类
    4. class District(models.Model):
    5.     name = models.CharField(max_length=255)
    6.     upid = models.IntegerField()
    8.     class Meta:
    9.         db_table = "district"  # 指定真实表名
    • 2.3 编写子路由文件：tpdemo/myapp/urls.py
    1. ...
    2.     # 城市级联操作
    3.     path('showdistrict/', views.showdistrict, name='showdistrict'), #加载网页
    4.     path('district/', views.district, name='district'),  #Ajax加载城市信息
    5. ...
    • 2.4 编写视图文件：tpdemo/myapp/views.py
    1. from django.http import HttpResponse,JsonResponse
    2.  
    3. from myapp.models import District
    4.  
    5. ...
    6. # 加载城市级联信息操作模板
    7. def showdistrict(request):
    8.     return render(request,"myapp/district.html")
    9.  
    10. # 加载对应的城市信息，并json格式ajax方式响应
    11. def district(request,upid):
    12.     dlist = District.objects.filter(upid=upid)
    13.     list = []
    14.     for ob in dlist:
    15.         list.append({'id':ob.id,'name':ob.name})
    16.     return JsonResponse({'data':list})
    17. ...

    • 启动服务测试：url：http://localhost:8000/district/0 加载一级城市信息

    • 2.5 开发网页前端的准备：首先启用静态资源目录

      • 在项目的根目录下创建一个静态资源目录：static 路径：tpdemo/static
      • 并在此目录下创建一个js目录。然后将jquery文件：jquery-1.8.2.min.js放到此目录中 具体位置：tpdemo/static/js/jquery-1.8.2.min.js
      • 编辑tpdemo/tpdemo/settings.py配置文件，在最后加入代码：(配置静态资源目录)
    1. ...
    2. STATIC_URL = '/static/'
    3.  
    4. STATICFILES_DIRS = [
    5.     os.path.join(BASE_DIR,'static'),
    6. ]
    • 2.6 配置访问url：编辑tpdemo/templates/myapp/index.html
    1. ...
    2.    <h4><a href="{% url 'showdistrict' %}">1. Ajax实战笔记--城市级联操作a>h4> 
    3. ...
    • 2.7 定义并编写模板文件：tpdemo/templates/myapp/district.html
    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Ajax实战--城市级联操作title>
    6.     <script type="text/javascript" src="/static/js/jquery-1.8.2.min.js">script>
    7.     <script type="text/javascript">
    8.         //编写js代码
    9.         $(function(){
    10.             $.ajax({
    11.                 type:'get',
    12.                 url:"{% url 'district' 0 %}",
    13.                 dataType:'json',
    14.                 async: false,
    15.                 success:function(res){
    16.                     list = res.data;
    17.                     //遍历响应的城市信息
    18.                     for(var i=0;ilength;i++){
    19.                         $("#cid").append("+list[i].name+"");
    20.                     }
    21.                 },
    22.             });
    23.  
    24.             //获取最后一个下拉框并添加选中事件
    25.             $("select").live('change',function(){
    26.                 //获取选中的id号
    27.                 var id = $(this).val();
    28.                 $(this).nextAll().remove();
    29.                 $.ajax({
    30.                     url: "/district/"+id,
    31.                     type: 'get',
    32.                     data: {},
    33.                     dataType:'json',
    34.                     success:function(res){
    35.                         if(res.data.length<1)
    36.                             return;
    37.                         var data = res.data;
    38.                         var select = $("")
    39.                         for(var i=0;ilength;i++){
    40.                             $('+'">'+data[i].name+'').appendTo(select)
    41.                             //$('select:last').append(''); 
    42.                         }
    43.                         $("select:last").after(select);
    44.                     }
    45.                 });
    46.             });
    47.  
    48.         })
    49.  
    50.     script>
    51. head>
    52. <body>
    53.     <h2>Ajax实战笔记--城市级联操作h2>
    54.  
    55.     <select id="cid">
    56.         <option>-请选择-option>
    57.     select>
    58. body>
    59. html>

     

     

     

     

  • 相关阅读:
    外包干了3个月，技术退步明显。。。。。
    爬虫02-python爬虫使用的库及详解
    基于深度神经网络的图像识别技术研究
    大腿神经网络解剖图片,大腿神经网络解剖图谱
    什么样的人最适合做软件测试---喜欢找人帮忙办事的人
    java计算机毕业设计-学生宿舍故障报修管理信息系统-源码+数据库+系统+lw文档+mybatis+运行部署
    工具推荐 StartTool
    老卫带你学---leetcode刷题(10. 正则表达式匹配)
    基于Opencv c++图像三维空间旋转（使用二维旋转、缩放进行代替的方式---思路转换）
    RabbitMQ系列【2】核心概念
  • 原文地址：https://blog.csdn.net/weixin_63994459/article/details/126094802