python2.7的flask框架之引用js|*|#038;css等静态文件的实现方法

第一段：Flask框架静态文件目录

在Flask应用中,静态资源文件一般保存在应用程序的 static 文件夹中.因为 Flask 框架在启动时会将 static 文件夹中的内容提供给外部访问.

一般情况下,静态资源文件可分为如下两类：

CSS：层叠样式表,用于设置页面样式.

JS：JavaScript 脚本,用于实现特定的交互效果.

所以呢,我们需要将 CSS 和 JS 文件放在 static 文件夹中,然后在 HTML 模板文件中引用.

第二段：在HTML页面中引入JSCSS静态文件

Flask 框架的 render_template 函数会在你的应用程序的 templates 文件夹中查找指定的模板文件.根据这个特性,我们可以在 HTML 文件中引入 CSS 和 JS 文件.

引入 CSS 文件：

在 HTML 页面模板中,使用 link 标签引入 CSS 文件.

引入 JS 文件：

在 HTML 页面模板中,使用 script 标签引入 JS 文件.

第三段：示例1 — 引用Bootstrap库

Bootstrap 是一个流行的 HTML、CSS、JavaScript 框架,用于开发响应式和移动优先的 Web 项目.为了引入 Bootstrap 库,我们需要完成以下步骤：

/flask_app/static/css/bootstrap.min.css
/flask_app/static/js/bootstrap.min.js

在 HTML 页面模板中,使用 link 和 script 标签引入 Bootstrap 库文件.

第四段：示例2 — 引用jQuery库

jQuery 是一个快速、小巧且功能丰富的 JavaScript 库.在 Python 应用程序中使用 jQuery 库也非常简单.为了引用 jQuery 库,我们需要完成以下步骤：

将 jQuery 库文件放置到应用程序 static 文件夹下的 js 子目录中,例如：

/flask_app/static/js/jquery-③⑤1.min.js

在 HTML 页面模板中,使用 script 标签引入 jQuery 库文件.

注意：为保证 jQuery 能正确引入,需要在 HTML 页面中将其引入放在所有其他 JS 文件之前.

以上就是土嘎嘎小编大虾米为大家整理的相关主题介绍,如果您觉得小编更新的文章只要能对粉丝们有用，就是我们最大的鼓励和动力,不要忘记讲本站分享给您身边的朋友哦！！