关键词

python2.7的flask框架之引用js&css等静态文件的实现方法

下面是详细讲解“Python2.7的Flask框架之引用JS&CSS等静态文件的实现方法”的攻略:

一、Flask框架静态文件目录

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

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

  • CSS:层叠样式表,用于设置页面样式。
  • JS:JavaScript 脚本,用于实现特定的交互效果。

因此,我们需要将 CSS 和 JS 文件放在 static 文件夹中,然后在 HTML 模板文件中引用。

二、在HTML页面中引入JS&CSS静态文件

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

引入 CSS 文件:

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

<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">

其中,"{{ url_for('static', filename='css/style.css') }}"获取到的是应用程序静态文件夹下的 "css/style.css" 文件的 URL。

引入 JS 文件:

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

<script src="{{ url_for('static', filename='js/main.js') }}"></script>

其中,"{{ url_for('static', filename='js/main.js') }}"获取到的是应用程序静态文件夹下的 "js/main.js" 文件的 URL。

三、示例1 -- 引用Bootstrap库

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

  1. Bootstrap 官网 下载所需版本的 Bootstrap 库文件。

  2. 将下载的 CSS 和 JS 文件放置到应用程序 static 文件夹下的 css 和 js 子目录中,例如:

/flask_app/static/css/bootstrap.min.css
/flask_app/static/js/bootstrap.min.js
  1. 在 HTML 页面模板中,使用 link 和 script 标签引入 Bootstrap 库文件。
<link rel="stylesheet" href="{{ url_for('static', filename='css/bootstrap.min.css') }}">

<script src="{{ url_for('static', filename='js/bootstrap.min.js') }}"></script>

四、示例2 -- 引用jQuery库

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

  1. jQuery 官网 下载所需版本的 jQuery 库文件。

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

/flask_app/static/js/jquery-3.5.1.min.js
  1. 在 HTML 页面模板中,使用 script 标签引入 jQuery 库文件。
<script src="{{ url_for('static', filename='js/jquery-3.5.1.min.js') }}"></script>

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

以上就是 Python2.7 的 Flask 框架在引入静态文件时的实现方法,希望对你有所帮助。

本文链接:http://task.lmcjl.com/news/15563.html

展开阅读全文