从 HTML / PHP 表单传输数据的问题答案

【问题标题】：Problem in transmitting data from an HTML / PHP form从 HTML / PHP 表单传输数据的问题
【发布时间】：2021-03-30 18:18:10
【问题描述】：

大家晚上好，我用 Argon (Bootstrap / vue.js) 做了一个项目。这是一个包含联系表格（姓名、电子邮件、消息）的联系部分的 SPA。我的联系表单建立在一个 .vue 文件上，该文件被导入到我的 index.html 中：

<form class="needs-validation col-md-8 from-right" novalidate id="myForm" method="post" action="./index.php">
            <div class="form-column">
                <div>
                    <label for="nom">Saisissez votre nom</label>
                    <input type="text" class="form-control" id="nom" required placeholder="Votre nom" name="nom">
                    <div class="valid-feedback">
                        C'est noté!
                    </div>
                    <div class="invalid-feedback">
                        Merci de saisir votre nom.
                    </div>
                </div>
                <div>
                    <label for="email" class="mt-3">Saisissez votre email</label>
                    <input type="email" class="form-control" id="email" placeholder="Votre email" name="email" required>
                    <div class="valid-feedback">
                        C'est noté!
                    </div>
                    <div class="invalid-feedback">
                        Merci de saisir un email valide.
                    </div>
                </div>
                <div>
                    <label for="message" class="mt-3">Saisissez votre message</label>
                    <textarea class="form-control" id="message" placeholder="Votre message ici" name="message" required></textarea>
                    <div class="valid-feedback">
                        C'est noté!
                    </div>
                    <div class="invalid-feedback">
                        Merci de saisir votre message.
                    </div>
                </div>
            </div>                      
            <button class="btn btn-primary my-5 mx-auto" type="submit">Envoyer</button>
            <div id="retourenvoimessage"></div>
        </form>

我建立了一个 index.php 文件，用于从 HTML 表单中检索数据，并通过电子邮件将其转发给我。如果我的代码冒犯了 PHP 爱好者，我提前道歉，就我而言，我目前根本不懂这种语言，并试图通过参考一些文档来解决：

<?php
$nom = $_POST['nom'];
$email = $_POST['email'];
$message = $_POST['message'];
$dest = "fer.mathieu@gmail.com";
$sujet = "Demande de contact";
$corp = "Nom : $nom\n Email : $email\n Message : $message";
$headers = "From: $nom\n Reply-To: $email";
if (mail($dest, $sujet, $corp, $headers)) {
    ?><script>document.querySelector('#retourenvoimessage').textContent="Message bien envoyé, merci!"</script><?php
} else {
    ?><script>alert("Oups, un problème est survenu lors de l'envoi du message, désolé...");document.location.href="http://www.namesite.com/"</script><?php
}
?>

我希望在提交过程中，如果成功，则会添加一条消息，指定发送。我有一个 javascript 函数可以防止默认行为，因此在提交时不会重新加载页面。昨天我把我的项目放到网上，“有戏”。当我填写表单的字段并提交时，首先没有按需要添加任何消息，但这并不是我最困扰的问题。我确实收到了来自主机的电子邮件，其中包含请求的字段（'姓名：'、'电子邮件：'、'消息：'），但这些都是空的。

在网上进行了大量研究后，无法找到我的问题的答案，我激励自己发布这个问题，如果问题，我的错误，非常简单，Smiley 混淆了，冒着被棍子击中的风险。

提前谢谢你，对不起我的英语不好。

【问题讨论】：

标签： php html forms vue.js deployment

【解决方案1】：

问题可能是我的 Vue 文件引起的。我用 PhpMailer 做了一个新的 php 文件，它在本地模式下运行良好。但是当我提交表单时，我不再按预期收到电子邮件。

我的 Vue.js 文件：

<form class="needs-validation col-md-8 from-right" novalidate id="myForm" method="post" action="index.php">
             <div class="form-column">
                 <div>
                     <label for="nom">Saisissez votre nom</label>
                     <input v-model="nom" type="text" class="form-control" id="nom" required placeholder="Votre nom" name="nom">
                     <div class="valid-feedback">
                         C'est noté!
                     </div>
                     <div class="invalid-feedback">
                         Merci de saisir votre nom.
                     </div>
                 </div>
                 <div>
                     <label for="email" class="mt-3">Saisissez votre email</label>
                     <input v-model="email" type="email" class="form-control" id="email" placeholder="Votre email" name="email" required>
                     <div class="valid-feedback">
                         C'est noté!
                     </div>
                     <div class="invalid-feedback">
                         Merci de saisir un email valide.
                     </div>
                 </div>
                 <div>
                     <label for="message" class="mt-3">Saisissez votre message</label>
                     <textarea v-model="message" class="form-control" id="message" placeholder="Votre message ici" name="message" required></textarea>
                     <div class="valid-feedback">
                         C'est noté!
                     </div>
                     <div class="invalid-feedback">
                         Merci de saisir votre message.
                     </div>
                 </div>
             </div>                      
             <button class="btn btn-primary my-5 mx-auto" type="submit">Envoyer</button>
         </form>
     </div>
         
 </section>
</template>
<script>
import BaseNav from "@/components/BaseNav";
import CloseButton from "@/components/CloseButton";

export default {
 name: 'Contact',
 data(){
     return {
         nom: '',
         email: '',
         message: ''
     }
 }
};
</script>

我的 PHP 文件：

<?php
use PHPMailer\PHPMailer\PHPMailer;
use PHPMailer\PHPMailer\Exception;

require 'lib/PHPMailer/src/Exception.php';
require 'lib/PHPMailer/src/PHPMailer.php';
require 'lib/PHPMailer/src/SMTP.php';

$nom = $_POST['nom'];
$email = $_POST['email'];
$message = $_POST['message'];

// Instantiation and passing `true` enables exceptions
$mail = new PHPMailer(true);

try {
    //Server settings
    $mail->SMTPDebug = 2;                                       
    $mail->isSMTP();                                           
    $mail->Host       = 'smtp.gmail.com';                      
    $mail->SMTPAuth   = true;                                   
    $mail->Username   = 'myadress@gmail.com';                
    $mail->Password   = 'mypassword';                         
    $mail->SMTPSecure = 'ssl';                                  
    $mail->Port       = 465;                                    

    //Recipients
    $mail->setFrom($email, $nom);                              
    $mail->addAddress('myadress@gmail.com');                 
    
    // Content
    $mail->isHTML(true);                                  
    $mail->Subject = 'Contact via portfolio';
    $mail->Body    = "Nom : $nom\n 
                      Email : $email\n 
                      Message : $message";
    
    $mail->send();
    echo 'Message bien envoyé';
} catch (Exception $e) {
    echo "Message could not be sent. Mailer Error: {$mail->ErrorInfo}";
}

?>

表单的 Javascript 函数：

(function() {
    'use strict';
    window.addEventListener('load', function() {
      // Fetch all the forms we want to apply custom Bootstrap validation styles to
      var forms = document.getElementsByClassName('needs-validation');
      // Loop over them and prevent submission
      var validation = Array.prototype.filter.call(forms, function(form) {
        form.addEventListener('submit', function(event) {
          if (form.checkValidity() === false) {
            event.preventDefault();
            event.stopPropagation();
          }
          form.classList.add('was-validated');
        }, false);
      });
    }, false);
  })();

【讨论】：