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

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

前言

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;这种方式就是配置…...

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

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

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

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

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

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

项目人力资源管理

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

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

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

ESL设计概述

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

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

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

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

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

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

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

Java 实现 YoloV7 人体姿态识别

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

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

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

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

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

查看Docker容器中RabbitMQ的密码

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

探索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…...

【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;某个下午巩固循环突然思考到个问题&#…...

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

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

第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…...

20天能拿下PMP吗?

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

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

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

c++ 面试题(1)-----深度优先搜索(DFS)实现

操作系统&#xff1a;ubuntu22.04 IDE:Visual Studio Code 编程语言&#xff1a;C11 题目描述 地上有一个 m 行 n 列的方格&#xff0c;从坐标 [0,0] 起始。一个机器人可以从某一格移动到上下左右四个格子&#xff0c;但不能进入行坐标和列坐标的数位之和大于 k 的格子。 例…...

(二)原型模式

原型的功能是将一个已经存在的对象作为源目标,其余对象都是通过这个源目标创建。发挥复制的作用就是原型模式的核心思想。 一、源型模式的定义 原型模式是指第二次创建对象可以通过复制已经存在的原型对象来实现,忽略对象创建过程中的其它细节。 📌 核心特点: 避免重复初…...

Mac软件卸载指南,简单易懂!

刚和Adobe分手&#xff0c;它却总在Library里给你写"回忆录"&#xff1f;卸载的Final Cut Pro像电子幽灵般阴魂不散&#xff1f;总是会有残留文件&#xff0c;别慌&#xff01;这份Mac软件卸载指南&#xff0c;将用最硬核的方式教你"数字分手术"&#xff0…...

【决胜公务员考试】求职OMG——见面课测验1

2025最新版&#xff01;&#xff01;&#xff01;6.8截至答题&#xff0c;大家注意呀&#xff01; 博主码字不易点个关注吧,祝期末顺利~~ 1.单选题(2分) 下列说法错误的是:&#xff08; B &#xff09; A.选调生属于公务员系统 B.公务员属于事业编 C.选调生有基层锻炼的要求 D…...

WordPress插件:AI多语言写作与智能配图、免费AI模型、SEO文章生成

厌倦手动写WordPress文章&#xff1f;AI自动生成&#xff0c;效率提升10倍&#xff01; 支持多语言、自动配图、定时发布&#xff0c;让内容创作更轻松&#xff01; AI内容生成 → 不想每天写文章&#xff1f;AI一键生成高质量内容&#xff01;多语言支持 → 跨境电商必备&am…...

Redis的发布订阅模式与专业的 MQ(如 Kafka, RabbitMQ)相比,优缺点是什么?适用于哪些场景?

Redis 的发布订阅&#xff08;Pub/Sub&#xff09;模式与专业的 MQ&#xff08;Message Queue&#xff09;如 Kafka、RabbitMQ 进行比较&#xff0c;核心的权衡点在于&#xff1a;简单与速度 vs. 可靠与功能。 下面我们详细展开对比。 Redis Pub/Sub 的核心特点 它是一个发后…...

算法:模拟

1.替换所有的问号 1576. 替换所有的问号 - 力扣&#xff08;LeetCode&#xff09; ​遍历字符串​&#xff1a;通过外层循环逐一检查每个字符。​遇到 ? 时处理​&#xff1a; 内层循环遍历小写字母&#xff08;a 到 z&#xff09;。对每个字母检查是否满足&#xff1a; ​与…...

CRMEB 中 PHP 短信扩展开发:涵盖一号通、阿里云、腾讯云、创蓝

目前已有一号通短信、阿里云短信、腾讯云短信扩展 扩展入口文件 文件目录 crmeb\services\sms\Sms.php 默认驱动类型为&#xff1a;一号通 namespace crmeb\services\sms;use crmeb\basic\BaseManager; use crmeb\services\AccessTokenServeService; use crmeb\services\sms\…...

Caliper 负载(Workload)详细解析

Caliper 负载(Workload)详细解析 负载(Workload)是 Caliper 性能测试的核心部分,它定义了测试期间要执行的具体合约调用行为和交易模式。下面我将全面深入地讲解负载的各个方面。 一、负载模块基本结构 一个典型的负载模块(如 workload.js)包含以下基本结构: use strict;/…...

关于easyexcel动态下拉选问题处理

前些日子突然碰到一个问题&#xff0c;说是客户的导入文件模版想支持部分导入内容的下拉选&#xff0c;于是我就找了easyexcel官网寻找解决方案&#xff0c;并没有找到合适的方案&#xff0c;没办法只能自己动手并分享出来&#xff0c;针对Java生成Excel下拉菜单时因选项过多导…...