Django项目页面样式如何“传给”客户端浏览器

news2024/9/20 8:58:51

前言

django项目在视图函数中借助render函数可以返回HTML页面,但是HTML页面中如果引入了外部CSS文件或者JavaScript文件在浏览器页面无法加载,因此就必须有一种方式能够将HTML文档中引入的外部文件能够在客户端浏览器上加载,这种方式就是配置静态文件。

啥是静态文件

静态文件就是前端已经写好了的能够直接调用或者使用的文件都可以称之为静态文件,比如:

①外部JavaScript文件

②外部CSS文件

③项目需要的图片文件

④第三方的前端框架或者库,比如jQuery,bootstrap

为啥要配置静态文件

在使用django框架进行全栈开发(前端+后端)时前端页面用到的外部文件尽量不要使用cdn上的网址,应该使用本地文件,将本地的外部引用文件传给浏览器客户端。而本地文件如果不配置静态文件是无法传给浏览器客户端的,比如下述报错,因此,配置静态文件就是要实现将HTML文档引用的外部本地文件一同返回给浏览器客户端。

如何配置静态文件

项目使用的静态文件默认都放在项目文件下的static目录下,通常该目录还会做进一步划分比如:

- static
	- js(自己写的js代码)
	- css(自己写的css代码)
	- img
	其他第三方文件

静态文件的配置需要在项目的配置文件(settings.py)中增加如下代码,静态文件配置完成后,HTML文档如果需要静态文件就会去静态文件配置列表中从上往下依次查找所需的文件,找不到才会报错:

# settings.py中增加下述代码
STATIC_URL = '/static/'   #  相当于访问静态文件的令牌或钥匙,如果想要访问静态文件,就必须以static开头,相当于钥匙,静态文件就是房间
STATICFILES_DIRS = [
    os.path.join(BASE_DIR,'static'),
]  # 静态文件的路径

如果想要在HTML文档中引用静态文件目录中的文件,就必须以/static/开头,比如:

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/static/test.css">  <!--使用静态文件中的css样式文件-->
</head>

在HTML文档中引入静态文件还有另一种更加方便的方式 - 动态解析令牌,令牌指的就是STATIC_URL的值,其实静态文件的目录名称可以是随意的,并且令牌的值也可以是任意的,但是约定俗称就是static,如果改了令牌名称,按照上述前端HTML引入静态文件的方式就需要更改路径,如果静态文件非常多改起来会是一件非常闹心的事情,而动态令牌解析可以解决这一问题,无论令牌名称怎么改,前端HTML页面中引入静态文件的方式都不变,代码如下:

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--动态令牌解析-->
    {%  load static %}
    <link rel="stylesheet" href="{% static 'test.css' %}">
    
</head>

总结

总结来看在django项目中静态文件的配置如下:

在项目的配置文件中需要增加令牌和静态文件路径的代码:

STATIC_URL = '/static/'
STATICFILES_DIRS = [
    os.path.join(BASE_DIR,'static'),
]

在HTML文档中引入静态文件时推荐使用动态令牌解析的方式:

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--动态令牌解析-->
    {%  load static %}
    <link rel="stylesheet" href="{% static 'test.css' %}">
    <script src="{% static 'test.js' %}"></script>
</head>

 

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

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

相关文章

QML状态与过渡(States and Transitions)

目录 一 状态&#xff08;States&#xff09; 一 过渡&#xff08;Transitions&#xff09; 通常我们将用户界面描述为一种状态。一个状态定义了一组属性的改变&#xff0c;并且会在一定的条件下被触发。另外在这些状态转化的过程中可以有一个过渡&#xff0c;定义了这些属性…

第二十章 中介者模式

系列文章目录 提示&#xff1a;这里可以添加系列文章的所有文章的目录&#xff0c;目录需要自己手动添加 例如&#xff1a;第一章 Python 机器学习入门之pandas的使用 提示&#xff1a;写完文章后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目…

SpringSecurity框架学习与使用

SpringSecurity框架学习与使用 SpringSecurity学习SpringSecurity入门SpringSecurity深入认证授权自定义授权失败页面权限注解SecuredPreAuthorizePostAuthorizePostFilterPreFilter 参考 SpringSecurity学习 SpringSecurity入门 引入相关的依赖&#xff0c;SpringBoot的版本…

IPsec中IKE与ISAKMP过程分析(快速模式-消息3)

IPsec中IKE与ISAKMP过程分析&#xff08;主模式-消息1&#xff09;_搞搞搞高傲的博客-CSDN博客 IPsec中IKE与ISAKMP过程分析&#xff08;主模式-消息2&#xff09;_搞搞搞高傲的博客-CSDN博客 IPsec中IKE与ISAKMP过程分析&#xff08;主模式-消息3&#xff09;_搞搞搞高傲的博客…

Spring - IoC

Spring - IoC Spring- IoC1)Spring简介1.1)什么是框架1.2)框架的作用1.3)Spring是什么1.4)Spring的体系结构1.5)Spring的发展历史1.6)Spring优势 2)IoC简介2.1)优质程序代码的制作原则2.2)耦合与内聚2.3)工厂模式发展史2.4)Spring发展历程2.5)IoC 3)入门案例3.1)案例环境说明3.…

synchronized用法加锁原理

目录 使用场景不同场景加锁对象结论验证实验实验1&#xff1a; synchronized 修饰方法&#xff0c;加锁对象是类实例&#xff0c;不同实例之间的锁互不影响实验2&#xff1a; synchronized 加在静态方法上&#xff0c;加锁对象是方法所在类&#xff0c;不同类实例之间相互影响实…

docker镜像导入导出

项目背景 1. docker pull 的时候比较慢的情况下&#xff0c; 之前已经下载过的话&#xff0c;可以直接导入使用 2. 有些服务器不允许上外网的情况下&#xff0c;可以先在自己电脑上下载好&#xff0c;再上传到服务器上进行安装 导出镜像 查看镜像 docker images 导出镜像 …

【文件系统】

目录 1 inode 2 软链接 3 硬链接 1 inode 当我们创建一个文件时&#xff0c;用带上 -i 选项可以查看文件的inode: 其中第一个选项就是文件的inode,除此之外另外几列表示的是&#xff1a; 模式 硬链接数 文件所有者 所属组 大小 最后修改时间文件名 ls -l读取存储在磁盘上的文…

windows编译安卓源码记录

环境 Windows10 vmware17 ubuntu22 ubuntu环境设置 装完ubuntu系统后拖拽复制文件进去验证vmtools安装情况&#xff0c;如果vmtools异常很麻烦&#xff0c;试了n多方法&#xff0c;最后还是重新安装系统解决&#xff0c; 如果ok的话&#xff0c;再继续下步骤&#xff0c;否…

【C++入门第四期】类和对象 ( 上 )

前言类的使用类的定义类的两种定义方式&#xff1a;成员变量名的定义建议 类的访问限定符类的作用域类的实列化如何计算类的大小结构体内存对齐规则 this指针this指针的特性 前言 C语言是面向过程的&#xff0c;关注的是过程&#xff0c;分析出求解问题的步骤&#xff0c;通过…

Linux的目录结构

在Linux世界里&#xff0c;一切皆文件硬件如显卡、cpu等都会映射成一个文件具体的目录结构/bin 是Binary的缩写&#xff0c;这个目录存放着最经常使用的命令 /sbin(/usr/sbin、/usr/local/sbin) s就是Super User的意思&#xff0c;这里存放的是系统管理员使用的系统管理程序 /h…

Elasticsearch扫盲篇

1. 什么是搜索&#xff1f; 在日常的工作和学习中&#xff0c;当我们说想找查询任何的信息的时候&#xff0c;可能第一时间会想到上百度或者谷歌去搜索一下。比如说找一部自己喜欢的电影&#xff0c;或者说找一本喜欢的书&#xff0c;或者找一条感兴趣的新闻。但是百度和谷歌不…

QML基础模型(Basic Model)

最基本的分离数据与显示的方法是使用Repeater元素。它被用于实例化一组元素项&#xff0c;并且很容易与一个用于填充用户界面的定位器相结合。 最基本的实现举例&#xff0c;repeater元素用于实现子元素的标号。每个子元素都拥有一个可以访问的属性index&#xff0c;用于区分不…

第11章 项目人力资源管理

文章目录 项目人力资源管理 过程11.2.1 编制项目人力资源计划的工具与技术 375&#xff08;1&#xff09;层次结构图&#xff08;工作、组织、资源 分解结构&#xff09;&#xff08;2&#xff09;矩阵图&#xff08;责任分配矩阵&#xff0c;RAM&#xff09;&#xff08;3&…

KinectFusion中的ICP算法

投影数据关联-求匹配点 利用算法projective data association对前一帧和当前帧的&#xff08;Vertex、Normal&#xff09;进行匹配&#xff0c;算法如下&#xff1a; 在当前帧 i 的深度图像上的每一个像素 U并行计算&#xff1b;对于深度值大于0的像素&#xff0c;求该像素点…

从破解虫脑到攻克人脑:一条“永生之路”的新赛道?

从破解虫脑到攻克人脑&#xff1a;一条“永生之路”的新赛道&#xff1f; 首张果蝇大脑连接组&#xff1a;耗费十余年&#xff0c;重建三千神经元&#xff0c;超50万突触&#xff01; 论文地址 果蝇幼虫大脑的连接组。 所有脑神经元的形态学都经过了突触分辨率的电子显微镜成像…

聊天机器人开发实战--(微信小程序+SpringCloud+Pytorch+Flask)【后端部分】

文章目录 前言架构SpringCloud服务构建后台搭建Python服务调用 Python算法服务app 总结 前言 趁着五一有时间&#xff0c;先把大三下个学期的期末作业做了&#xff0c;把微信小程序和Java开发的一起做了。顺便把机器学习的也一起做了。所以的话&#xff0c;我们完整项目的技术…

如何用ChatGPT做书籍、报告、文件的读取与互动式问答?故事人物活起来

该场景对应的关键词库&#xff08;15个&#xff09;&#xff1a; 书籍、报告、文件、详细信息、查询、主题、作者、出版日期、出版社、问题、方面、原则、方法、概括、主要观点、解释。 注意&#xff1a; ChatGPT的知识库截止于2021年9月&#xff0c;对于更新的数据或最新出版…

系统化思维:大数中心原理与限制性选择原理。

系统化思维&#xff1a;大数中心原理与限制性选择原理TOC 许多人的思考特点都是混乱而复杂的&#xff0c;只有受过严格训练的人才能做到系统化思维。这里将讨论系统化思维的基础考量。 大数中心原理&#xff1a;大数中心原理是客观而真实的普遍存在&#xff0c;应用在思维上就…