它们之间的通信是通过 HTTP 请求 来完成的，整个工作流程如下：
（图片来源网络，侵删）
- 前端 (Bootstrap)：用户在浏览器中看到一个由 HTML、CSS（来自 Bootstrap）和 JavaScript 构建的网页，这个页面可以包含表单、按钮等交互元素。
- 用户操作：用户在页面上进行操作，比如点击一个按钮、填写一个表单并提交。
- 发送请求：JavaScript 会捕获这个操作，然后通过
fetchAPI 或axios等库，向后端的一个 URL 发送一个 HTTP 请求（通常是 GET 或 POST）。 - 后端 (Python)：Python Web 服务器（如 Flask 或 Django）接收到这个 HTTP 请求。
- Python 处理：Python 代码执行相应的逻辑，比如连接数据库、进行计算、调用其他服务等。
- 返回响应：Python 将处理结果打包成一个 HTTP 响应，通常格式为 JSON。
- 前端接收：前端的 JavaScript 接收到这个 JSON 响应。
- 更新页面：JavaScript 解析 JSON 数据，然后使用 JavaScript 动态地 更新 HTML 页面的内容，从而让用户看到结果。
下面我将用一个完整的、可运行的例子来展示这个过程，我们将使用 Flask 作为 Python 后端，因为它轻量且易于理解。
项目结构
/my_project
|-- app.py # Python Flask 后端
|-- /templates
| |-- index.html # HTML 模板，使用 Bootstrap
|-- /static
| |-- style.css # (可选) 自定义样式第1步：创建 Python 后端 (app.py)
这个文件将包含我们的 Flask 应用逻辑，它会提供一个网页，并处理从该网页发送过来的数据。
# app.py
from flask import Flask, render_template, request, jsonify
# 创建一个 Flask 应用实例
app = Flask(__name__)
# 定义路由，当用户访问根 URL ('/') 时，执行这个函数
@app.route('/')
def index():
# 渲染 templates 文件夹下的 index.html 文件
return render_template('index.html')
# 定义一个处理 API 请求的路由
# methods=['POST'] 表示这个路由只接受 POST 请求
@app.route('/api/greet', methods=['POST'])
def greet():
# 从前端发送的 JSON 数据中获取 'name' 字段
# request.get_json() 会解析请求体中的 JSON 数据
data = request.get_json()
name = data.get('name', 'Stranger') # 如果没有提供 name，默认使用 'Stranger'
# 创建一个响应字典
response = {
"message": f"你好, {name}! 欢迎来自 Python 后端的问候。",
"status": "success"
}
# 使用 jsonify 将 Python 字典转换为 JSON 响应
# 并设置正确的 Content-Type 头部 (application/json)
return jsonify(response)
# 如果这个脚本被直接运行，则启动开发服务器
if __name__ == '__main__':
# debug=True 会在代码修改后自动重启服务器，方便开发
app.run(debug=True)
第2步：创建前端页面 (templates/index.html)
这个文件使用 Bootstrap 来构建界面，并包含 JavaScript 来与 Python 后端通信。
<!-- templates/index.html -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">Bootstrap 调用 Python 示例</title>
<!-- 1. 引入 Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
body {
padding-top: 50px; /* 给顶部一些空间 */
}
#result-container {
display: none; /* 初始隐藏结果区域 */
margin-top: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6 offset-md-3">
<div class="card">
<div class="card-header bg-primary text-white">
<h4 class="mb-0">问候生成器</h4>
</div>
<div class="card-body">
<!-- 2. 创建一个表单 -->
<form id="greeting-form">
<div class="mb-3">
<label for="nameInput" class="form-label">请输入你的名字:</label>
<input type="text" class="form-control" id="nameInput" placeholder=" 张三" required>
</div>
<!-- 3. 添加一个提交按钮 -->
<button type="submit" class="btn btn-primary w-100">
发送问候请求
</button>
</form>
<!-- 4. 创建一个区域用于显示 Python 返回的结果 -->
<div id="result-container" class="alert alert-success">
<strong>响应结果:</strong>
<p id="response-message"></p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 5. 引入 Bootstrap JS (依赖 Popper.js) -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<!-- 6. 编写 JavaScript 来处理表单提交和 API 调用 -->
<script>
// 当文档加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
// 获取表单和结果区域的 DOM 元素
const form = document.getElementById('greeting-form');
const resultContainer = document.getElementById('result-container');
const responseMessage = document.getElementById('response-message');
// 监听表单的 'submit' 事件
form.addEventListener('submit', function(event) {
// 阻止表单的默认提交行为（页面刷新）
event.preventDefault();
// 获取输入框的值
const name = document.getElementById('nameInput').value;
// 使用 fetch API 向后端发送 POST 请求
// API 的 URL 必须和 Flask 路由中的 @app.route('/api/greet') 完全一致
fetch('/api/greet', {
method: 'POST', // 指定请求方法
headers: {
// 告诉服务器我们发送的是 JSON 数据
'Content-Type': 'application/json'
},
// 将数据转换为 JSON 字符串作为请求体
body: JSON.stringify({ name: name })
})
.then(response => {
// 检查响应是否成功 (状态码 2xx)
if (!response.ok) {
// 如果不成功，抛出一个错误
throw new Error('网络响应不正常');
}
// 将响应体解析为 JSON 对象
return response.json();
})
.then(data => {
// 成功接收到数据后，更新页面
console.log('从 Python 收到的数据:', data);
// 显示结果区域
resultContainer.style.display = 'block';
// 将返回的消息显示在页面上
responseMessage.textContent = data.message;
})
.catch(error => {
// 处理请求过程中发生的错误
console.error('请求出错:', error);
alert('请求失败，请检查控制台获取详细信息。');
});
});
});
</script>
</body>
</html>
第3步：运行和测试
-
安装 Flask 如果你还没有安装 Flask，请在终端或命令行中运行：
（图片来源网络，侵删）pip install Flask
-
启动后端服务器 在你的项目根目录（
my_project）下，打开终端，运行：python app.py
你应该会看到类似这样的输出：
* Serving Flask app 'app' * Debug mode: on * Running on http://127.0.0.1:5000 Press CTRL+C to quit -
访问前端页面 打开你的网页浏览器，访问
http://127.0.0.1:5000。 -
测试交互
- 在输入框中输入你的名字（"李四"）。
- 点击 "发送问候请求" 按钮。
- 你会看到页面下方出现一个绿色的提示框,显示 "你好, 李四! 欢迎来自 Python 后端的问候。"
- 打开浏览器的开发者工具（按 F12），切换到 "Network" (网络) 标签页，你还能看到
/api/greet请求的详细信息，包括它发送的 JSON 请求体和接收到的 JSON 响应体。
- 核心思想：通过 HTTP 请求/响应模型进行通信。
- 前端角色：负责展示用户界面（UI），由 Bootstrap 美化，并通过 JavaScript 发起请求和接收响应。
- 后端角色：负责业务逻辑处理，由 Python (Flask/Django) 实现，并暴露 API 接口供前端调用。
- 数据格式：前后端数据交换最常用、最标准的方式是 JSON，因为它轻量、易于解析，并且与 JavaScript 原生兼容。
这个例子是现代 Web 开发的基础，掌握了它，你就可以构建出功能强大的动态网站和 Web 应用。
