### Flask框架与前端框架的集成方法 Flask 是一种轻量级的 Python Web 框架，专注于后端逻辑和 API 提供。它可以通过多种方式与现代前端框架（如 Vue.js、React 和 Angular）结合使用[^1]，也可以轻松集成流行的 CSS 框架（如 Bootstrap）。以下是几种常见的集成方案： #### 1. 静态文件服务 Flask 可以通过其 `static` 文件夹提供静态资源（CSS、JavaScript 等），这使得它可以作为简单的服务器来支持前端框架的应用程序。开发者可以在 `templates` 文件夹中放置 HTML 文件，在 `static` 文件夹中存储 JavaScript 和 CSS 资源。 ```html <link rel="stylesheet" href="{{ url_for('static', filename='css/bootstrap.min.css') }}"> <script src="{{ url_for('static', filename='js/app.js') }}"></script> ``` 这种方式适用于小型项目或原型设计阶段[^1]。 --- #### 2. 使用 Flask-Bootstrap 扩展 为了更方便地集成 Bootstrap，可以借助 Flask-Bootstrap 扩展。该扩展允许开发者快速引入 Bootstrap 样式并减少手动配置的工作量[^5]。 安装 Flask-Bootstrap： ```bash pip install flask-bootstrap ``` 初始化扩展： ```python from flask import Flask from flask_bootstrap import Bootstrap app = Flask(__name__) bootstrap = Bootstrap(app) ``` 在模板中使用 Bootstrap 组件时无需额外加载外部链接，因为 Flask-Bootstrap 已经自动完成了这一过程[^3]。 --- #### 3. 前后端分离架构 对于大型项目，推荐采用前后端完全分离的方式。在这种模式下，Flask 主要负责提供 RESTful 或 GraphQL 接口，而前端则由独立运行的 React、Vue.js 或 Angular 应用调用这些接口完成数据交互[^4]。 示例：创建一个简单的 REST API。 ```python from flask import Flask, jsonify app = Flask(__name__) @app.route('/api/data') def get_data(): data = {"message": "Hello from Flask!"} return jsonify(data) if __name__ == '__main__': app.run(debug=True) ``` 前端部分可以部署在一个单独的服务上（例如 Nginx 或 Apache），并通过 AJAX 请求访问上述 API 数据[^4]。 --- #### 4. 单页应用 (SPA) 支持 如果目标是构建单页面应用，则可以直接将编译后的前端代码放入 Flask 的 `static` 文件夹，并设置默认路由返回入口文件（通常是 `index.html`）[^1]。 ```python @app.route('/') def index(): return app.send_static_file('index.html') @app.errorhandler(404) def not_found(e): return app.send_static_file('index.html') ``` 此方法特别适合于配合 React 或 Vue CLI 构建工具链使用的场景[^4]。 --- #### 总结 无论是简单的小型网站还是复杂的全栈应用，Flask 都具备灵活适应的能力去满足不同需求下的前端框架集成要求。具体选择哪种方式取决于项目的规模和技术选型方向。