利用 php 实现订阅邮箱功能 – 代码

admin

11个月前发布

300

关于

php 是用于服务端的一种编程语言，用于实现交互动画，在服务器中运行然后传输到浏览器中，该源码只是示例，仅供参考！

代码

需要添加订阅邮箱的网页（index.php）

表单代码：

<form action="api/link-email.php" method="post" onsubmit="return validateEmail()">
    <div class="card__form">
        <input placeholder="你的邮箱" type="text" name="email">
            <div id="error-message" class="error-message"></div>
        <button class="sign-up" type="submit" > 订阅</button>
    </div>
</form>

优化表单的样式（style.css）

表单样式代码：

.card__form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.card__form input {
  margin-top: 20px;
  outline: 0;
  background: rgb(255, 255, 255);
  box-shadow: transparent 0px 0px 0px 1px inset;
  padding: 0.6em;
  border-radius: 14px;
  border: 1px solid #333;
  color: black;
}
.card__form button {
  border: 0;
  background: #111;
  color: #fff;
  padding: 0.68em;
  border-radius: 14px;
  font-weight: bold;
}  
.sign-up:hover {
  opacity: 0.8;
} 
.error-message {
  color: red;
  font-size: 12px;
}

需要处理表单 – 需要安装 PHP-Mailer（link-email.php）

处理代码：

<?php
require './src/Exception.php';
require './src/PHPMailer.php';
require './src/SMTP.php';
use PHPMailer\PHPMailer\PHPMailer;
use PHPMailer\PHPMailer\Exception;
$host = "127.0.0.1";
$username = "#";   // 替换为您的数据库用户名
$password = "#";   // 替换为您的数据库密码
$database = "#";       // 替换为您的数据库名
$conn = new mysqli($host, $username, $password, $database);
if ($conn->connect_error) {
die("连接数据库失败：" . $conn->connect_error);
}
if ($_SERVER["REQUEST_METHOD"] == "POST") {
  if (isset($_POST["email"])) {
      $email = $conn->real_escape_string($_POST["email"]); // 防止 SQL 注入
    // 检查邮箱是否已存在
    $check_query = "SELECT email FROM useremail WHERE email = '$email'";
    $result = $conn->query($check_query);
    if ($result === false) {
        echo "查询错误：" . $conn->error;
    } elseif ($result->num_rows > 0) {
        echo "邮箱已存在";
    } else {
        $current_time = date("Y-m-d H:i:s"); // 获取当前时间
        $insert_query = "INSERT INTO useremail (email, date) VALUES ('$email', '$current_time')";
        if ($conn->query($insert_query) === TRUE) {
            // 数据库插入成功后，发送邮件
            $mail = new PHPMailer(true);
            try {
    //服务器配置
    $mail->CharSet ="UTF-8";                     //设定邮件编码
    $mail->SMTPDebug = 0;                        // 调试模式输出
    $mail->isSMTP();                             // 使用 SMTP
    $mail->Host = 'smtp.exmail.qq.com';                // SMTP 服务器
    $mail->SMTPAuth = true;                      // 允许 SMTP 认证
    $mail->Username = 'suzhongying@eell.pro';                // SMTP 用户名  即邮箱的用户名
    $mail->Password = '#';             // SMTP 密码  部分邮箱是授权码 (例如 163 邮箱)
    $mail->SMTPSecure = 'ssl';                    // 允许 TLS 或者 ssl 协议
    $mail->Port = 465;                            // 服务器端口 25 或者 465 具体要看邮箱服务器支持
    $mail->setFrom('suzhongying@eell.pro', 'eell 的博客');  //发件人
    $mail->addAddress('#', '订阅用户');  // 收件人
    //$mail->addAddress('ellen@example.com');  // 可添加多个收件人
    $mail->addReplyTo('suzhongying@eell.pro', 'info'); //回复的时候回复给哪个邮箱 建议和发件人一致
    //$mail->addCC('cc@example.com');                    //抄送
    //$mail->addBCC('bcc@example.com');                    //密送
    //发送附件
    // $mail->addAttachment('../xy.zip');         // 添加附件
    // $mail->addAttachment('../thumb-1.jpg', 'new.jpg');    // 发送附件并且重命名
    //转换数组
    $fname = $_POST["email"];
    //Content
    $mail->isHTML(true);                                  // 是否以 HTML 文档格式发送  发送后客户端可直接显示对应 HTML 内容
    $mail->Subject = '通知';
    $mail->Body    = '<h1>您有新的订阅邮箱：' . $fname . '</h1>'.'时间:' . date('Y-m-d H:i:s');
    $mail->AltBody = '邮件客户端不支持 HTML';
                $mail->send();
                echo '成功';
            } catch (Exception $e) {
                echo '邮件发送失败：', $mail->ErrorInfo;
            }
        } else {
            echo "失败";
                }
            }
        }
    }
$conn->close(); // 关闭数据库连接
?>

处理的页面（link-email.php）

页面结构代码：

<body>
<div class="image-container">
  <div class="image-wrapper">
    <img src="https://image.eell.pro/file/6e56d7a1d1436f0f04e2d.png" alt="左侧图片">
    <img src="https://image.eell.pro/file/33666bbbd16a6dcadeb5b.png" alt="右侧图片">
  </div>
</div>
<div class="center-container">
  <svg class="svg-icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
     <svg class="icon" style="vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4514"><path d="M0 0h1024v1024H0V0z" fill="#202425" opacity=".01" p-id="4515"></path><path d="M955.733333 512c0 245.077333-198.656 443.733333-443.733333 443.733333S68.266667 757.077333 68.266667 512 266.922667 68.266667 512 68.266667s443.733333 198.656 443.733333 443.733333z" fill="#11AA66" p-id="4516"></path><path d="M512 102.4C285.7984 102.4 102.4 285.7984 102.4 512s183.3984 409.6 409.6 409.6 409.6-183.3984 409.6-409.6S738.2016 102.4 512 102.4zM34.133333 512C34.133333 248.081067 248.081067 34.133333 512 34.133333s477.866667 213.947733 477.866667 477.866667-213.947733 477.866667-477.866667 477.866667S34.133333 775.918933 34.133333 512z" fill="#11AA66" p-id="4517"></path><path d="M787.114667 339.285333a51.2 51.2 0 0 1 0 72.362667l-307.2 307.2a51.2 51.2 0 0 1-72.362667 0l-170.666667-170.666667a51.2 51.2 0 0 1 72.362667-72.362666L443.733333 610.235733l271.018667-271.018666a51.2 51.2 0 0 1 72.362667 0z" fill="#FFFFFF" p-id="4518"></path></svg>
  </svg>
  </svg>
  <h1>
//处理 php 代码
</h1>
</div>
<div class="center-container-button">
    <a href="https://www.eell.pro"><button class="sign-up" type="submit" > 返回主页</button></a>
</div>
<script>
  // 阻止鼠标滚轮事件的默认行为
  function preventScroll(event) {
  event.preventDefault();
}
  // 监听鼠标滚轮事件，并调用 preventScroll 函数
  window.addEventListener('mousewheel', preventScroll, { passive: false });
</script>
</body>

处理页面的样式（style.css）

处理页面样式代码：

/* 隐藏页面的滚动条 */
body {
  overflow: hidden;
} 
  /* 背景图片 */
  .image-container {
    display: flex;
    justify-content: space-between;
    position: relative; /* 添加相对定位，以便内部绝对定位生效 */
    height: 100vh; /* 设置容器高度为视窗高度 */
    overflow: hidden; /* 隐藏超出容器的内容 */
  }
  .image-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: flex-start; /* 图片对齐到顶部 */
    width: 100%; /* 填充整个宽度 */
  }
  .image-container img {
    max-width: 40%; /* 控制图片宽度 */
    height: auto;
  }
  /* 正中间的图标 */
.center-container {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -80%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 1; /* 将图标放在上层 */
}
  .svg-icon {
    width: 50%;
    height: 50%;
    fill: currentColor;
  }
  @media (max-width: 1000px) {
  .image-container img {
    display: none;
  }
}
/*按钮*/ 
button {
  border: 0;
  background: #11AA66;
  color: #fff;
  padding: 1em;
  border-radius: 14px;
  font-weight: bold;
}
.center-container-button {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, 200%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 1; /* 将图标放在上层 */
}

评分

欢迎为Ta评分

赞赏