循序渐进VUE+Element 前端应用开发(33）--- 邮件参数配置和模板邮件发送处理

程序员文章站 2022-06-15 14:17:48

在我们公司门户网站里面，如果有需要，我们可以提供一个页面给用户反馈信息，以便获得宝贵的用户信息反馈或者一些产品咨询的记录，一般这个结合邮件发送到负责人的邮箱即可。本篇随笔结合后端发送邮件的操作，把相关信息发送到门户网站的负责人邮箱里面。 ......

在我们公司门户网站里面，如果有需要，我们可以提供一个页面给用户反馈信息，以便获得宝贵的用户信息反馈或者一些产品咨询的记录，一般这个结合邮件发送到负责人的邮箱即可。本篇随笔结合后端发送邮件的操作，把相关信息发送到门户网站的负责人邮箱里面。

1、客户反馈界面

我们这个主题主要介绍bootstrapvue的使用，虽然我们有时候使用了常规的html元素，不过也是使用了bootstrap的样式来处理界面的。

本篇随笔继续介绍bootstrapvue中的表单组件 b-form 及表单元素的使用。在线反馈界面如下所示。

循序渐进VUE+Element 前端应用开发(33）--- 邮件参数配置和模板邮件发送处理

在这里主要通过一些常规的数据录入获得客户的反馈即可。

vue模板的html界面代码如下所示

<b-form @submit="onsubmit" class="mt-4 mb-5">
  <b-form-group id="input-group-1" label-for="input-1" class="mb-4">
    <b-form-input id="input-1" v-model="form.name" required placeholder="请输入您的姓名"></b-form-input>
  </b-form-group>

  <b-form-group id="input-group-2" label-for="input-2" class="mb-4">
    <b-form-input id="input-2" v-model="form.phone" required placeholder="请输入您的手机/邮箱"></b-form-input>
  </b-form-group>

  <b-form-group id="input-group-3" label-for="input-3" class="mb-4">
    <b-form-select id="input-3" v-model="form.suggest" placeholder="反馈类型" :options="suggest" required></b-form-select>
  </b-form-group>

  <b-form-group id="input-group-4" label-for="input-3" class="mb-5">
    <b-form-textarea id="input-4" v-model="form.message" required rows="5" placeholder="请输入您想说的话"></b-form-textarea>
  </b-form-group>

  <b-button type="submit" block variant="info">提 交</b-button>
</b-form>

而其中data里面定义了表单对应的数据，如下所示

      form: {
        name: '',
        phone: '',
        suggest: null,
        message: '',
      },
      suggest: [
        { value: null, text: '反馈类型' },
        { value: '需求上报', text: '需求上报' },
        { value: '商务洽谈', text: '商务洽谈' },
        { value: '意见建议', text: '意见建议' },
        { value: '其它', text: '其它' }
      ],

在数据提交的时候，我们根据正则表达式来判断一下对应的数据，当然我们也可以使用bootstrapvue的表单验证控件来处理，具体可以参考bootstrapvue的表单验证组件。

async onsubmit (evt) {
  evt.preventdefault()
  const phonereg = /^1[3456789]\d{9}$/
  const emailreg = /^[a-za-z0-9]+([_\.][a-za-z0-9]+)*@([a-za-z0-9\-]+\.)+[a-za-z]{2,6}$/
  if (!phonereg.test(this.form.phone) && !emailreg.test(this.form.phone)) {
    this.$bvtoast.toast(`提交失败，请输入正确的手机号或邮箱号`, {
      title: '提交结果',
      variant: 'danger',
      autohidedelay: 5000
    })
    return
  }

而其中 this.$bvtoast.toast 使用了bootstrapvue 冒泡提示组件。

通过this.$bvtoast.toast()vue组件实例注入从应用程序中的任何位置生成动态toast，而无需在应用程序中放置组件。

使用this.$bvtoast.toast()方法生成toasts。该方法接受两个参数：

message: toast主体的内容（字符串或vnodes数组）。必填的。将不会显示带有空消息的toasts。有关将vnodes数组作为消息传递的示例，请参阅advanced usage部分。
options: 用于提供标题和/或附加配置选项的可选选项对象。title选项可以是字符串或vnodes数组

options参数接受<b-toast>组件以camelcase name格式而不是kebab case格式接受的大多数道具（static和visible的除外）。

接着我们收集客户的信息，组合后调用后端发送邮件接口，发送邮件即可，最后提示用户发送是否成功。

      var type = '反馈'
      var html = `
          <p><strong>发信人姓名：</strong></p>
          <p>${this.form.name}</p>
          <p><strong>发信人联系方式：</strong></p>
          <p>${this.form.phone}</p>
          <p><strong>发信人反馈类型：</strong></p>
          <p>${this.form.suggest}</p>
          <p><strong>发信人留言：</strong></p>
          <p>${this.form.message}</p>
        `
      const flag = sendmail(html, type)

      if (flag) {
        this.form = {
          name: '',
          phone: '',
          message: ''
        }
        this.$bvtoast.toast(`提交成功，我们将尽快与您取得联系！`, {
          title: '提交结果',
          variant: 'success',
          autohidedelay: 5000
        })
      } else {
        this.$bvtoast.toast(`提交失败，请稍后重试！`, {
          title: '提交结果',
          variant: 'danger',
          autohidedelay: 5000
        })
      }

2、邮件的发送处理

关于邮件的发送，之前有参考过 nodemailer，这个使用node环境发送邮件的组件，不过我们现在的bootstrapvue项目的前端不符合这个条件，除非引入 nuxt ，让页面先在后端运行再推送给前端展示。

关于nodemailer的学习，可以参考下：，或者官网：

它的使用代码如下所示：

"use strict";
const nodemailer = require("nodemailer");

// async..await is not allowed in global scope, must use a wrapper
async function main() {
  // generate test smtp service account from ethereal.email
  // only needed if you don't have a real mail account for testing
  let testaccount = await nodemailer.createtestaccount();

  // create reusable transporter object using the default smtp transport
  let transporter = nodemailer.createtransport({
    host: "smtp.ethereal.email",
    port: 587,
    secure: false, // true for 465, false for other ports
    auth: {
      user: testaccount.user, // generated ethereal user
      pass: testaccount.pass, // generated ethereal password
    },
  });

  // send mail with defined transport object
  let info = await transporter.sendmail({
    from: '"fred foo

打赏