好的，让我为你提供一个初学者指南，并附上一些示例代码来说明 Flask + Bootstrap 和 Flask + React/Vue 的使用。
Flask + Bootstrap：
-
安装 Flask 和 Bootstrap：
首先，确保你已经安装了 Python 和 pip。然后可以使用 pip 安装 Flask 和 Bootstrap：pip install Flask Flask-Bootstrap -
创建 Flask 应用：
创建一个简单的 Flask 应用，将 Bootstrap 集成进去。from flask import Flask, render_template from flask_bootstrap import Bootstrapapp = Flask(__name__) bootstrap = Bootstrap(app)@app.route('/') def index():return render_template('index.html')if __name__ == '__main__':app.run(debug=True) -
创建 HTML 模板：
创建一个基本的 HTML 模板，使用 Bootstrap 的样式和组件来美化页面。<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Flask + Bootstrap</title><link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> </head> <body><div class="container"><h1>Hello, Flask + Bootstrap!</h1><p>This is a simple Flask web application with Bootstrap styling.</p></div> </body> </html>
Flask + React/Vue：
-
安装 Flask 和创建 React/Vue 应用：
确保你已经安装了 Node.js 和 npm。然后可以使用 create-react-app（React）或 vue-cli（Vue）来创建一个新的前端应用。# 创建 React 应用 npx create-react-app my-react-app# 或创建 Vue 应用 npm install -g @vue/cli vue create my-vue-app -
集成 Flask 和前端应用：
创建一个 Flask 应用，将前端应用集成进去。from flask import Flask, render_templateapp = Flask(__name__)@app.route('/') def index():return render_template('index.html')if __name__ == '__main__':app.run(debug=True) -
创建前端应用页面：
在 React/Vue 应用中创建你的页面，可以使用相应的组件和样式进行布局和设计。-
React 示例代码：
// src/App.js import React from 'react';function App() {return (<div className="container"><h1>Hello, Flask + React!</h1><p>This is a simple Flask web application with React frontend.</p></div>); }export default App; -
Vue 示例代码：
<!-- src/App.vue --> <template><div class="container"><h1>Hello, Flask + Vue!</h1><p>This is a simple Flask web application with Vue frontend.</p></div> </template><script> export default {name: 'App' } </script><style scoped> /* Add your styles here */ </style>
-
以上就是一个简单的初学者指南，展示了如何使用 Flask 结合 Bootstrap 或 React/Vue 来构建 Web 应用。希望这能帮助到你入门。
