使用django进行前端模板渲染

最新推荐文章于 2024-07-25 22:08:00 发布

大嘟督

最新推荐文章于 2024-07-25 22:08:00 发布

阅读量2.4k

点赞数 2

分类专栏： django

本文链接：https://blog.csdn.net/qq_44240254/article/details/88938872

版权

django 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

再对前端模板渲染之前，我们要先掌握以下知识

一、
1、在django模板系统中，变量要和html尽量分开，HTML和Python是分开的。
2、确定表达的形式：
记住加载模板的方法 from django.template import Template
tem=Template(string)#字符串形式
3、确定表达的内容：
（1）使用django响应http方法
from django.http import HttpResponse
（2）表达内容需要时字典格式
（3）封装数据
采用 from django.template import Template.Context
data（变量）=Context(data)
（4）表达的形式加载表达的内容：
变量=Template.render(context(data))
return HttpResponse(变量)
4、变量
变量格式是两个大括号包裹着变量名： {{ 变量 }}
（1）传入前端的变量最外层一定是一个字典
（2）具体的变量可以是字符串、列表、字典等类型
（3）变量通过.（点）方法可以调用自己的无参数方法、索引、字符串方法例如（upper）
（4）如果变量是字典也可以通过.（点）键调用值

5、标签
标签的格式是1个大括号加两个%：{% %}
（1）{% if %}标签
判断指定条件true或者false，通常判断一个变量是否存在或者为真
{% if %} 标签需要 {% endif %} 标签进行闭合
{% if %} 可以有 {% else %}
（2） {% ifequal %}标签
判断两个量是否相等，通常用于比较
{% ifequal %} 标签需要 {% endifequal %} 标签进行闭合
{% ifequal %} 可以有 {% else %}
（3） {% for %}标签
{% for %} 标签需要 {% endfor %} 标签进行闭合
{% for %} 标签采用了和python一样的for in结构。
{% for %} 循环出来的不是html对象只是数据
（4） {{ forloop }}标签
forloop是django模板语言定义好的一个变量，用来表示循环当中的每次循环
forloop为嵌套循环提供了parentloop参数来记录当前循环的上一层循环的情况
通常我们使用forloop标签进行循环的开头或者末尾判断
（5）过滤器,对变量进行具体功能的处理 {{ | }}
Safe 去掉前端转义

二、创建django当中独立的HTML模板系统

1、在django项目目录下创建一个文件夹templates用来存放HTML文件
2、在settings文件内添加配置，寻找TEMPLATES，在’DIRS’中添加
os.path.join(BASE_DIR,“templates”)
在这里插入图片描述
4、在项目中创建views.py文件
3、创建列表页与详情页，简单实现点击列表能够跳转到详情页功能

代码参考如下：

在这里插入图片描述
（1）列表页
views

from django.shortcuts import render_to_response
from django.http import HttpResponse

def books(request):
    data=[
        {"id":1,"title":"近代史"},
        {"id":2,"title":"明清史"},
        {"id":3,"title":"宋元史"},
        {"id":4,"title":"五代史"},
        {"id":5,"title":"隋唐史"},
        {"id":6,"title":"秦汉史"},
        {"id":7,"title":"两周史"},
        {"id":8,"title":"夏商史"},
    ]

    return render_to_response('books.html',locals())

路由urls

from django.contrib import admin
from django.urls import path,re_path
from ourblog332.views import *
urlpatterns = [
    path('admin/', admin.site.urls),
    path('books/',books),
]

html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>史书</title>
</head>
<body>
    <ul>
        {% for book in data %}
            <li>
            <a href="/bookbook/{{ book.id }}">{{ book.title }}</a>
            </li>
        {% endfor %}
    </ul>
</body>
</html>

（2）详情页
views

def book_book(request,id):
    data={
        "1":{ "title": "近代史","img":"https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3893318486,4029287079&fm=200&gp=0.jpg"},
        "2":{ "title": "明清史","img":"https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3893318486,4029287079&fm=200&gp=0.jpg"},
        "3":{ "title": "宋元史","img":"https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3893318486,4029287079&fm=200&gp=0.jpg"},
        "4":{ "title": "五代史","img":"https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3893318486,4029287079&fm=200&gp=0.jpg"},
        "5":{ "title": "隋唐史","img":"https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3893318486,4029287079&fm=200&gp=0.jpg"},
        "6":{ "title": "秦汉史","img":"https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3893318486,4029287079&fm=200&gp=0.jpg"},
        "7":{ "title": "两周史","img":"https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3893318486,4029287079&fm=200&gp=0.jpg"},
        "8":{ "title": "夏商史","img":"https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3893318486,4029287079&fm=200&gp=0.jpg"},
    }.get(id)
    return render_to_response('book_book.html',locals())

路由urls

from django.contrib import admin
from django.urls import path,re_path
from ourblog332.views import *
urlpatterns = [
    path('admin/', admin.site.urls),
    re_path('bookbook/(?P<id>\d{1,2})',book_book),
]

book_book.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>{{ data.title }}</h1>
    <img src="{{ data.img }}">
    <a href="/books/">返回列表页</a>
</body>
</html>