当前位置: 首页 > 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。…...

Docker 离线安装指南

参考文章 1、确认操作系统类型及内核版本 Docker依赖于Linux内核的一些特性&#xff0c;不同版本的Docker对内核版本有不同要求。例如&#xff0c;Docker 17.06及之后的版本通常需要Linux内核3.10及以上版本&#xff0c;Docker17.09及更高版本对应Linux内核4.9.x及更高版本。…...

练习(含atoi的模拟实现,自定义类型等练习)

一、结构体大小的计算及位段 &#xff08;结构体大小计算及位段 详解请看&#xff1a;自定义类型&#xff1a;结构体进阶-CSDN博客&#xff09; 1.在32位系统环境&#xff0c;编译选项为4字节对齐&#xff0c;那么sizeof(A)和sizeof(B)是多少&#xff1f; #pragma pack(4)st…...

【网络安全产品大调研系列】2. 体验漏洞扫描

前言 2023 年漏洞扫描服务市场规模预计为 3.06&#xff08;十亿美元&#xff09;。漏洞扫描服务市场行业预计将从 2024 年的 3.48&#xff08;十亿美元&#xff09;增长到 2032 年的 9.54&#xff08;十亿美元&#xff09;。预测期内漏洞扫描服务市场 CAGR&#xff08;增长率&…...

页面渲染流程与性能优化

页面渲染流程与性能优化详解&#xff08;完整版&#xff09; 一、现代浏览器渲染流程&#xff08;详细说明&#xff09; 1. 构建DOM树 浏览器接收到HTML文档后&#xff0c;会逐步解析并构建DOM&#xff08;Document Object Model&#xff09;树。具体过程如下&#xff1a; (…...

SpringBoot+uniapp 的 Champion 俱乐部微信小程序设计与实现,论文初版实现

摘要 本论文旨在设计并实现基于 SpringBoot 和 uniapp 的 Champion 俱乐部微信小程序&#xff0c;以满足俱乐部线上活动推广、会员管理、社交互动等需求。通过 SpringBoot 搭建后端服务&#xff0c;提供稳定高效的数据处理与业务逻辑支持&#xff1b;利用 uniapp 实现跨平台前…...

【AI学习】三、AI算法中的向量

在人工智能&#xff08;AI&#xff09;算法中&#xff0c;向量&#xff08;Vector&#xff09;是一种将现实世界中的数据&#xff08;如图像、文本、音频等&#xff09;转化为计算机可处理的数值型特征表示的工具。它是连接人类认知&#xff08;如语义、视觉特征&#xff09;与…...

GitFlow 工作模式(详解)

今天再学项目的过程中遇到使用gitflow模式管理代码&#xff0c;因此进行学习并且发布关于gitflow的一些思考 Git与GitFlow模式 我们在写代码的时候通常会进行网上保存&#xff0c;无论是github还是gittee&#xff0c;都是一种基于git去保存代码的形式&#xff0c;这样保存代码…...

探索Selenium:自动化测试的神奇钥匙

目录 一、Selenium 是什么1.1 定义与概念1.2 发展历程1.3 功能概述 二、Selenium 工作原理剖析2.1 架构组成2.2 工作流程2.3 通信机制 三、Selenium 的优势3.1 跨浏览器与平台支持3.2 丰富的语言支持3.3 强大的社区支持 四、Selenium 的应用场景4.1 Web 应用自动化测试4.2 数据…...

Ubuntu Cursor升级成v1.0

0. 当前版本低 使用当前 Cursor v0.50时 GitHub Copilot Chat 打不开&#xff0c;快捷键也不好用&#xff0c;当看到 Cursor 升级后&#xff0c;还是蛮高兴的 1. 下载 Cursor 下载地址&#xff1a;https://www.cursor.com/cn/downloads 点击下载 Linux (x64) &#xff0c;…...

鸿蒙(HarmonyOS5)实现跳一跳小游戏

下面我将介绍如何使用鸿蒙的ArkUI框架&#xff0c;实现一个简单的跳一跳小游戏。 1. 项目结构 src/main/ets/ ├── MainAbility │ ├── pages │ │ ├── Index.ets // 主页面 │ │ └── GamePage.ets // 游戏页面 │ └── model │ …...