VSCODE使用Django 页面和渲染

news2024/10/5 5:45:15

https://code.visualstudio.com/docs/python/tutorial-django#_use-a-template-to-render-a-page

通过模板渲染页面  文件

实现步骤

1, 修改代码,hello的App名字增加到installed_apps表中。

2, hello子目录下,创建 .\templates\hello的子目录。

3,在templates\hello目录下创建 hello_there.html文件。

该文件中包含了两个占位符,name和date。这样程序只需要传递name和date两个数值就可以。

4, 修改views.py文件

引入render,更改hello_there子程序的内容。

运行结果:

关于静态文件 CSS文件

准备环境

修改web_project中urls.py文件。

模板中引用静态文件 ref to static files in template

1, hello 目录(相当于hello app)中创建 static的目录

2,static目录中创建hello子目录(与app名字相同)

3,在static\hello中创建文件: site.css

内容如下:

4, 修改hello_there.html文件 titile中增加 load static声明

5,修改hello_there.html文件body 部分

修改如下:

运行结果:

增加字体颜色渲染。

收集项目相关的所有CSS文件 

1,web_project中settings.py文件 增加一行定义收集CSS文件的位置。区分大小写。

2,运行terminal命令

目录如下:

页面继承

过程

1,在hello/templates/hello目录中创建layout.html文件。内容如下。title和content需要别的页面来提供信息。

2,在hello/static/hello/site.css文件中增加一下内容,用于渲染。

3,hello/templates/hello目录下创建home.html

内容如下:

4,同样创建about.html

5, 创建contact.html文件。

6, 修改hello文件夹下面的 urls.py

7,修改 hello文件夹下面的views.py 重写home,about,contact子程序。

结果

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1466931.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

RT-Thread 时钟 timer delay 相关

前言 此处,介绍对delay 时钟 timer 这几部分之间的关联和相关的知识点;本来只是想介绍一下 delay的,但是发现说到delay 不先 提到 先验知识 晶振\时钟\时钟节拍\定时器 好像没法解释透彻,所以就变成了 晶振\时钟\时钟节拍\定时器\delay 的很简单的概括一遍;并附带上能直接运行的…

STM32物联网(封装AT指令进行TCP连接及数据的接收和发送)

文章目录 前言一、AT指令函数封装1.向ESP8266发送数据函数2.设置ESP8266工作模式3.连接WIFI函数4.查询IP地址5.连接TCP服务器6.发送数据到TCP服务器7.接收并解析来自TCP服务器的数据8.关闭TCP服务器 二、代码测试总结 前言 本篇文章将继续带大家学习STM32物联网,那…

二百二十四、Kettle——曲线实现从Hive插入更新到ClickHouse(分区字段是month或year)

一、目的 对于以month、year为分区字段的数据,不是像day字段分区那样每天增量插入更新即可,而是要以部分字段查询、部分字段更新,但是ClickHouse数据库并不适合更新操作,直接使用Kettle的插入更新控件会导致问题,必须…

前后端联调可能出现的问题

调不到后端数据 前后端传参方式不一样 --- formdata 主要接收文件 或者有文件和数据 --- json 纯数据

Linux命令 - 如何查询当前已使用的内存占比

结果先行 free -h | awk NR2{printf "%.2f%%", $3*100/$2 }解释一下 这个命令组合了 free -h 和 awk 命令来输出已用内存的百分比。我们一步一步来解析这个命令: Step 1 free -hfree 是一个用来显示 Linux 系统内存使用情况的命令。-h 参数是 “human…

《TCP/IP详解 卷一》第2章 Internet地址结构

目录 2.1 引言 2.2 表示IP地址 2.3 基本的IP地址结构 单播地址 全球单播地址: 组播地址 任播地址 2.4 CIDR和聚合 2.5 特殊用途地址 2.6 分配机构 2.7 单播地址分配 2.8 与IP地址相关的攻击 2.9 总结 2.1 引言 2.2 表示IP地址 IPv4地址:3…

2024-2-22 作业

作业要求: 复习前面知识点(指针、结构体、函数)整理思维导图顺序表(按位置插入、按位置删除和去重、重新写)理解链表的代码,尝试写一下链表的尾插和输出 1.复习前面知识点(指针、结构体、函数) 2.整理思维导图 3.顺序表(按位置插入、按位置删除和去重、…

Seurat包学习:如何查看R包函数源代码

​我们很多时候都很好奇作者的r包是如何写出来的,手痒的时候就想学习一下源码,顺便改一改 问题来源 为什么要写今天这个推文呢? 起因是因为我想使用seurat自带函数画热图,奈何这个图不是那么好看 DoHeatmap(pbmc,features fea…

2024-02-21 作业

作业要求: 复习课上内容 //已完成结构体字节对齐,64位没做完的做完,32位重新都做一遍,课上指定2字节对齐的做一遍,自己验证 //已完成两种验证大小端对齐的代码写一遍复习指针内容 //已完成完善顺序表已写出的…

视频评论抓取软件|抖音数据抓取工具

最近我们推出了一款基于C#语言开发的工具。这款工具提供了丰富的功能,旨在帮助用户轻松获取抖音视频内容。让我们一起来详细介绍一下这款工具的主要功能模块: 1. 批量视频提取: 工具提供了便捷的批量视频提取功能,用户只需输入关…

cookie伪造 [BSidesCF 2019]Kookie1

打开题目 提示用admin用户登录 尝试弱口令发现,登录失败 显示用admin&passwordadmin!进行登录 有发现说cookie,就尝试用cookie登录: f12编辑添加cookie重发包: 或者bp抓包 Cookie:usernameadmin 用admin登录成功 得到flag: 参考文章&…

Vue3项目结构分析

node_modules: 是项目npm install下载的node依赖库。 public: favicon.ico: 网页图标logo图片。index.html: 入口html。是一个基础的html页面,其中进行网页最基础的设置,并且设置了id为app的div盒子。该页面即为Vue单页面应用的基础页面。后…

QSettings使用示例

解决的问题: 平常要存储一些临时数据,或者ini的系统参数数据,以下是源码解析 如何实现: 实现的UI如下 主要功能: 初始化: m_settings new QSettings("DParamSetting.ini", QSettings::IniFo…

京东数据分析|京东销售数据怎么查|京东销售数据查询软件分享!

京东销售数据分析对商家来说具有多方面的重要作用,主要体现在以下几个方面: 市场趋势分析: 分析京东平台上的商品销量、销售额和价格走势等数据,可以帮助商家了解当前市场的整体需求趋势,以及不同品类的季节性变化、…

PLC为什么要开发网口通讯功能

PLC设置网口通讯功能,是现场总线向工业以太网的迈进,更是为了在网口之上构建更为庞大、开放的大一统的生态系统。 有了以太网,特别是TCP/IP协议后,全员工控人的日常工作更为便利了。 主要体现在以下4点: 1.再也不需要…

01VScode开发stm32环境搭建

title: VScode开发stm32环境搭建 tags: STM32vscode 1.准备工作 1.下载并安装VSCODE 在百度上搜索vscode记住一定要是官方的 不然你自己就是在给自己下毒2345全来了 打红圈一定要有不然就是在垃圾网站上下的 VSCode下载链接 选一个适合你的      安装正常流程走就行不再…

团簇束流沉积技术:氢气传感器守护安全与环境的利器

在当今日益增长的能源需求背景下,氢气作为一种清洁、高效的能源载体,正逐渐受到广泛关注。然而,氢气的易燃易爆特性也带来了不小的安全隐患。因此,精确、快速地监测氢气泄漏成为了确保生产安全和环境监测的重中之重。基于团簇束流…

一些可以参考的文档集合16

之前的文章集合: 一些可以参考文章集合1_xuejianxinokok的博客-CSDN博客 一些可以参考文章集合2_xuejianxinokok的博客-CSDN博客 一些可以参考的文档集合3_xuejianxinokok的博客-CSDN博客 一些可以参考的文档集合4_xuejianxinokok的博客-CSDN博客 一些可以参考的文档集合5…

[C#]winform基于opencvsharp结合pairlie算法实现低光图像增强黑暗图片变亮变清晰

【低光图像增强介绍】 在图像处理领域,低光图像增强是一个具有挑战性的任务。由于光线不足,这些图像往往呈现出低对比度、高噪声和细节丢失等问题,严重影响了图像的视觉效果和后续分析的准确性。因此,开发有效的低光图像增强方法…

无刷电机的2种电流采样方式以及优缺点比较

低端电流采样: 在低端采样方式中,电流检测电阻(分流电阻)通常被放置在逆变器下桥臂MOSFET或IGBT的低端,即靠近电机绕组的地线侧。这种情况下,只有当对应相位的下管导通时,才能通过这个电阻来测量…