以下是一个基于 Python（Flask）、JavaScript、HTML 和 CSS 实现前后端交互的详细开发过程：
---
### 一、技术选型
1. **后端**：Python Flask（轻量级Web框架）
2. **前端**：HTML/CSS + JavaScript（原生JS或Fetch API）
3. **通信协议**：HTTP + JSON
---
### 二、项目结构
```bash
myweb/
├── static/ # 静态文件（CSS/JS/图片）
│ └── main.js
│ └── style.css
├── templates/ # HTML模板
│ └── index.html
└── app.py # Flask主程序
```
---
### 三、开发步骤
#### 1. 创建基础前端（HTML）
```html
<!-- templates/index.html -->
<!DOCTYPE html>
<html>
<head>
<title>前后端交互示例</title>
<link rel="stylesheet" href="/static/style.css">
</head>
<body>
<div class="container">
<h1>用户信息查询</h1>
<input type="text" id="username" placeholder="输入用户名">
<button οnclick="getData()">查询</button>
<div id="result"></div>
</div>
<script src="/static/main.js"></script>
</body>
</html>
