Django+Vue前后端分离实现发送邮件

运行效果

前端

邮箱

后端代码

0. 使用QQ邮箱发送邮件，开启QQ邮箱POP3/SMTP服务

   首先登录邮箱，点击设置-账户，开启POP3/SMTP服务，

   

1. 扫码根据页面提示操作获取授权码

   

2. 配置Django中的setting.py文件

    # 固定写法设置Email引擎
    EMAIL_BACKEND ='django.core.mail.backends.smtp.EmailBackend' 
    EMAIL_HOST = 'smtp.qq.com' # 腾讯QQ邮箱 SMTP 服务器地址 
    EMAIL_PORT = 25 # SMTP服务的端口号 XXXXXXXXX
    EMAIL_HOST_USER = 'XXXXXXXXX@qq.com' #你的qq邮箱，邮件发送者的邮箱 
    EMAIL_HOST_PASSWORD = 'None' #你申请的授权码（略） 
    EMAIL_USE_TLS = False #与SMTP服务器通信时,是否启用安全模式
   复制代码

3. 编写发送邮件的视图函数

   我们调用mail的send_mail函数来实现邮件的发送功能。

   首先我们进行导包

    from django.core.mail import send_mail
   复制代码

   该方法定义如下：

    def send_mail(subject, message, from_email, recipient_list,
                  fail_silently=False, auth_user=None, auth_password=None,
                  connection=None, html_message=None):
   复制代码

   我们介绍主要参数的含义：

   • subject：邮件主题；
   • message：邮件正文内容；
   • from_email：发送邮件者；
   • recipient_list：邮件接受者列表；
   • html_message：带有标签格式的HTML文本。

   完整函数代码如下

    from django.core.mail import send_mail
    from django.http import HttpResponse
    # Create your views here.
    ​
    def sendtest(request):
        receiver=request.GET.get('receiver')#从前端获取接受人邮件
        subject="尝试发送邮箱"#主题
        from_email='2907070504@qq.com'#发送人
        to_email=receiver#收件人
        message="成功发送邮件给收件人{0}".format(receiver)#内容
        send_mail(subject,message,from_email,[to_email])#调用mail的send_mail函数来发送邮件
        return HttpResponse('邮件发送成功啦')
   复制代码

4. 配置路由

   路由这里就不赘述了

前端代码

0. 写一个简单的界面

   

1. 利用正则校验邮箱格式

    testReg() {
          const reg = new RegExp(
            "^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$"
          );
          console.log(reg);
          if (reg.test(this.receiver)) {
            this.send(); //对接后端的函数
            alert("发送成功");
          } else {
            alert("邮箱格式不正确");
          }
        }
   复制代码

2. 将收件人的邮箱发送到后端

    send() {
          console.log("确认发送");
          this.axios
            .get("http://127.0.0.1:8000/sendemail/test/", {
              params: { receiver: this.receiver },
            })
            .then(() => {
              console.log("成功");
            })
            .catch((error) => {
              console.log(error);
            });
        },
   复制代码

   前端完整代码

    <template>
      <div class="con">
        <div>发送邮件</div>
        <input
          type="email"
          name=""
          id=""
          placeholder="接受邮件"
          v-model="receiver"
          style="margin: 20px 0"
        />
        <br />
        <!-- 利用正则校验邮箱格式 -->
        <button @click="testReg">确认发送</button>
      </div>
    </template>
    ​
    <script>
    export default {
      name: "",
      data() {
        return {
          receiver: "",//收件人邮箱
        };
      },
      methods: {
        //将收件人的邮箱发送到后端
        send() {
          console.log("确认发送");
          this.axios
            .get("http://127.0.0.1:8000/sendemail/test/", {
              params: { receiver: this.receiver },
            })
            .then(() => {
              console.log("成功");
            })
            .catch((error) => {
              console.log(error);
            });
        },
        testReg() {
          const reg = new RegExp(
            "^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$"
          );
          console.log(reg);
          if (reg.test(this.receiver)) {
            this.send(); //对接后端的函数
            alert("发送成功");
          } else {
            alert("邮箱格式不正确");
          }
        },
      },
    };
    </script>
    <style scoped>
    .con {
      width: 200px;
      height: 200px;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translateX(-50%) translateY(-50%);
      display: flex;
      flex-direction: column;
    }
    </style>
   复制代码

\