当前位置: 首页 > news >正文

02 django管理系统 - base.html模板的搭建

下面,我们正式开始XX市第X医院员工信息管理系统的开发

首先,我们项目的目录结构如下:

然后,先把模板【base.html】界面的框架搭起来

{% load static %}<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>模板页面</title><!--引入路径"app01/static/plugin/bootstrap-3.4.1-dist/css/"下的bootstrap.min.css--><link rel="stylesheet" href="{% static '/plugin/bootstrap-3.4.1-dist/css/bootstrap.min.css' %}">{% block css %}{% endblock %}
</head>
<body><div>{% block content %}{% endblock %}</div>
<!--引入路径"app01/static/plugin/other_js/"下的jquery-3.6.0.min.js-->
<script src="{% static '/plugin/other_js/jquery-3.6.0.min.js' %}"></script>
<!--引入路径"app01/static/plugin/bootstrap-3.4.1-dist/js/"下的bootstrap.min.js-->
<script src="{% static '/plugin/bootstrap-3.4.1-dist/js/bootstrap.min.js' %}"></script>{% block js %}{% endblock %}</body>
</html>

然后从bootstrap官网上,找个导航栏,直接拿过来改改,放在body里


<nav class="navbar navbar-default"><div class="container-fluid"><!-- Brand and toggle get grouped for better mobile display --><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="#">XX市第X人民医院</a></div><!-- Collect the nav links, forms, and other content for toggling --><div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"><ul class="nav navbar-nav"><li class="active"><a href="#">部门管理</a></li></ul><ul class="nav navbar-nav navbar-right"><li><a href="#">登录</a></li><li><a href="#">注册</a></li><li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"aria-expanded="false">Dropdown <span class="caret"></span></a><ul class="dropdown-menu"><li><a href="#">Action</a></li><li><a href="#">Another action</a></li><li><a href="#">Something else here</a></li><li role="separator" class="divider"></li><li><a href="#">Separated link</a></li></ul></li></ul></div><!-- /.navbar-collapse --></div><!-- /.container-fluid -->
</nav>

完整代码如下:

{% load static %}<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>模板页面</title><!--引入路径"app01/static/plugin/bootstrap-3.4.1-dist/css/"下的bootstrap.min.css--><link rel="stylesheet" href="{% static '/plugin/bootstrap-3.4.1-dist/css/bootstrap.min.css' %}">{% block css %}{% endblock %}
</head>
<body><nav class="navbar navbar-default"><div class="container-fluid"><!-- Brand and toggle get grouped for better mobile display --><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="#">XX市第X人民医院</a></div><!-- Collect the nav links, forms, and other content for toggling --><div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"><ul class="nav navbar-nav"><li class="active"><a href="#">部门管理</a></li></ul><ul class="nav navbar-nav navbar-right"><li><a href="#">登录</a></li><li><a href="#">注册</a></li><li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"aria-expanded="false">Dropdown <span class="caret"></span></a><ul class="dropdown-menu"><li><a href="#">Action</a></li><li><a href="#">Another action</a></li><li><a href="#">Something else here</a></li><li role="separator" class="divider"></li><li><a href="#">Separated link</a></li></ul></li></ul></div><!-- /.navbar-collapse --></div><!-- /.container-fluid -->
</nav><div>{% block content %}{% endblock %}</div>
<!--引入路径"app01/static/plugin/other_js/"下的jquery-3.6.0.min.js-->
<script src="{% static '/plugin/other_js/jquery-3.6.0.min.js' %}"></script>
<!--引入路径"app01/static/plugin/bootstrap-3.4.1-dist/js/"下的bootstrap.min.js-->
<script src="{% static '/plugin/bootstrap-3.4.1-dist/js/bootstrap.min.js' %}"></script>{% block js %}{% endblock %}</body>
</html>

效果如下:

后面涉及到其他功能,我们只需要在导航栏上新增即可。

相关文章:

02 django管理系统 - base.html模板的搭建

下面&#xff0c;我们正式开始XX市第X医院员工信息管理系统的开发 首先&#xff0c;我们项目的目录结构如下&#xff1a; 然后&#xff0c;先把模板【base.html】界面的框架搭起来 {% load static %}<!DOCTYPE html> <html lang"en"><head><m…...

ES6语法有哪些

ES6语法包括let和const声明、箭头函数、模板字符串、解构赋值、扩展运算符、类和模块化等。以下是这些特性的具体介绍&#xff1a; let和const声明 let声明&#xff1a;let允许程序员在块级作用域内声明变量&#xff0c;这意味着变量只在其定义的代码块&#xff08;由大括号包围…...

每天一个数据分析题(五百零四)- 抽取样本

下列哪种方法&#xff0c;会重复抽取训练数据集中的数据&#xff0c;且每笔被抽中的概率始终保持一样&#xff1f; A. 袋装法&#xff08;Bagging&#xff09; B. 提升法&#xff08;Boosting&#xff09; C. 支持向量机&#xff08;SVM&#xff09; D. 以上皆是 数据分析…...

SAP动态安全库存(Dynamic Safety stock)配置及计算逻辑说明测试

SAP动态安全库存&#xff08;Dynamic Safety stock&#xff09;配置及计算逻辑说明测试 概念及计算逻辑&#xff1a; 动态安全库存&#xff08;Dynamic Safety stock&#xff09;&#xff1a; 它根据平均的日需求&#xff08;Average daily requirements&#xff09;数量&am…...

什么是TDZ?在JavaScript当中怎么避免?

简介 TDZ 是 Temporal Dead Zone&#xff08;暂时性死区&#xff09;的缩写&#xff0c;是 JavaScript 中 let 和 const 变量的一个概念。在 ES6 中&#xff0c;let 和 const 引入了块级作用域&#xff08;block scope&#xff09;&#xff0c;而它们声明的变量在声明之前的作…...

电阻分压电路:【图文讲解】

在电子电路中&#xff0c;电阻同样发挥着重要作用&#xff0c;同时也是一个最基本的元器件&#xff0c;电阻在电路中可以起到限流、分流、分压、发热的作用。 本节&#xff0c;我们重点来聊聊电阻的分压电路。如下图&#xff0c;是一个经典的电阻分压电路。 1&#xff1a;电路…...

【AI论文精读14】RAG论文综述2(微软亚研院 2409)P6(完)-隐含推理查询L4

AI知识点总结&#xff1a;【AI知识点】 AI论文精读、项目、思考&#xff1a;【AI修炼之路】 P1&#xff0c;P2&#xff0c;P3&#xff0c;P4&#xff0c;P5 六、隐藏推理查询&#xff08;L4&#xff09; ps&#xff1a;P2有四种查询&#xff08;L1&#xff0c;L2&#xff0c;L3…...

FFmpeg的简单使用【Windows】--- 视频倒叙播放

实现功能 点击【选择文件】按钮可以选择视频&#xff0c;当点击【开始处理】按钮之后&#xff0c;会先将视频上传到服务器&#xff0c;然后开始进行视频倒叙播放的处理&#xff0c;当视频处理完毕之后会将输出的文件路径返回&#xff0c;同时在页面中将处理好的视频展示出来。…...

5分钟了解docker的Swarm机制

Swarm框架概述 1.1 Swarm的基本概念 在容器化技术的浪潮中&#xff0c;Docker无疑是最为耀眼的明星之一。而作为Docker生态系统中的重要组成部分&#xff0c;Swarm框架则扮演着至关重要的角色。Swarm&#xff0c;顾名思义&#xff0c;就是“群”的意思&#xff0c;它是一个开…...

python实现ppt转pdf

要实现将PPT文件转换为PDF文件&#xff0c;可以使用Python中的python-pptx库来读取PPT文件&#xff0c;并使用reportlab库来生成PDF。又或者&#xff0c;你也可以使用其他库如pypdf和pypptx等进行处理。 以下是一个使用unoconv工具以及Python的示例&#xff0c;可以将PPT转换为…...

VS2017 编译 SQLite3 动态库

首先官方下载源码: Tags sqlite/sqlite (github.com) 1.安装 VS2017 community edition 2.打开VS2017命令行工具 3.安装TCL 开发库,推荐 TCL 9.0 先下载源码: Tcl/Tk 9.0 使用vs2017编译tcl&...

Linux运维_Apache更改默认网站目录

1.首先创建目录 并且在目录下新建测试文件 index.html mkdir -p /home/test/ap_web 直接wget 百度官网 wget www.baidu.com 2.编辑配置文件 /etc/apache2/sites-available/000-default.conf(找到 DocumentRoot)更改为刚刚创建的目录 接着在添加 最终文件: 3.给文件 添加属…...

QT QString学习笔记

1.操作字符串 1.提供双元运算符 “” QString str1"cccc"; str1 str1 "ddddd"; qDebug()<<str1; qDebug()<<qPrintable(str1); 2.提供操作符 append() QString str1 "Good"; QString str2 "bye"; str1.append(str2); …...

4.stm32 GPIO输入

按键简介 按键&#xff1a;常见的输入设备&#xff0c;按下导通&#xff0c;松手断开 按键抖动&#xff1a;由于按键内部使用的是机械式弹簧片来进行通断的&#xff0c;所以在按下和松手的瞬间会伴随有一连串的抖动 传感器模块简介 传感器模块&#xff1a;传感器元件&#…...

GPT系列

GPT&#xff08;Generative Pre-Training&#xff09;&#xff1a; 训练过程分两步&#xff1a;无监督预训练有监督微调 模型结构是decoder-only的12层transformer 1、预训练过程&#xff0c;窗口为k&#xff0c;根据前k-1个token预测第k个token&#xff0c;训练样本包括700…...

Chromium 前端window对象c++实现定义

前端中window.document window.alert()等一些列方法和对象在c对应定义如下&#xff1a; 1、window对象接口定义文件window.idl third_party\blink\renderer\core\frame\window.idl // https://html.spec.whatwg.org/C/#the-window-object// FIXME: explain all uses of [Cros…...

【力扣算法题】每天一道,健康生活

2024年10月8日 参考github网站&#xff1a;代码随想录 1.二分查找 leetcode 视频 class Solution { public:int search(vector<int>& nums, int target) {int left 0;int right nums.size()-1;while(left<right){int middle (leftright)/2;if(nums[middle] …...

Android Camera系列(四):TextureView+OpenGL ES+Camera

别人贪婪时我恐惧&#xff0c;别人恐惧时我贪婪 Android Camera系列&#xff08;一&#xff09;&#xff1a;SurfaceViewCamera Android Camera系列&#xff08;二&#xff09;&#xff1a;TextureViewCamera Android Camera系列&#xff08;三&#xff09;&#xff1a;GLSur…...

03 django管理系统 - 部门管理 - 部门列表

部门管理 首先我们需要在models里定义Dept类 # 创建部门表 class Dept(models.Model):name models.CharField(max_length100)head models.CharField(max_length100)phone models.CharField(max_length15)email models.EmailField()address models.CharField(max_length2…...

L1 Sklearn 衍生概念辨析 - 回归/分类/聚类/降维

背景 前文中我们提到&#xff1a; Scikit-Learn 库的算法主要有四类&#xff1a;分类、回归、聚类、降维&#xff1a; 回归&#xff1a;线性回归、决策树回归、SVM回归、KNN 回归&#xff1b;集成回归&#xff1a;随机森林、Adaboost、GradientBoosting、Bagging、ExtraTrees。…...

【畅捷通-注册安全分析报告】

前言 由于网站注册入口容易被黑客攻击&#xff0c;存在如下安全问题&#xff1a; 暴力破解密码&#xff0c;造成用户信息泄露短信盗刷的安全问题&#xff0c;影响业务及导致用户投诉带来经济损失&#xff0c;尤其是后付费客户&#xff0c;风险巨大&#xff0c;造成亏损无底洞…...

TCP IP网络编程

文章目录 TCP IP网络编程一、基础知识&#xff08;TCP&#xff09;1&#xff09;Linux1. socket()2.bind()2.1前提2.2字节序与网络字节序2.3 字节序转换2.4 字符串信息转化成网络字节序的整数型2.5 INADDR_ANY 3.listen()4.accept()5.connect()6.案例小结6.1服务器端6.2 客户端…...

libssh2编译部署详解

libssh2编译部署详解 一、准备工作二、编译libssh2方法一:使用Autotools构建方法二:使用CMake构建三、验证安装四、使用libssh2五、结论libssh2是一个用于实现SSH2协议的开源库,它支持建立安全的远程连接、传输文件等操作。本文将详细介绍如何在Linux系统下编译和部署libssh…...

IPv4数据报的首部格式 -计算机网络

IPv4数据报的首部格式 Day22. IPv4数据报的首部格式 -计算机网络_4字节的整数倍-CSDN博客 IP数据报首部是4字节的整数倍 &#x1f33f;版本&#xff1a; 占4比特&#xff0c;表示IP协议的版本通信双方使用的IP协议必须一致&#xff0c;目前广泛使用的IP协议版本号上4&#xf…...

小米电机与STM32——CAN通信

背景介绍&#xff1a;为了利用小米电机&#xff0c;搭建机械臂的关节&#xff0c;需要学习小米电机的使用方法。计划采用STM32驱动小米电机&#xff0c;实现指定运动&#xff0c;为此需要了解他们之间的通信方式&#xff0c;指令写入方法等。花了很多时间学习&#xff0c;但网络…...

2.2.ReactOS系统KSERVICE_TABLE_DESCRIPTOR结构体的声明

2.2.ReactOS系统KSERVICE_TABLE_DESCRIPTOR结构体的声明 2.2.ReactOS系统KSERVICE_TABLE_DESCRIPTOR结构体的声明 文章目录 2.2.ReactOS系统KSERVICE_TABLE_DESCRIPTOR结构体的声明KSERVICE_TABLE_DESCRIPTOR系统调用表结构体的声明 KSERVICE_TABLE_DESCRIPTOR系统调用表结构体…...

前端接口报500如何解决 | 发生的原因以及处理步骤

接口500&#xff0c;通常指的是服务器内部错误&#xff08;Internal Server Error&#xff09;&#xff0c;是HTTP协议中的一个标准状态码。当服务器遇到无法处理的错误时&#xff0c;会返回这个状态码。这种错误可能涉及到服务器配置、服务器上的应用程序、服务器资源、数据库…...

图书馆自习室座位预约管理微信小程序+ssm(lw+演示+源码+运行)

摘 要 随着电子商务快速发展世界各地区,各个高校对图书馆也起来越重视.图书馆代表着一间学校或者地区的文化标志&#xff0c;因为图书馆丰富的图书资源能够带给我们重要的信息资源&#xff0c;图书馆管理系统是学校管理机制重要的一环&#xff0c;,面对这一世界性的新动向和新…...

谷歌-BERT-第一步:模型下载

1 需求 需求1&#xff1a;基于transformers库实现自动从Hugging Face下载模型 需求2&#xff1a;基于huggingface-hub库实现自动从Hugging Face下载模型 需求3&#xff1a;手动从Hugging Face下载模型 2 接口 3.1 需求1 示例一&#xff1a;下载到默认目录 from transform…...

FPGA实现PCIE采集电脑端视频缩放后转千兆UDP网络输出,基于XDMA+PHY芯片架构,提供3套工程源码和技术支持

目录 1、前言工程概述免责声明 2、相关方案推荐我已有的PCIE方案我这里已有的以太网方案本博已有的FPGA图像缩放方案 3、PCIE基础知识扫描4、工程详细设计方案工程设计原理框图电脑端视频PCIE视频采集QT上位机XDMA配置及使用XDMA中断模块FDMA图像缓存纯Verilog图像缩放模块详解…...