Django框架之动静态网页

2024-02-11 22:59

本文主要是介绍Django框架之动静态网页,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

Django框架之动静态网页:

静态文件:前端已经写好了的,能够直接调用使用的文件# 比如: 网站写好的js文件网站写好的css文件网站用到的图片文件第三方前端框架# django默认是不会自动帮你创建static文件夹,需要自己手动创建
# 这样做的目的:为了解耦合,更加的方便管理故我们在搭建Django项目的时候通常情况下:
我们将html文件默认都放到在templates文件夹下
我们将网站所使用的静态文件默认都放在static文件夹下

访问Django主页:

# 报错:因为在后端没有开设一个(http://127.0.0.1:8000/)这个路径所对应的资源接口

访问login/路由:

<h1 class='text-center'>登录</h1>   <!--使文本居中展示-->

我们可以看到,虽然访问到了,但是只识别到了<h1>标签但是,他的样式却没有改变,我们发现是没有访问到css与js静态文件。# 原因:这是因为我们并没有开设一个可以使用户访问到静态文件的接口
# 那么每次我们在创建路由的时候不可能再把每一个静态文件的接口也配置一下,所以Django就帮助我们来找到这个静态文件。

静态文件配置:

# settings.pySTATIC_URL = '/static/'   # 相当于访问静态文件的令牌,如果想要访问静态文件就必须以static开头# 配置静态文件
STATICFILES_DIRS = [os.path.join(BASE_DIR,'static')  # 这个static相当于真正的static存放静态文件文件夹的路径os.path.join(BASE_DIR,'static1'),os.path.join(BASE_DIR,'static2'),
]   # 列表的方式说明可存储多个静态文件夹
# html页面:寻找静态文件<link rel="stylesheet" href="/static/bootstrap-3.4.1-dist/css/bootstrap.min.css"><script src="/static/bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
# 这个/static/不是静态文件static文件夹路径,这个相当于令牌,如果你的令牌对上了,那么就去STATICFILES_DIRS列表里边的静态文件路径里边找bootstrap-3.4.1-dist/js/bootstrap.min.js,当列表中所有的静态文件路径下的文件都找完还没有才会报错。

# 如果将/static/换成别的我们来看一下:
STATIC_URL = '/xxx/'  <link rel="stylesheet" href="/static/bootstrap-3.4.1-dist/css/bootstrap.min.css">
<script src="/static/bootstrap-3.4.1-dist/js/bootstrap.min.js"></script># 如果想要正常访问,那么static就必须改为xxx,因为'令牌'不对只有当令牌对了才会去static文件夹下存放的静态文件查找,这里明显令牌就不对,在令牌这里就会报错。'''
当我们在写django项目的时候 可能会出现后端代码修改了但是前端页面没有变化的情况1.你在同一个端口开了好几个django项目 一直在跑的其实是第一个django项目2.浏览器缓存的问题解决:settingsnetworkdisable cache 勾选上	这样就会清除缓存。
'''

静态文件动态解析:

# 如果我们的令牌改了是不是所有html页面用到静态文件路径下的文件都会失效。这样如果我们的html页面很多,就要去每一个静态文件下找到并且修改,那这样无非是非常麻烦不合理的,所有就要用到动态解析,令牌改,html页面的令牌也跟着改。# 使用方法:{% load static %}<link rel="stylesheet" href="{% static 'bootstrap-3.4.1-dist/css/bootstrap.min.css' %}"><script src="{% static 'bootstrap-3.4.1-dist/js/bootstrap.min.js'%}"></script># 这样不管静态文件的'令牌'怎样修改,都会自动识别,不需要在手动再去修改静态文件开头
# 注意:这里的开头就必须写为 static(固定语法)

这篇关于Django框架之动静态网页的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/701028

相关文章

如何使用celery进行异步处理和定时任务(django)

《如何使用celery进行异步处理和定时任务(django)》文章介绍了Celery的基本概念、安装方法、如何使用Celery进行异步任务处理以及如何设置定时任务,通过Celery,可以在Web应用中... 目录一、celery的作用二、安装celery三、使用celery 异步执行任务四、使用celery

Django中使用SMTP实现邮件发送功能

《Django中使用SMTP实现邮件发送功能》在Django中使用SMTP发送邮件是一个常见的需求,通常用于发送用户注册确认邮件、密码重置邮件等,下面我们来看看如何在Django中配置S... 目录1. 配置 Django 项目以使用 SMTP2. 创建 Django 应用3. 添加应用到项目设置4. 创建

MyBatis框架实现一个简单的数据查询操作

《MyBatis框架实现一个简单的数据查询操作》本文介绍了MyBatis框架下进行数据查询操作的详细步骤,括创建实体类、编写SQL标签、配置Mapper、开启驼峰命名映射以及执行SQL语句等,感兴趣的... 基于在前面几章我们已经学习了对MyBATis进行环境配置,并利用SqlSessionFactory核

网页解析 lxml 库--实战

lxml库使用流程 lxml 是 Python 的第三方解析库,完全使用 Python 语言编写,它对 XPath表达式提供了良好的支 持,因此能够了高效地解析 HTML/XML 文档。本节讲解如何通过 lxml 库解析 HTML 文档。 pip install lxml lxm| 库提供了一个 etree 模块,该模块专门用来解析 HTML/XML 文档,下面来介绍一下 lxml 库

如何用Docker运行Django项目

本章教程,介绍如何用Docker创建一个Django,并运行能够访问。 一、拉取镜像 这里我们使用python3.11版本的docker镜像 docker pull python:3.11 二、运行容器 这里我们将容器内部的8080端口,映射到宿主机的80端口上。 docker run -itd --name python311 -p

cross-plateform 跨平台应用程序-03-如果只选择一个框架,应该选择哪一个?

跨平台系列 cross-plateform 跨平台应用程序-01-概览 cross-plateform 跨平台应用程序-02-有哪些主流技术栈? cross-plateform 跨平台应用程序-03-如果只选择一个框架,应该选择哪一个? cross-plateform 跨平台应用程序-04-React Native 介绍 cross-plateform 跨平台应用程序-05-Flutte

Spring框架5 - 容器的扩展功能 (ApplicationContext)

private static ApplicationContext applicationContext;static {applicationContext = new ClassPathXmlApplicationContext("bean.xml");} BeanFactory的功能扩展类ApplicationContext进行深度的分析。ApplicationConext与 BeanF

EasyPlayer.js网页H5 Web js播放器能力合集

最近遇到一个需求,要求做一款播放器,发现能力上跟EasyPlayer.js基本一致,满足要求: 需求 功性能 分类 需求描述 功能 预览 分屏模式 单分屏(单屏/全屏) 多分屏(2*2) 多分屏(3*3) 多分屏(4*4) 播放控制 播放(单个或全部) 暂停(暂停时展示最后一帧画面) 停止(单个或全部) 声音控制(开关/音量调节) 主辅码流切换 辅助功能 屏

数据治理框架-ISO数据治理标准

引言 "数据治理"并不是一个新的概念,国内外有很多组织专注于数据治理理论和实践的研究。目前国际上,主要的数据治理框架有ISO数据治理标准、GDI数据治理框架、DAMA数据治理管理框架等。 ISO数据治理标准 改标准阐述了数据治理的标准、基本原则和数据治理模型,是一套完整的数据治理方法论。 ISO/IEC 38505标准的数据治理方法论的核心内容如下: 数据治理的目标:促进组织高效、合理地

Thymeleaf:生成静态文件及异常处理java.lang.NoClassDefFoundError: ognl/PropertyAccessor

我们需要引入包: <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-thymeleaf</artifactId></dependency><dependency><groupId>org.springframework</groupId><artifactId>sp