Django框架开发005期 Python调用template模板网页开发调用静态资源

简介: Django框架开发005期 Python调用template模板网页开发调用静态资源

3.2开发调用静态资源文件

我们在开发漂亮的网页的时候往往会用到很多图片、字体、视频、音频等,那么这些资源文件都存放到Django项目的哪个位置呢?本节就来使用Django框架来实现调用一张图片,并使得它用img标签显示出来。我们把图片当做静态资源的一种文件类型,只要它能实现调用,其它的文件也可以被调用成功。

我们先来看看Django框架中的html网页默认调用图片后会发生什么?在这里,我们就来上文中创建的ljyIndex.html模板文件中的body元素中追加一个img标签,标签指向图片文件夹中的某个图片文件。那么我们先需要创建一个图片文件夹,这个图片文件夹最好是在某个大的资源文件夹中的,就像模板文件一样。那么,我们就为项目创建一个静态资源文件夹吧,我们把它命名为ljyStaticRes,创造完文件夹后,我们创建图片文件夹img、样式文件夹css、脚本文件夹js、其它文件的文件夹others,那么就构造出了一个标准的前端开发网站文件结构。最后再到Django框架配置文件配置好静态资源文件夹所在项目中的路径即可在浏览器中预览图片。详细步骤见下图。

第1步:创建静态资源文件夹。

在项目文件夹上右键菜单中新建文件夹。

对静态资源文件夹命名为ljyStaticRes。

接着在ljyStaticRes文件夹中将其它几个文件夹创建好,建立完成后,网站项目结构如下图所示。

第2步:复制图片到img文件夹。

我们接着复制一张图片到img文件夹中,本案例的图片为pic1.jpg。

复制完成后,静态资源文件夹的文件架构如下。

第3步:在html中调用图片文件。

打开ljyIndex.html文件,在body标签中追加img标签如下图所示。

我们启动项目后,预览一下效果如何?

通过以上截图效果,我们发现了找不到图片的问题,其实就是还没有在Django中配置好静态资源路径。

第4步:Django框架静态资源配置。

打开settings.py文件,到该文件的下方找到STATIC_URL变量,大概121行,在这个变量下方书写静态资源文件配置的变量STATICFILES_DIRS,并为其赋值[str(BASE_DIR)+"\\ljyStaticRes"],如下图所示。

配置好后,重启服务器,我们再来看看图片是否可以被浏览出来?

我们发现项目输出日志中仍然提示找不到图片。

其实此时是因为配置文件中对于静态资源文件夹有它自己的别名,这个别名就是STATIC_URL这个变量的值‘/static/’,所以这个别名就是调用图片时候的静态资源文件夹的名称。我们按照这个别名到浏览器中改一下,然后就可以看到图片了。

然后我们再修改模板文件上面的img标签调用的图片路径,把它的名称改为别名。

预览这个页面效果如下。

到这里,我们就成功解决了网站展示图片的问题了。其实这个方式的实用性非常强,除了图片以后,我们的css文件、js文件、资源链接等通过静态资源配置的方式都可以被调用了!所以,马上去实践一下吧!Django框架开发网站,我们最终还要解决让网站数据“活”起来的问题。因此,我们一定要学好让网站变活的数据库知识。小伙伴们,可以通过观看《刘金玉的零基础数据库教程》可以学会更多的数据库操作开发的知识哦!
下期开始,老刘就在此开始为大家介绍Django自带支持的sqlite数据库。通过刘金玉编程的教程,你会发现数据库的使用也是如此简单!加油哦!

相关文章
|
1月前
|
数据采集 存储 JSON
Python网络爬虫:Scrapy框架的实战应用与技巧分享
【10月更文挑战第27天】本文介绍了Python网络爬虫Scrapy框架的实战应用与技巧。首先讲解了如何创建Scrapy项目、定义爬虫、处理JSON响应、设置User-Agent和代理,以及存储爬取的数据。通过具体示例,帮助读者掌握Scrapy的核心功能和使用方法,提升数据采集效率。
108 6
|
6天前
|
JSON 数据可视化 测试技术
python+requests接口自动化框架的实现
通过以上步骤,我们构建了一个基本的Python+Requests接口自动化测试框架。这个框架具有良好的扩展性,可以根据实际需求进行功能扩展和优化。它不仅能提高测试效率,还能保证接口的稳定性和可靠性,为软件质量提供有力保障。
26 7
|
4天前
|
分布式计算 大数据 数据处理
技术评测:MaxCompute MaxFrame——阿里云自研分布式计算框架的Python编程接口
随着大数据和人工智能技术的发展,数据处理的需求日益增长。阿里云推出的MaxCompute MaxFrame(简称“MaxFrame”)是一个专为Python开发者设计的分布式计算框架,它不仅支持Python编程接口,还能直接利用MaxCompute的云原生大数据计算资源和服务。本文将通过一系列最佳实践测评,探讨MaxFrame在分布式Pandas处理以及大语言模型数据处理场景中的表现,并分析其在实际工作中的应用潜力。
23 2
|
9天前
|
Python
Seaborn 教程-模板(Context)
Seaborn 教程-模板(Context)
33 4
|
1月前
|
设计模式 前端开发 数据库
Python Web开发:Django框架下的全栈开发实战
【10月更文挑战第27天】本文介绍了Django框架在Python Web开发中的应用,涵盖了Django与Flask等框架的比较、项目结构、模型、视图、模板和URL配置等内容,并展示了实际代码示例,帮助读者快速掌握Django全栈开发的核心技术。
175 45
|
1月前
|
Java 测试技术 持续交付
【入门思路】基于Python+Unittest+Appium+Excel+BeautifulReport的App/移动端UI自动化测试框架搭建思路
本文重点讲解如何搭建App自动化测试框架的思路,而非完整源码。主要内容包括实现目的、框架设计、环境依赖和框架的主要组成部分。适用于初学者,旨在帮助其快速掌握App自动化测试的基本技能。文中详细介绍了从需求分析到技术栈选择,再到具体模块的封装与实现,包括登录、截图、日志、测试报告和邮件服务等。同时提供了运行效果的展示,便于理解和实践。
96 4
【入门思路】基于Python+Unittest+Appium+Excel+BeautifulReport的App/移动端UI自动化测试框架搭建思路
|
19天前
|
敏捷开发 测试技术 持续交付
自动化测试之美:从零开始搭建你的Python测试框架
在软件开发的马拉松赛道上,自动化测试是那个能让你保持节奏、避免跌宕起伏的神奇小助手。本文将带你走进自动化测试的世界,用Python这把钥匙,解锁高效、可靠的测试框架之门。你将学会如何步步为营,构建属于自己的测试庇护所,让代码质量成为晨跑时清新的空气,而不是雾霾中的忧虑。让我们一起摆脱手动测试的繁琐枷锁,拥抱自动化带来的自由吧!
|
29天前
|
开发框架 搜索推荐 数据可视化
Django框架适合开发哪种类型的Web应用程序?
Django 框架凭借其强大的功能、稳定性和可扩展性,几乎可以适应各种类型的 Web 应用程序开发需求。无论是简单的网站还是复杂的企业级系统,Django 都能提供可靠的支持,帮助开发者快速构建高质量的应用。同时,其活跃的社区和丰富的资源也为开发者在项目实施过程中提供了有力的保障。
|
1月前
|
缓存 API 数据库
Python哪个框架合适开发速卖通商品详情api?
在跨境电商平台速卖通的商品详情数据获取与整合中,Python 语言及其多种框架(如 Flask、Django、Tornado 和 FastAPI)提供了高效解决方案。Flask 简洁灵活,适合快速开发;Django 功能全面,适用于大型项目;Tornado 性能卓越,擅长处理高并发;FastAPI 结合类型提示和异步编程,开发体验优秀。选择合适的框架需综合考虑项目规模、性能要求和团队技术栈。
26 2
|
1月前
|
安全 API 数据库
Python哪个框架合适开发淘宝商品详情api?
在数字化商业时代,开发淘宝商品详情API成为企业拓展业务的重要手段。Python凭借其强大的框架支持,如Flask、Django、Tornado和FastAPI,为API开发提供了多样化的选择。本文探讨了这些框架的特点、优势及应用场景,帮助开发者根据项目需求选择最合适的工具,确保API的高效、稳定与可扩展性。
30 0