Django+前端+数据库Day5模板的继承

已于 2024-05-22 18:40:41 修改
阅读量738 收藏 8
点赞数 26
文章标签： django 前端 数据库
于 2024-05-21 20:53:53 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/likfishdn/article/details/139101807
版权

目录

定义模板

继承模板

部门管理为例

模板layout.html

depart_list.html

depart_add.html

depart_edit.html

定义模板

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    {% block css %}在这里写各自的css{% endblock %}
</head>
<body>
<h1>标题</h1>
<div>
    {% block content %}在这里写各自的文本{% endblock %}
</div>
<h1>底部</h1>  
    
    {% block js %}在这里写各自的js{% endblock %}
</body>
</html>

继承模板

{% extends 'layout.html' %}

{% block content %}

        <h1> 首页 </h1>

{% endblock %}

部门管理为例

模板layout.html

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="{% static 'plugins/bootstrap-3.4.1/css/bootstrap.css' %}">
    <style>
        .navbar {
            border-radius: 0;
        }
    </style>
</head>
<body>
{#表头#}

<nav class="navbar navbar-default">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Brand</a>
        </div>
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li><a href="#">部门管理</a></li>
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">登录</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
                       aria-haspopup="true" aria-expanded="false">kzy <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">个人资料</a></li>
                        <li><a href="#">我的信息</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">注销</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</nav>
{#表#}
<div>
        {% block content %}       {% endblock %}
</div>
<script src="{% static 'js/jquery-3.6.0.min.js' %}"></script>
<script src="{% static 'plugins/bootstrap-3.4.1/js/bootstrap.js' %}"></script>
</body>
</html>

depart_list.html

{% extends 'layout.html' %}

{% block content %}


<div class="container">
        <div style="margin-bottom: 10px">
            <a class="btn btn-success" href="/depart/add/">
                {#                target="_blank"在新页面跳转打开#}
                <span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span>
                新建部门
            </a>
        </div>

        <div class="bs-example" data-example-id="panel-without-body-with-table">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <span class="glyphicon glyphicon-th-list" aria-hidden="true"></span>
                    部门列表
                </div>
                <table class="table table-bordered">
                    <thead>
                    <tr>

                        <th>ID</th>
                        <th>名称</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    {% for obj in queryset %}
                        <tr>
                            <th>{{ obj.id }}</th>
                            <td>{{ obj.title }}</td>
                            <td>
                                <a class="btn btn-primary btn-xs" href="/depart/{{ obj.id }}/edit/">编辑</a>
                                <a class="btn btn-danger btn-xs" href="/depart/delete/?nid={{ obj.id }}">删除</a>
                            </td>

                        </tr>
                    {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
</div>


{% endblock %}

depart_add.html

{% extends 'layout.html' %}

{% block content %}

<div class="container">
        <div class="panel panel-default">
                <div class="panel-heading">
                    新建部门
                </div>
        <div class="panel-body">
            <form method="post">
                {% csrf_token %}
                <div class="form-group">
                    <label>标题</label>
                    <input type="text" class="form-control" placeholder="标题" name="title"/>
                </div>
                <button type="submit" class="btn btn-primary">提交</button>
            </form>
        </div>
        </div>
    </div>

{% endblock %}

depart_edit.html

{% extends 'layout.html' %}

{% block content %}

<div class="container">
        <div class="panel panel-default">
            <div class="panel-heading">
                编辑部门
            </div>

            <div class="panel-body">
                <form method="post">
                    {% csrf_token %}
                    <div class="form-group">
                        <label>标题</label>
                        <input type="text" class="form-control" placeholder="标题" name="title"
                               value="{{ row_object.title }}"/>
                    </div>
                    <button type="submit" class="btn btn-primary">提交</button>
                </form>
            </div>
        </div>
</div>


{% endblock %}
likfishdn
关注
小黑迈出了应用开发第一步，通过武沛奇老师b站django入门课程了解了django，准备学习前端基础:django入门沛奇老师课程笔记
qq_37418807的博客
01-08 1297
加油小黑
Django模板语言 以及使用
热门推荐
weixin_45185267的博客
06-11 1万+
这是一篇django中模板语言以及使用
Django模板语法 过滤器 继承
Lamb的博客
05-16 88
【代码】Django模板语法 过滤器 继承。
【DRF+Django】微信小程序入门到实战_day03(下)
qq_40979183的博客
06-17 1036
# 课程内容 （1）P28_发送短信验证码流程 （2）P29_腾讯云短信使用
【前端开发学习】7.Django
weixin_43894455的博客
12-08 1454
跟着武沛齐老师学django，本文是day15的内容。看完对 django 能有一个初步的认识，之后有空再把剩余的视频看完。
【Python百日进阶-WEB开发】Day168 - Django模板 Template
岳涛的博客
10-31 623
文章目录一、Django使用自带模板1.1 基本使用1.1.1 模板配置1.1.2 定义模板1.1.3 模板渲染1.1.4 模板语法1.1.4.1 模板变量 {{ var_name }}1.1.4.2 列表取值1.1.4.3 字典取值1.2 流程控制 {% primary_key %}1.2.1 for循环1.2.2 if判断1.2.3 注释1.2.3.1 单行注释1.2.3.2 多行注释1.3 过滤器（本质为函数）1.3.1 语法：变量|过滤器:“参数”1.3.2 常用过滤器1.3.2.1 safe，禁用
day112-django_CMDB系统开发一
爪蛙毁一生的博客
11-02 1207
CMDB系统开发一 一、CMDB相关概念 1、概念介绍 ​ CMDB（配置管理数据库）存储与管理企业IT架构中设备的各种配置信息，它与所有服务支持和服务交付流程都紧密相联，支持这些流程的运转、发挥配置信息的价值，同时依赖于相关流程保证数据的准确性。 ​ 服务器集群或者分布式服务器 几十台、上百台，服务器相关数据信息，管理不方便。通过资产管理的方式，通过CMDB系统实现。 github一些开源的cmdb系统：https://github.com/search?q=cmdb 2、需求分析 本次开发的CMDB系统
Django+Xadmin打造在线教育系统(七)
09-17 377
全局导航&个人中心&全局搜索 配置全局导航 让index页面也继承base页面,注意首页有个单独的__index.js__ base页面的导航栏也进行配置 <nav> <div class="nav"> <div class="wp"> <ul&gt...
Django开发
Cao_O的博客
09-20 293
主题：员工管理系统。
Django-Day06.pdf
06-09
- 模板继承：模板继承允许你创建一个基础模板，并定义一些可被其他模板继承和重写的块（blocks）。这种机制使得我们能够创建一个站点范围内的模板结构，同时允许页面模板对特定部分进行自定义。 - 自定义模板标签：...
自学Python第二十二天- Django框架(一)创建项目、APP、快速上手、请求和响应流程、模板、数据库操作
runsong911的博客
08-04 2875
自学Python第二十二天- Django框架
Django实战（一）——教育网站
爱吃串串的瘦子的博客
12-30 7765
WEB开发流程 一、需求分析 二、数据库设计 三、后台管理系统 四、全栈功能实现 五、基础功能补充 六、xadmin的进阶开发   django目录 一级目录： 项目：MxOnline MxOnline：配置文件 apps：后台业务数据库，路由，view extra_app：从系统外部导入的app log：保存系统的日志文件 static：存放前端的静态文件：cs...
Python Web开发记录 Day7：Django（Web框架） part 1
流苏的博客
03-07 1291
Python Web开发记录 Day7：Django（Web框架） part 1
Vue.js与Flask/Django后端配合
2301_76419561的博客
09-24 517
Vue.js 是一个用于构建用户界面的渐进式 JavaScript 框架，而 Flask/Django 是 Python 语言编写的轻量级 Web 开发框架。然后，我们创建了一个 Vue.js 应用，它在页面加载时通过 Axios 发送一个 GET 请求到 Flask 应用的。1、首先，确保你已经安装了 Flask/Django 和 Vue.js。在这个示例中，我们创建了一个简单的 Flask 应用，其中有一个路由。要运行这个示例，请确保 Flask 应用正在运行，然后在浏览器中打开。
[含文档+PPT+源码等]精品大数据项目-基于Django实现的高校图书馆智能推送系统的设计与实现
weixin_41915110的博客
09-30 337
大数据项目——基于Django实现的高校图书馆智能推送系统的设计与实现背景，可以从以下几个方面进行详细阐述： 一、信息技术的发展背景 随着信息技术的飞速发展和互联网的广泛普及，大数据已经成为现代社会的重要资源。在大数据背景下，如何从海量数据中提取有价值的信息，并为用户提供个性化的服务，成为了当前信息技术领域的研究热点。Django作为一款高级的Python Web框架，以其高效、简洁和可扩展性等特点，在大数据项目开发中得到了广泛应用。 二、高校图书馆的管理需求 高校图书馆作为学术研究和知识传播的重要场所
计算机毕业设计 基于深度学习的短视频内容理解与推荐系统的设计与实现 Python+Django+Vue 前后端分离 附源码 讲解 文档
最新发布
weixin_19164791635
09-30 1233
本文介绍了一款基于Python的短视频内容理解与推荐系统，该系统通过深度学习技术实现对短视频内容的自动分析和用户个性化推荐。系统的开发旨在提升用户体验，优化内容推荐机制，推动短视频行业的创新和发展。
Django上下文处理器
weixin_52505665的博客
09-30 167
2，配置settings.py。3，header.html使用。
Django+MySQL：创建数据库表及网页交互教程
总结来说，这个过程涵盖了Django开发的基本流程，包括项目初始化、数据库操作、模型设计、视图与模板的创建，以及URL配置。开发者需要熟悉Django框架、MySQL数据库的使用，以及HTML和Python编程，这样才能有效地构建...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值