Flask + Bootstrap vs Flask + React/Vue：初学者指南

好的，让我为你提供一个初学者指南，并附上一些示例代码来说明 Flask + Bootstrap 和 Flask + React/Vue 的使用。

Flask + Bootstrap：

安装 Flask 和 Bootstrap：

首先，确保你已经安装了 Python 和 pip。然后可以使用 pip 安装 Flask 和 Bootstrap：
bash 复制代码
```
pip install Flask Flask-Bootstrap
```

创建 Flask 应用：

创建一个简单的 Flask 应用，将 Bootstrap 集成进去。

python 复制代码

from flask import Flask, render_template
from flask_bootstrap import Bootstrap

app = Flask(__name__)
bootstrap = Bootstrap(app)

@app.route('/')
def index():
    return render_template('index.html')

if __name__ == '__main__':
    app.run(debug=True)

创建 HTML 模板：

创建一个基本的 HTML 模板，使用 Bootstrap 的样式和组件来美化页面。

html 复制代码

<!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）来创建一个新的前端应用。
bash 复制代码
```
# 创建 React 应用
npx create-react-app my-react-app

# 或创建 Vue 应用
npm install -g @vue/cli
vue create my-vue-app
```

集成 Flask 和前端应用：

创建一个 Flask 应用，将前端应用集成进去。

python 复制代码

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def index():
    return render_template('index.html')

if __name__ == '__main__':
    app.run(debug=True)

创建前端应用页面：

在 React/Vue 应用中创建你的页面，可以使用相应的组件和样式进行布局和设计。

React 示例代码：

jsx 复制代码

// 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 示例代码：

html 复制代码

<!-- 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 应用。希望这能帮助到你入门。