Django加Vue电商项目实战03 模板

前言

学无止境,无止境学。大家好,我是张大鹏,之前在抖音有5万多粉丝,不过现在不拍视频,专心写公众号了。笔者目前是高级Python工程师,之前是全栈工程师,主要擅长Golang和Python开发,对于JavaVue,React也有一些研究。工作之余,喜欢学习和分享,希望能够通过此公众号”张大鹏520″,将自己学到的东西分享给大家,和大家一起交流,一起成长,一起进步。

今天要给大家分享的是《Django加Vue电商项目实战03 模板》,这是一个系列的教程,从零基础到项目实战。在本教程中,我会给大家介绍Django的模板相关的知识。比如模板变量,模板标签,模板继承等。还会配套相关的练习,大家学完以后可以自行通过练习题巩固和加深对知识点的理解。

如果大家需要本教程的PDF电子书或者完整的源码,可以在文末找到获取方式哈。

环境搭建

安装依赖

pip install django

创建项目

# 创建项目
django-admin startproject z04_django_templates

#
 创建静态目录和模板目录
cd z04_django_templates
mkdir static
mkdir templates

#
 创建应用
python manage.py startapp index

配置项目

配置应用:

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'index',
]

配置模板目录:

TEMPLATES = [
    {
        'BACKEND''django.template.backends.django.DjangoTemplates',
        'DIRS': [BASE_DIR / 'templates'],
        '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',
            ],
        },
    },
]

配置语言和时区:

LANGUAGE_CODE = 'zh-hans'
TIME_ZONE = 'Asia/Shanghai'
USE_I18N = True
USE_TZ = True

配置静态目录:

STATICFILES_DIRS = [BASE_DIR / 'static']
STATIC_URL = '/static/'
if not DEBUG:
    STATIC_ROOT = BASE_DIR / 'static'

启动测试

在项目目录执行以下命令启动服务:

python manage.py runserver

模板

路由设计

总路由:

from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include("index.urls")),
]

子路由:

from django.urls import path

from . import views

app_name = 'index'
urlpatterns = [
    path('', views.index, name='index'),
]

视图函数:

from django.shortcuts import render


def index(request):
    return render(request, "index.html")

模板:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>测试路径</h1>
<ul>
    <li><a href="{% url 'index:index' %}">/</a></li>
</ul>
</body>
</html>

测试地址:http://127.0.0.1:8000/

模板变量

路由设计:

from django.urls import path

from . import views

app_name = 'index'
urlpatterns = [
    # 模板变量
    path('var/', views.var, name='var'),
]

视图函数:

def var(request):
    # 列表对象
    lists = ['Java''Python''C''C#''JavaScript']

    # 字典对象
    dicts = {'姓名''张三''年龄'25'性别''男'}

    return render(request, 'var.html', {'lists': lists, 'dicts': dicts})

模板:

{{ lists }}
<table border=1>
    <tr>
        <td>{{ lists.0 }}</td>
        <td>{{ lists.1 }}</td>
        <td>{{ lists.2 }}</td>
        <td>{{ lists.3 }}</td>
        <td>{{ lists.4 }}</td>
    </tr>
</table>
<br>

{{ dicts }}
<table border=1>
    <tr>
        <td>{{ dicts.姓名 }}</td>
        <td>{{ dicts.年龄 }}</td>
        <td>{{ dicts.性别 }}</td>
    </tr>
</table>

测试地址:http://127.0.0.1:8000/var/

循环标签

路由设计:

from django.urls import path

from . import views

app_name = 'index'
urlpatterns = [
    # 循环标签
    path('test_for/', views.test_for, name='test_for'),
]

视图函数:

def test_for(request):
    dict1 = {'书名''Django开发''价格'80'作者''张三'}
    dict2 = {'书名''Python开发''价格'90'作者''李四'}
    dict3 = {'书名''Java开发''价格'100'作者''王五'}
    lists = [dict1, dict2, dict3]
    return render(request, 'test_for.html', {'lists': lists})

模板:

<table border=1>
    {% for list in lists %}
        {% if forloop.first %}<!-- 如果是第一条记录-->
        <tr>
            <td>第一个值:{{ list.书名 }}</td>
        </tr>
        {% endif%}
        <tr>
            <td>当前值:{{ list.书名 }},价格:{{ list.价格 }},当前正序索引{{ forloop.counter0 }},当前倒序索引{{ forloop.revcounter0 }}</td>
        </tr>
        {% if forloop.last %}<!-- 如果是最后一条记录-->
        <tr>
            <td>最后一个值:{{ list.书名 }}</td>
        </tr>
        {% endif%}
    {% endfor %}
</table>

测试地址:http://127.0.0.1:8000/test_for/

模板过滤器

路由设计:

from django.urls import path

from . import views

app_name = 'index'
urlpatterns = [
    # 模板过滤器
    path('test_filter/', views.test_filter, name='test_filter'),
]

视图函数:

def test_filter(request):
    str1 = "abcdefg"
    str2 = "ABCDEFG"
    slice_str = "1234567890"
    time_str = datetime.datetime.now()
    return render(request, 'test_filter.html',
                  {
                      "str1": str1,
                      "str2": str2,
                      "slice_str": slice_str,
                      "time_str": time_str
                  })

模板:

小写转大写:{{ str1|upper }}<br>
大写转小写:{{ str2|lower }}<br>
切片操作:{{ slice_str|slice:"2:4" }}<br>
时间格式化:{{ time_str|date:"Y-m-d G:i:s" }}<br>

测试地址:http://127.0.0.1:8000/test_filter/

模板转义

路由设计:

from django.urls import path

from . import views

app_name = 'index'
urlpatterns = [
    # 模板转义
    path('test_safe/', views.test_safe, name='test_safe'),
]

视图函数:

def test_safe(request):
    html_addr = "<table border=1><tr><td>这是一个表格</td></tr></table>"
    html_script = "<script language='javascript'>document.write('非法执行');</script>"
    return render(request, 'test_safe.html', {
        "html_addr": html_addr,
        "html_script": html_script
    })

模板:

关闭模板转义-表格:{{ html_addr|safe }}
默认模板转义-表格:{{ html_addr }}<br>

默认模板转义-脚本:{{ html_script }}<br>
关闭模板转义-脚本:{{ html_script|safe }}<br>

测试地址:http://127.0.0.1:8000/test_safe/

模板高级用法

自定义模板过滤器

要自定义模板过滤器,必须将代码放在templatetags包里面,在这个包里面创建模块,然后在模板中使用{% load 模块名 %}加载该模块中自定义的标签。

自定义过滤器:

from django import template

# 创建模板注册器
register = template.Library()


@register.filter
def show_title(value, n):
    """
    自定义模板过滤器并注册
    :param value: 要渲染的内容
    :param n: 参数
    :return: 过滤结果
    """

    # 如果值的长度大于n,则多余的部分用省略号代替
    if value.__len__() > n:
        return f'{value[0:n]}...'
    else:
        return value

路由设计:

from django.urls import path

from . import views

app_name = 'index'
urlpatterns = [
    # 自定义过滤器
    path('diy_filter/', views.diy_filter, name='diy_filter'),
]

视图函数:

def diy_filter(request):
    """自定义模板过滤器"""
    dict1 = {'标题''学习Python的好方法就是每天不间断的写代码'}
    dict2 = {'标题''学习Django的好方法就是上手做个项目比如CMS、OA等'}
    dict3 = {'标题''学习新知识的好方法就是快速构建一颗知识树'}
    lists = [dict1, dict2, dict3]
    return render(request, 'diy_filter.html', {'lists': lists})

模板:

{% load filter %}
<table border=1 style="width:300px">
    {% for list in lists %}
        <tr><td>{{ list.标题|show_title:10 }}</td></tr>
    {% endfor %}
</table>

测试地址:http://127.0.0.1:8000/diy_filter/

自定义标签

自定义标签和自定义过滤器的原理是差不多的,也是在templatetags下面自定义模块,在模块中自定义标签。

自定义标签:

from django import template

register = template.Library()


@register.simple_tag
def show_title(value, n):
    """
    自定义标题标签
    :param value: 要渲染的值
    :param n: 参数
    :return: 渲染后的数据
    """

    if len(value) > n:
        return f'{value[0:n]}...'
    else:
        return value

路由设计:

from django.urls import path

from . import views

app_name = 'index'
urlpatterns = [
    # 自定义标签
    path('diy_tag/', views.diy_tag, name='diy_tag'),
]

视图函数:

def diy_tag(request):
    dict1 = {'标题''学习Python的好方法就是每天不间断的写代码'}
    dict2 = {'标题''学习Django的好方法就是上手做个项目比如CMS、OA等'}
    dict3 = {'标题''学习新知识的好方法就是快速构建一颗知识树'}
    lists = [dict1, dict2, dict3]
    return render(request, 'diy_tag.html', {'lists': lists})

模板:

{% load tag %}
<table border=1 style="width:300px">
    {% for list in lists %}
        <tr>
            <td>{% show_title list.标题 10 %}</td>
        </tr>
    {% endfor %}
</table>

测试地址:http://127.0.0.1:8000/diy_tag/

模板继承

路由设计:

from django.urls import path

from . import views

app_name = 'index'
urlpatterns = [
     # 模板继承
    path('test_extend/', views.test_extend, name='test_extend'),
]

视图函数:

def test_extend(request):
    return render(request, "test_extend.html")

布局模板:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<h1>顶部</h1>
{% block content %}
    内容
{% endblock %}
<h1>底部</h1>
</body>
</html>

继承模板:

{% extends 'layout.html' %}

{% block content %}
    <h2>自定义的内容</h2>
{% endblock %}

测试地址:http://127.0.0.1:8000/diy_tag/

结语

关注我不迷路,欢迎关注我的微信公众号”张大鹏520″,如果您对此文章感兴趣,欢迎点赞收藏,留言评论。

文中所有代码,只需要打赏20元,然后留言评论“已打赏”,即可获取哦。

本文的PDF电子书版,只需要打赏3元,然后留言评论“已打赏”,即可获取哦。

写文章不容易,不喜勿喷哈,如果有想要学编程,学项目,或者在工作中有项目难以单独完成需要提供帮助的同学,欢迎私信我哈。生活不易,想要利用学到的编程知识,业余赚点零花钱。

接项目:网站开发,APP开发,各种管理系统开发。

带徒弟:Python编程教学,Golang编程教学,前端编程教学。

谢谢您!!!


原文始发于微信公众号(张大鹏520):Django加Vue电商项目实战03 模板

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

文章由极客之音整理,本文链接:https://www.bmabk.com/index.php/post/48620.html

(0)
小半的头像小半

相关推荐

发表回复

登录后才能评论
极客之音——专业性很强的中文编程技术网站,欢迎收藏到浏览器,订阅我们!