前后端数据交互完整 Demo（基于 Flask）

这里我们基于之前的表单练习，做一个完整的 demo

安装 Flask

pip install flask

项目结构

project/
│
├── app.py           ← Python 后端
└── templates/
    └── form.html    ← 你写的 HTML 放到这里

前端代码 form.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body {
      font-family: Arial, sans-serif; /* 设置字体 */
      background-color: #f2f2f2;
      padding: 40px; /* 设置内边距 */

    }

    .form-container {
      background-color: white;
      padding: 30px; /* 内边距 */
      max-width: 400px; /* 最大宽度 */
      margin: auto; /* 自动外边距以居中 */
      border-radius: 8px; /* 圆角效果 */
      box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* 轻微阴影效果 */

    }

    h2 {
      text-align: center; /* 将标题居中 */
    }

    /* 每个表单组之间的下间距 */
    .form-group {
      margin-bottom: 15px; /* 下间距 */
    }

    /* 标签统一设置为块级元素，加粗，底部有间距 */
    label {
      display: block; /* 块级元素 */
      font-weight: bold; /* 加粗 */
      margin-bottom: 5px; /* 底部间距 */
    }

    /* 给文本框、密码框、文件上传、文本域和下拉选择框设置统一样式 */
    input[type="text"],
    input[type="password"],
    input[type="file"],
    textarea,
    select {
      width: 100%; /* 宽度撑满容器 */
      padding: 8px; /* 内边距 */
      border: 1px solid #ccc; /* 灰色边框 */
      border-radius: 4px; /* 圆角 */
      box-sizing: border-box; /* 包含内边距和边框在宽度内 */
    }

    /* 性别和爱好那块，横向排列，间距10px */
    .form-group-inline {
      display: flex; /* 使用弹性布局 */
      gap: 10px; /* 间距 */
    }
    /* 内联标签字体不加粗 */
    .form-group-inline label {
      font-weight: normal; /* 不加粗 */
    }
    /* 提交按钮样式 */
    button {
      background-color: #4CAF50; /* 绿色背景 */
      color: white; /* 字体白色 */
      padding: 10px 15px; /* 内边距 */
      border: none; /* 去掉默认边框 */
      border-radius: 4px; /* 圆角 */
      cursor: pointer; /* 鼠标悬浮显示手指 */
    }

    /* 伪类选择器，按钮悬停时变深绿 */
    button:hover {
      background-color: #45a049; /* 悬停时变深绿色 */
    }

    /* 密码强度提示样式 */
    .password-strength {
      font-size: 0.9em; /* 字体略小 */
      color: gray; /* 字体颜色为灰色 */
    }
  </style>
</head>
<body>
  <div class="form-container">
    <h2>用户注册</h2>
    <form action="/submit" method="post" enctype="multipart/form-data">
      <div class="form-group">
        <label for="username">用户姓名</label>
        <input type="text" id="username" name="username">
      </div>

      <div class="form-group">
        <label for="password">用户密码</label>
        <input type="password" id="password" name="password">
      </div>

      <div class="form-group">
        <label>性别</label>
         <div class="form-group-inline">

           <label ><input type="radio"  name="gender" value="male">男</label>
           <label ><input type="radio"  name="gender" value="female">女</label>
        </div>

      </div>

      <div class="form-group">
        <label>爱好</label>
         <div class="form-group-inline">

         <label for=""><input type="checkbox"  name="hobby" value="music">音乐</label>
         <label for=""><input type="checkbox"  name="hobby" value="sports">运动</label>
         <label for=""><input type="checkbox"  name="hobby" value="reading">阅读</label>
        </div>
      </div>

      <div class="form-group">
        <label for="bio">个人简介</label>
        <textarea name="bio" id="bio" rows="4"></textarea>
      </div>

      <div class="form-group">
        <label for="avatar">上传头像</label>
        <input type="file" id="avatar" name="avatar">
      </div>

      <div class="form-group">
        <button type="submit">提交</button>
      </div>


    </form>
  </div>

</body>
</html>

app.py（完整 Python 后端代码）

from flask import Flask, render_template, request, jsonify
import os

app = Flask(__name__)

# 设置头像上传路径
UPLOAD_FOLDER = 'uploads'
os.makedirs(UPLOAD_FOLDER, exist_ok=True)
app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER

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

@app.route('/submit', methods=['POST'])
def submit():
    # 获取文本字段
    username = request.form.get('username')
    password = request.form.get('password')
    gender = request.form.get('gender')
    hobbies = request.form.getlist('hobby')  # 多选
    bio = request.form.get('bio')

    # 处理上传头像
    avatar = request.files.get('avatar')
    avatar_path = None
    if avatar and avatar.filename:
        avatar_path = os.path.join(app.config['UPLOAD_FOLDER'], avatar.filename)
        avatar.save(avatar_path)

    # 打印提交数据（demo 中用于展示）
    print("=== 收到表单数据 ===")
    print("用户名：", username)
    print("密码：", password)
    print("性别：", gender)
    print("爱好：", hobbies)
    print("简介：", bio)
    print("头像路径：", avatar_path)
    print("===================")

    # 模拟响应结果
    result = {
        'username': username,
        'password': password,
        'gender': gender,
        'hobbies': hobbies,
        'bio': bio,
        'avatar_saved_to': avatar_path
    }

    return jsonify(result)  # 返回 JSON 数据

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

效果说明