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数据库。通过刘金玉编程的教程,你会发现数据库的使用也是如此简单!加油哦!

相关文章
|
3天前
|
数据采集 存储 JSON
Python网络爬虫:Scrapy框架的实战应用与技巧分享
【10月更文挑战第27天】本文介绍了Python网络爬虫Scrapy框架的实战应用与技巧。首先讲解了如何创建Scrapy项目、定义爬虫、处理JSON响应、设置User-Agent和代理,以及存储爬取的数据。通过具体示例,帮助读者掌握Scrapy的核心功能和使用方法,提升数据采集效率。
26 6
|
3天前
|
设计模式 前端开发 数据库
Python Web开发:Django框架下的全栈开发实战
【10月更文挑战第27天】本文介绍了Django框架在Python Web开发中的应用,涵盖了Django与Flask等框架的比较、项目结构、模型、视图、模板和URL配置等内容,并展示了实际代码示例,帮助读者快速掌握Django全栈开发的核心技术。
73 44
|
4天前
|
数据采集 前端开发 中间件
Python网络爬虫:Scrapy框架的实战应用与技巧分享
【10月更文挑战第26天】Python是一种强大的编程语言,在数据抓取和网络爬虫领域应用广泛。Scrapy作为高效灵活的爬虫框架,为开发者提供了强大的工具集。本文通过实战案例,详细解析Scrapy框架的应用与技巧,并附上示例代码。文章介绍了Scrapy的基本概念、创建项目、编写简单爬虫、高级特性和技巧等内容。
21 4
|
3天前
|
算法 测试技术 开发者
性能优化与代码审查:提升Python开发效率
性能优化与代码审查:提升Python开发效率
8 1
|
4天前
|
安全 数据库 开发者
Python Web开发:Django框架下的全栈开发实战
【10月更文挑战第26天】本文详细介绍了如何在Django框架下进行全栈开发,包括环境安装与配置、创建项目和应用、定义模型类、运行数据库迁移、创建视图和URL映射、编写模板以及启动开发服务器等步骤,并通过示例代码展示了具体实现过程。
21 2
|
3天前
|
网络协议 调度 开发者
Python网络编程:Twisted框架的异步IO处理与实战
【10月更文挑战第27天】本文介绍了Python网络编程中的Twisted框架,重点讲解了其异步IO处理机制。通过反应器模式,Twisted能够在单线程中高效处理多个网络连接。文章提供了两个实战示例:一个简单的Echo服务器和一个HTTP服务器,展示了Twisted的强大功能和灵活性。
13 0
|
3月前
|
机器学习/深度学习 数据采集 数据可视化
基于爬虫和机器学习的招聘数据分析与可视化系统,python django框架,前端bootstrap,机器学习有八种带有可视化大屏和后台
本文介绍了一个基于Python Django框架和Bootstrap前端技术,集成了机器学习算法和数据可视化的招聘数据分析与可视化系统,该系统通过爬虫技术获取职位信息,并使用多种机器学习模型进行薪资预测、职位匹配和趋势分析,提供了一个直观的可视化大屏和后台管理系统,以优化招聘策略并提升决策质量。
157 4
|
7天前
|
安全 数据库 C++
Python Web框架比较:Django vs Flask vs Pyramid
Python Web框架比较:Django vs Flask vs Pyramid
16 1
|
2月前
|
机器学习/深度学习 人工智能 算法
植物病害识别系统Python+卷积神经网络算法+图像识别+人工智能项目+深度学习项目+计算机课设项目+Django网页界面
植物病害识别系统。本系统使用Python作为主要编程语言,通过收集水稻常见的四种叶片病害图片('细菌性叶枯病', '稻瘟病', '褐斑病', '稻瘟条纹病毒病')作为后面模型训练用到的数据集。然后使用TensorFlow搭建卷积神经网络算法模型,并进行多轮迭代训练,最后得到一个识别精度较高的算法模型,然后将其保存为h5格式的本地模型文件。再使用Django搭建Web网页平台操作界面,实现用户上传一张测试图片识别其名称。
110 22
植物病害识别系统Python+卷积神经网络算法+图像识别+人工智能项目+深度学习项目+计算机课设项目+Django网页界面
|
19天前
|
安全 数据库 C++
Python Web框架比较:Django vs Flask vs Pyramid
Python Web框架比较:Django vs Flask vs Pyramid
18 4