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

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

news 2025/9/8 1:58:14

前言

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>

 

相关文章：

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

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

编程日记 2023/5/5 19:57:50

python 进程间通信 Queue()、Pipe()、manager.list()、manager.dict()、manager.Queue()

&#x1f468;‍&#x1f4bb;个人简介&#xff1a; 深度学习图像领域工作者 &#x1f389;总结链接&#xff1a; 链接中主要是个人工作的总结&#xff0c;每个链接都是一些常用demo&#xff0c;代码直接复制运行即可。包括&#xff1a; &am…...

编程日记 2023/5/5 19:52:49

你想要的【微前端】都在这里了！ | 京东云技术团队

作者&#xff1a;京东零售 郑炳懿 开篇&#xff1a; 如果你不知道微前端是什么&#xff0c;或者不知道微前端能解决什么问题&#xff0c;那么你可能不需要微前端。 在我看来&#xff0c;对于每一个没有使用过的新技术&#xff0c;都应该有以下几个过程&#xff1a; 1、调研…...

编程日记 2023/6/1 10:19:33

人生若只如初见，你不来看看Django吗

前言 本文介绍python三大主流web框架之一的Django框架的基本使用&#xff0c;如何创建django项目&#xff0c;如何运行django项目以及django项目的目录结构&#xff0c;另外django又是如何返回不同的数据和页面&#xff1f; python三大主流web框架 Python有三大主流的web框架…...

编程日记 2023/5/5 19:42:47

项目人力资源管理

项目人力资源管理的 4 个过程&#xff1a;规划人力资源管理、组建项目团队、建设项目团队、管理项目团队等内容 单项选择题、案例分析题 人力资源管理领域输入、输出、工具和技术表&#xff1a; 过程名输入工具和技术输出编写项目人力资源计划 项目管理计划活动资源需求事业…...

编程日记 2023/5/5 19:37:46

提供接口给第三方调用，应该注意什么

1.如果我们要提供一个接口给第三方调用&#xff0c;首先我们需要考虑的就是接口安全&#xff0c;一定要做鉴权&#xff0c;至于鉴权的方式&#xff1a;大家可以在网上自行查找&#xff0c;今天我主要记录如何编写一个既能能支持并发的&#xff0c;且不会影响到我们自身业务的的…...

编程日记 2023/5/5 19:32:45

ESL设计概述

‍‍ ‍‍前言 随着芯片面临着应用场景丰富多变、集成功能模块越来越多、片内通信及模块间接口越来越复杂、设计规模越来越大以及PPA要求越来越高的需求&#xff0c;芯片设计方法面临越来越大的挑战。架构的合理性、完备性和一致性很大程度上决定了芯片设计的成败。基于同样的I…...

编程日记 2023/5/5 19:27:44

探究C语言数组的奥秘：大小可省略的定义、内存存储、数组名、传参、指针遍历、数组指针和指针数组、柔性数组等

也许你认为&#xff0c;C语言中的数组非常好理解&#xff0c;就是把一组相同类型的元素存储在同一块空间里。但是你可能并没有真正理解数组的本质&#xff0c;不信的话请回答一下下面的几个小问题&#xff0c;如果你能非常清晰的回答这些问题&#xff0c;那么你对C语言中的数组…...

编程日记 2023/5/5 19:22:42

python3 强制使用任意父级相对导入，越过python相对导入限制，拒绝 ImportError

前言 单纯不喜欢 python 对 点开头的包的限制&#xff0c;好麻烦&#xff0c;遂写了本包&#xff0c;来解决这个问题启用本模块后&#xff0c;你可以随时使用 单个点来导入当前目录的模块&#xff0c;也可以使用多个 点导入多级父目录内的模块&#xff0c;而不会报错烦人的模块…...

编程日记 2023/5/5 19:17:41

面了一个4年经验的测试工程师，自动化都不会也要15k，我也是醉了····

在深圳这家金融公司也待了几年&#xff0c;被别人面试过也面试过别人&#xff0c;大大小小的事情也见识不少&#xff0c;今天又是团面的一天&#xff0c; 一百多个人都聚集在一起&#xff0c;因为公司最近在谈项目出来面试就2个人&#xff0c;无奈又被叫到面试房间。 整个过程…...

编程日记 2023/5/5 19:12:40

Java 实现 YoloV7 人体姿态识别

1 OpenCV 环境的准备 这个项目中需要用到 opencv 进行图片的读取与处理操作&#xff0c;因此我们需要先配置一下 opencv 在 java 中运行的配置。 首先前往 opencv 官网下载 opencv-4.6 &#xff1a;点此下载&#xff1b;下载好后仅选择路径后即可完成安装。 此时将 opencv\b…...

编程日记 2023/5/5 19:07:39

跨越屏幕：桌面PC端的多端开发框架介绍

目前&#xff0c;随着互联网和移动互联网的发展&#xff0c;多端开发框架已经成为越来越多开发者更好的选择。主要有以下几个方面的前景&#xff1a; 跨平台开发需求不断增加&#xff1a;由于不同平台和设备的差异性&#xff0c;开发人员需要使用不同的编程语言和开发工具来为各…...

编程日记 2023/5/5 19:02:38

高效学习方法和工具推荐，让你事半功倍！

本文介绍了五种高效学习方法&#xff0c;包括制定详细的学习计划、集中注意力、不断复习、采用多种学习方式和利用小休息。同时&#xff0c;还推荐了五个高效学习工具和平台&#xff0c;包括Coursera、Duolingo、Quizlet、Khan Academy和Anki&#xff0c;让你在学习中事半功倍&…...

编程日记 2023/5/5 18:57:37

查看Docker容器中RabbitMQ的密码

要查看Docker容器中RabbitMQ的密码&#xff0c;可以尝试以下几个步骤&#xff1a; 1. 查看容器运行时的环境变量 在Docker容器中&#xff0c;可以通过环境变量来设置RabbitMQ的用户名和密码。因此&#xff0c;可以使用以下命令查看容器的环境变量&#xff1a; docker inspect…...

编程日记 2023/5/5 18:52:36

探索Qt线程编程的奥秘：多角度深入剖析

探索Qt线程编程的奥秘&#xff1a;多角度深入剖析 一、Qt线程编程基础&#xff08;Qt Threading Basics&#xff09;1.1 线程概念与基本概念&#xff08;Thread Concepts and Fundamentals&#xff09;1.2 Qt线程类简介&#xff1a;QThread&#xff08;Introduction to Qt Thre…...

编程日记 2023/5/5 18:47:34

【R语言】鉴于计算10亿以内训练模型记录for循环的加速

文章目录 1 前言2 几个循环2.1 100以内的和2.2 100以内奇数和/偶数和 3 多重循环3.1 向量化3.2 合并循环3.3 apply函数3.4 矩阵运算3.5 foreach分解任务 4 讨论 1 前言 笔者主力机是MBAM1芯片&#xff08;8256&#xff09;&#xff0c;某个下午巩固循环突然思考到个问题&#…...

编程日记 2023/5/5 18:42:33

C++类和对象 ——构造函数

C拷贝构造函数详解 什么是拷贝构造函数&#xff1f;拷贝构造函数的特征默认拷贝构造函数为什么需要显示定义构造函数&#xff1f;拷贝构造函数的调用场景什么时候不需要自己定义拷贝构造函数 什么是拷贝构造函数&#xff1f; 在现实生活中&#xff0c;拷贝构造函数就好像我们上…...

编程日记 2023/5/5 18:37:32

第2章-分治法

第2章-分治法 总分&#xff1a;100分 得分&#xff1a;20.0分 1 . 多选题 中等 10分 有关以下代码&#xff0c;说法正确的是&#xff08; ABCE&#xff09; def BinarySearch(s, x, low, high):if (low > high):return -1middle (low high) / 2if (x s[mid…...

编程日记 2023/5/5 18:32:31

20天能拿下PMP吗？

新版大纲&#xff0c;专注于人员、过程、业务环境三个领域&#xff0c;内容贯穿价值交付范围&#xff08;包括预测、敏捷和混合的方法&#xff09;。除了考试时间由240分钟变更为230分钟、200道单选题变为180道&#xff08;包含单选和多选&#xff09;之外&#xff0c;新考纲还…...

编程日记 2023/5/31 7:49:53

Word处理控件Aspose.Words功能演示：在 Java 中将 Word DOC/DOCX 转换为 PDF

Aspose.Words是一种高级Word文档处理API&#xff0c;用于执行各种文档管理和操作任务。API支持生成&#xff0c;修改&#xff0c;转换&#xff0c;呈现和打印文档&#xff0c;而无需在跨平台应用程序中直接使用Microsoft Word。 Aspose API支持流行文件格式处理&#xff0c;并…...

编程日记 2023/5/5 18:22:29

Linux 文件类型，目录与路径，文件与目录管理

文件类型 后面的字符表示文件类型标志 普通文件&#xff1a;-&#xff08;纯文本文件&#xff0c;二进制文件&#xff0c;数据格式文件&#xff09; 如文本文件、图片、程序文件等。 目录文件&#xff1a;d&#xff08;directory&#xff09; 用来存放其他文件或子目录。 设备…...

编程新知 2025/9/2 17:00:07

docker详细操作--未完待续

docker介绍 docker官网: Docker&#xff1a;加速容器应用程序开发 harbor官网&#xff1a;Harbor - Harbor 中文 使用docker加速器: Docker镜像极速下载服务 - 毫秒镜像 是什么 Docker 是一种开源的容器化平台&#xff0c;用于将应用程序及其依赖项&#xff08;如库、运行时环…...

编程新知 2025/9/7 8:53:56

线程同步：确保多线程程序的安全与高效！

全文目录&#xff1a; 开篇语前序前言第一部分&#xff1a;线程同步的概念与问题1.1 线程同步的概念1.2 线程同步的问题1.3 线程同步的解决方案 第二部分&#xff1a;synchronized关键字的使用2.1 使用 synchronized修饰方法2.2 使用 synchronized修饰代码块 第三部分&#xff…...

编程新知 2025/8/11 21:47:18

基于Flask实现的医疗保险欺诈识别监测模型

基于Flask实现的医疗保险欺诈识别监测模型 项目截图 项目简介 社会医疗保险是国家通过立法形式强制实施&#xff0c;由雇主和个人按一定比例缴纳保险费&#xff0c;建立社会医疗保险基金&#xff0c;支付雇员医疗费用的一种医疗保险制度&#xff0c; 它是促进社会文明和进步的…...

编程新知 2025/9/7 2:01:42

什么是库存周转？如何用进销存系统提高库存周转率？

你可能听说过这样一句话&#xff1a; “利润不是赚出来的&#xff0c;是管出来的。” 尤其是在制造业、批发零售、电商这类“货堆成山”的行业&#xff0c;很多企业看着销售不错&#xff0c;账上却没钱、利润也不见了&#xff0c;一翻库存才发现&#xff1a; 一堆卖不动的旧货…...

编程新知 2025/9/2 16:07:10

屋顶变身“发电站” ，中天合创屋面分布式光伏发电项目顺利并网！

5月28日&#xff0c;中天合创屋面分布式光伏发电项目顺利并网发电&#xff0c;该项目位于内蒙古自治区鄂尔多斯市乌审旗&#xff0c;项目利用中天合创聚乙烯、聚丙烯仓库屋面作为场地建设光伏电站&#xff0c;总装机容量为9.96MWp。 项目投运后&#xff0c;每年可节约标煤3670…...

编程新知 2025/8/5 22:40:10

如何将联系人从 iPhone 转移到 Android

从 iPhone 换到 Android 手机时&#xff0c;你可能需要保留重要的数据&#xff0c;例如通讯录。好在&#xff0c;将通讯录从 iPhone 转移到 Android 手机非常简单&#xff0c;你可以从本文中学习 6 种可靠的方法&#xff0c;确保随时保持连接&#xff0c;不错过任何信息。 第 1…...

编程新知 2025/8/10 12:51:07

unix/linux，sudo，其发展历程详细时间线、由来、历史背景

sudo 的诞生和演化，本身就是一部 Unix/Linux 系统管理哲学变迁的微缩史。来，让我们拨开时间的迷雾，一同探寻 sudo 那波澜壮阔（也颇为实用主义）的发展历程。 历史背景：su的时代与困境 ( 20 世纪 70 年代 - 80 年代初) 在 sudo 出现之前，Unix 系统管理员和需要特权操作的…...

编程新知 2025/8/21 20:18:45

（转）什么是DockerCompose?它有什么作用？

一、什么是DockerCompose? DockerCompose可以基于Compose文件帮我们快速的部署分布式应用&#xff0c;而无需手动一个个创建和运行容器。 Compose文件是一个文本文件&#xff0c;通过指令定义集群中的每个容器如何运行。 DockerCompose就是把DockerFile转换成指令去运行。 …...

编程新知 2025/8/27 21:34:17

鸿蒙DevEco Studio HarmonyOS 5跑酷小游戏实现指南

1. 项目概述 本跑酷小游戏基于鸿蒙HarmonyOS 5开发&#xff0c;使用DevEco Studio作为开发工具&#xff0c;采用Java语言实现&#xff0c;包含角色控制、障碍物生成和分数计算系统。 2. 项目结构 /src/main/java/com/example/runner/├── MainAbilitySlice.java // 主界…...

编程新知 2025/8/19 13:48:59