给个人网站加上邮箱通知

1、前言

一般在网站上实现邮箱通知有多种方式，原先我所使用的是mailto:chenyc2021@qq.com的方式，这种方式可以直接调用设备上的邮箱发送邮件，但是这样子就容易被发件人不小心修改邮箱信息，而且如果发件人的设备上没有邮箱设备，可能就无法使用这个功能了，所以本次我更新了网站中的邮件发送功能，优化用户体验。

原先的发送邮件方式：

现如今改成使用 commons-email 来发送邮箱，配合前端的表单，实现邮件发送。

2、前端部分

首先编写前端表单界面，我这里所使用的是点击按钮弹出弹框的形式进行填写，然后使用 axios 将数据传送到后端。

<div class="Formail" v-if="isAd==0">
    <!--<a href="mailto:chenyc2021@qq.com?subject=广告招标&body=广告商家：初步报价：其他联系方式：">联系管理员</a>-->
    <el-button type="success" @click="dialogVisible = true">联系管理员</el-button>
  </div>
  <div>
    <el-dialog
        v-model="dialogVisible"
        title="您的广告内容"
        width="30%"
    >
      <div>
        <div>
          <span style="size: 18px;font-weight: bold">广告标题：</span>
          <el-input v-model="input.title" placeholder="广告标题" style="width: 80%"></el-input>
        </div>
        <div style="padding-top: 5px">
          <span style="size: 18px;font-weight: bold">广告内容：</span>
          <el-input v-model="input.text" autosize type="textarea" placeholder="广告内容" style="width: 80%"></el-input>
        </div>
        <div style="padding-top: 5px">
          <span style="size: 18px;font-weight: bold">广告报价：</span>
          <el-input v-model="input.money" placeholder="广告报价" style="width: 80%"></el-input>
        </div>
        <div style="padding-top: 5px">
          <span style="size: 18px;font-weight: bold">显示日期：</span>
          <el-input v-model="input.times" placeholder="显示日期" style="width: 80%"></el-input>
        </div>
        <div style="padding-top: 5px">
          <span style="size: 18px;font-weight: bold">联系方式：</span>
          <el-input v-model="input.phone" placeholder="联系方式" style="width: 80%"></el-input>
        </div>
        <div style="padding-top: 5px">
          <span style="size: 18px;font-weight: bold">您的邮箱：</span>
          <el-input v-model="input.email" placeholder="您的邮箱" style="width: 80%"></el-input>
        </div>
      </div>
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="buyEmail">发送</el-button
        >
      </span>
      </template>
    </el-dialog>
  </div>

所显示的效果如下图所示：

随后是 axios 部分，将表单的数据传送给后端。

const buyEmail = () => {
      proxy.$axios.get('ad/buy',{params:{"title":data.input.title,
          "text":data.input.text,
          "money":data.input.money,
          "time":data.input.times,
          "phone":data.input.phone,
          "buyemail":data.input.email}
      }).then((res)=>{
        ElMessage({
          message: '邮件发送成功，请等待工作人员回复.',
          type: 'success',
        })
      })
      data.dialogVisible = false
    }

发送邮件之后，会反馈信息，提高用户体验。

3、后端

现在就是重要的后端部分了。

3.1、引入依赖

<dependency>
    <groupId>org.apache.commons</groupId>
    <artifactId>commons-email</artifactId>
    <version>1.5</version>
</dependency>

3.2、控制器类

编写一个控制器类，接收前端传来的数据，并在此处做邮件的发送工作。

@GetMapping("/buy")
public int buyAd(String title,String text,String money,String time,String phone,String buyemail) throws EmailException, MalformedURLException {
    // 创建邮件
    HtmlEmail email = new HtmlEmail();
    // 邮箱主机，可以是域名也可以是IP地址
    email.setHostName("smtp.qq.com");
    // 设置使用安全链接
    email.setSSLOnConnect(true);
    // QQ邮箱默认的端口是465
    email.setSslSmtpPort("465");
    // 有中文的话需要设置编码，不然会乱码
    email.setCharset("UTF-8");
    // 设置你的邮箱名与生成的授权码
    email.setAuthentication("chenyc2021@qq.com", "cqyruivpditnebhc");
    // 发件人信息，收件人收到邮件时看到的收件人姓名
    email.setFrom(buyemail, title);
    // 标题
    email.setSubject(title);
    // 内容
    StringBuilder sb=new StringBuilder();
    sb.append("广告内容：").append(text).append('\n')
    .append("广告报价：").append(money).append('\r')
    .append("联系方式：").append(phone).append('\r')
    .append("上架时间").append(time);
    email.setHtmlMsg(sb.toString());

    email.addTo("chenyc2021@qq.com");
    //发送邮件
    email.send();
    return 1;
}