利用Flask和Jinja2在表单提交后显示成功或错误消息

from flask import Flask, render_template, request
import smtplib

# 邮件配置信息，请替换为你的实际邮箱和密码
MY_EMAIL = "your_email@example.com"
MY_PASSWORD = "your_password"

app = Flask(__name__)

@app.route('/', methods=["GET", "POST"])
def home():
    # 默认状态为未发送或未尝试发送
    msg_sent_status = None 

    if request.method == "POST":
        data = request.form
        try:
            # 尝试发送邮件
            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:New Message from Website\n\n"
                        f"Name: {data['name']}\n"
                        f"Email: {data['email']}\n"
                        f"Phone: {data['phone']}\n"
                        f"Message: {data['message']}"
                )
            # 邮件发送成功
            msg_sent_status = True 
        except smtplib.SMTPException as e:
            # 邮件发送失败
            print(f"Error sending email: {e}")
            msg_sent_status = False
        except KeyError as e:
            # 表单数据缺失
            print(f"Missing form data: {e}")
            msg_sent_status = False
        except Exception as e:
            # 其他未知错误
            print(f"An unexpected error occurred: {e}")
            msg_sent_status = False

    # 渲染模板，并根据操作结果传递状态变量
    return render_template("index.html", msg_sent=msg_sent_status)

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

<!-- Contact-->
<section class="resume-section" id="contact">
    <div class="container">
        <div class="resume-section-content">
            <h2 class="mb-0">Contact Me</h2>
            <div class="subheading mb-5">
                If you are interested in me, I would love to hear it.
            </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="Your Name *" data-sb-validations="required" />
                        <div class="invalid-feedback" data-sb-feedback="name:required">A name is required.</div>
                    </div>
                    <div class="form-group">
                        <!-- Email address input-->
                        <input class="form-control" id="email" name="email" type="email" placeholder="Your Email *" data-sb-validations="required,email" />
                        <div class="invalid-feedback" data-sb-feedback="email:required">An email is required.</div>
                        <div class="invalid-feedback" data-sb-feedback="email:email">Email is not valid.</div>
                    </div>
                    <div class="form-group mb-md-0">
                        <!-- Phone number input-->
                        <input class="form-control" id="phone" name="phone" type="tel" placeholder="Your Phone *" data-sb-validations="required" />
                        <div class="invalid-feedback" data-sb-feedback="phone:required">A phone number is 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="Your Message *" data-sb-validations="required"></textarea>
                        <div class="invalid-feedback" data-sb-feedback="message:required">A message is required.</div>
                    </div>
                </div>
            </div>

            <!-- 消息显示区域 -->
            {% if msg_sent is true %}
                <!-- 提交成功消息 -->
                <div id="submitSuccessMessage">
                    <div class="text-center text-success mb-3">
                        <div class="fw-bolder">表单提交成功！您的消息已发送。</div>
                    </div>
                </div>
            {% elif msg_sent is false %}
                <!-- 提交错误消息 -->
                <div id="submitErrorMessage">
                    <div class="text-center text-danger mb-3">
                        <div class="fw-bolder">发送消息时发生错误，请稍后再试。</div>
                    </div>
                </div>
            {% endif %}

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