Flask应用中优雅地处理表单提交与消息提示

from flask import Flask, render_template, request
import smtplib
import os # 推荐使用环境变量管理敏感信息

# 从环境变量中获取邮件凭据，确保安全性
# 在实际部署中，请务必设置这些环境变量
MY_EMAIL = os.environ.get("MY_EMAIL", "your_email@example.com")
MY_PASSWORD = os.environ.get("MY_PASSWORD", "your_app_password") # 使用应用专用密码

app = Flask(__name__)

@app.route('/', methods=["GET", "POST"])
def home():
    message_status = None  # 初始化消息状态为None
    error_detail = None    # 初始化错误详情

    if request.method == "POST":
        data = request.form
        name = data.get("name")
        email = data.get("email")
        phone = data.get("phone")
        message = data.get("message")

        # 简单的后端数据验证
        if not all([name, email, message]):
            message_status = 'error'
            error_detail = "请填写所有必填字段。"
            return render_template("index.html", message_status=message_status, error_detail=error_detail)

        try:
            # 尝试连接SMTP服务器并发送邮件
            with smtplib.SMTP("smtp.gmail.com", port=587) as connection:
                connection.starttls()  # 启动TLS加密
                connection.login(user=MY_EMAIL, password=MY_PASSWORD)
                connection.sendmail(
                    from_addr=MY_EMAIL,
                    to_addrs=MY_EMAIL,  # 通常发送给自己或特定收件人
                    msg=f"Subject:新消息来自 {name}\n\n姓名: {name}\n邮箱: {email}\n电话: {phone}\n消息: {message}"
                )
            message_status = 'success'  # 邮件发送成功
        except Exception as e:
            # 捕获发送邮件过程中可能发生的任何异常
            print(f"邮件发送失败: {e}")
            message_status = 'error'
            error_detail = f"邮件发送失败，请稍后再试。错误信息: {e}"

        # 渲染模板，并传递消息状态和错误详情
        return render_template("index.html", message_status=message_status, error_detail=error_detail)

    # 对于GET请求，直接渲染模板，不显示任何消息
    return render_template("index.html", message_status=message_status)

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

<!-- Contact Section -->
<section class="resume-section" id="contact">
    <div class="container">
        <div class="resume-section-content">
            <h2 class="mb-0">联系我</h2>
            <div class="subheading mb-5">
                如果您对我感兴趣，我很乐意倾听。
            </div>
        </div>
        <form id="contactForm" action="{{ url_for('home') }}" method="post">
            <div class="row align-items-stretch mb-5">
                <div class="col-md-6">
                    <div class="form-group">
                        <!-- Name input-->
                        <input class="form-control" id="name" name="name" type="text" placeholder="您的姓名 *" data-sb-validations="required" />
                        <div class="invalid-feedback" data-sb-feedback="name:required">姓名是必填项。</div>
                    </div>
                    <div class="form-group">
                        <!-- Email address input-->
                        <input class="form-control" id="email" name="email" type="email" placeholder="您的邮箱 *" data-sb-validations="required,email" />
                        <div class="invalid-feedback" data-sb-feedback="email:required">邮箱是必填项。</div>
                        <div class="invalid-feedback" data-sb-feedback="email:email">邮箱格式不正确。</div>
                    </div>
                    <div class="form-group mb-md-0">
                        <!-- Phone number input-->
                        <input class="form-control" id="phone" name="phone" type="tel" placeholder="您的电话 *" data-sb-validations="required" />
                        <div class="invalid-feedback" data-sb-feedback="phone:required">电话号码是必填项。</div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-group form-group-textarea mb-md-0">
                        <!-- Message input-->
                        <textarea class="form-control" id="message" name="message" placeholder="您的消息 *" data-sb-validations="required"></textarea>
                        <div class="invalid-feedback" data-sb-feedback="message:required">消息是必填项。</div>
                    </div>
                </div>
            </div>

            <!-- 动态显示提交结果消息 -->
            {% if message_status == 'success' %}
                <div class="text-center text-white mb-3 p-3 rounded bg-success">
                    <div class="fw-bolder">表单提交成功！您的消息已发送。</div>
                </div>
            {% elif message_status == 'error' %}
                <div class="text-center text-white mb-3 p-3 rounded bg-danger">
                    <div class="fw-bolder">发送消息时发生错误！请检查您的输入或稍后再试。</div>
                    {% if error_detail %}
                        <small>{{ error_detail }}</small>
                    {% endif %}
                </div>
            {% endif %}

            <!-- Submit Button-->
            <div class="text-center">
                <button class="btn btn-primary btn-xl text-uppercase" id="submitButton" type="submit">发送消息</button>
            </div>
        </form>
    </div>
</section>