经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » JS/JS库/框架 » JavaScript » 查看文章
循序渐进BootstrapVue，开发公司门户网站（3）--- 结合邮件发送，收集用户反馈信息
来源：cnblogs　　作者：伍华聪　　时间：2021/6/28 9:34:03　　对本文有异议

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

1、客户反馈界面

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

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

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

Vue模板的HTML界面代码如下所示

  1. <b-form @submit="onSubmit" class="mt-4 mb-5">
  2.   <b-form-group id="input-group-1" label-for="input-1" class="mb-4">
  3.     <b-form-input id="input-1" v-model="form.name" required placeholder="请输入您的姓名"></b-form-input>
  4.   </b-form-group>
  5.  
  6.   <b-form-group id="input-group-2" label-for="input-2" class="mb-4">
  7.     <b-form-input id="input-2" v-model="form.phone" required placeholder="请输入您的手机/邮箱"></b-form-input>
  8.   </b-form-group>
  9.  
  10.   <b-form-group id="input-group-3" label-for="input-3" class="mb-4">
  11.     <b-form-select id="input-3" v-model="form.suggest" placeholder="反馈类型" :options="suggest" required></b-form-select>
  12.   </b-form-group>
  13.  
  14.   <b-form-group id="input-group-4" label-for="input-3" class="mb-5">
  15.     <b-form-textarea id="input-4" v-model="form.message" required rows="5" placeholder="请输入您想说的话"></b-form-textarea>
  16.   </b-form-group>
  17.  
  18.   <b-button type="submit" block variant="info">提 交</b-button>
  19. </b-form>

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

  1.       form: {
  2.         name: '',
  3.         phone: '',
  4.         suggest: null,
  5.         message: '',
  6.       },
  7.       suggest: [
  8.         { value: null, text: '反馈类型' },
  9.         { value: '需求上报', text: '需求上报' },
  10.         { value: '商务洽谈', text: '商务洽谈' },
  11.         { value: '意见建议', text: '意见建议' },
  12.         { value: '其它', text: '其它' }
  13.       ],

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

  1. async onSubmit (evt) {
  2.   evt.preventDefault()
  3.   const phoneReg = /^1[3456789]\d{9}$/
  4.   const emailReg = /^[A-Za-z0-9]+([_\.][A-Za-z0-9]+)*@([A-Za-z0-9\-]+\.)+[A-Za-z]{2,6}$/
  5.   if (!phoneReg.test(this.form.phone) && !emailReg.test(this.form.phone)) {
  6.     this.$bvToast.toast(`提交失败，请输入正确的手机号或邮箱号`, {
  7.       title: '提交结果',
  8.       variant: 'danger',
  9.       autoHideDelay: 5000
  10.     })
  11.     return
  12.   }

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

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

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

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

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

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

  1.       var type = '反馈'
  2.       var html = `
  3.           <p><strong>发信人姓名：</strong></p>
  4.           <p>${this.form.name}</p>
  5.           <p><strong>发信人联系方式：</strong></p>
  6.           <p>${this.form.phone}</p>
  7.           <p><strong>发信人反馈类型：</strong></p>
  8.           <p>${this.form.suggest}</p>
  9.           <p><strong>发信人留言：</strong></p>
  10.           <p>${this.form.message}</p>
  11.         `
  12.       const flag = SendMail(html, type)
  14.       if (flag) {
  15.         this.form = {
  16.           name: '',
  17.           phone: '',
  18.           message: ''
  19.         }
  20.         this.$bvToast.toast(`提交成功，我们将尽快与您取得联系！`, {
  21.           title: '提交结果',
  22.           variant: 'success',
  23.           autoHideDelay: 5000
  24.         })
  25.       } else {
  26.         this.$bvToast.toast(`提交失败，请稍后重试！`, {
  27.           title: '提交结果',
  28.           variant: 'danger',
  29.           autoHideDelay: 5000
  30.         })
  31.       }

 

2、邮件的发送处理

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

关于nodemailer的学习，可以参考下：https://github.com/nodemailer/nodemailer，或者官网：https://nodemailer.com/about/

它的使用代码如下所示：

  1. "use strict";
  2. const nodemailer = require("nodemailer");
  4. // async..await is not allowed in global scope, must use a wrapper
  5. async function main() {
  6.   // Generate test SMTP service account from ethereal.email
  7.   // Only needed if you don't have a real mail account for testing
  8.   let testAccount = await nodemailer.createTestAccount();
  10.   // create reusable transporter object using the default SMTP transport
  11.   let transporter = nodemailer.createTransport({
  12.     host: "smtp.ethereal.email",
  13.     port: 587,
  14.     secure: false, // true for 465, false for other ports
  15.     auth: {
  16.       user: testAccount.user, // generated ethereal user
  17.       pass: testAccount.pass, // generated ethereal password
  18.     },
  19.   });
  21.   // send mail with defined transport object
  22.   let info = await transporter.sendMail({
  23.     from: '"Fred Foo ??" <foo@example.com>', // sender address
  24.     to: "bar@example.com, baz@example.com", // list of receivers
  25.     subject: "Hello ?", // Subject line
  26.     text: "Hello world?", // plain text body
  27.     html: "<b>Hello world?</b>", // html body
  28.   });
  30.   console.log("Message sent: %s", info.messageId);
  31.   // Message sent: <b658f8ca-6296-ccf4-8306-87d57a0b4321@example.com>
  32.  
  33.   // Preview only available when sending through an Ethereal account
  34.   console.log("Preview URL: %s", nodemailer.getTestMessageUrl(info));
  35.   // Preview URL: https://ethereal.email/message/WaQKMgKddxQDoou...
  36. }

不过前面说了，我们不使用这个，就一笔带过，谈谈我们后端使用ABP接口发送邮件的处理吧。

我们前端封装一个调用后端接口发送邮件的通用处理函数，如下所示。

  1. function privateSendEmail(email, subject, body) {
  2.   var data = {
  3.     email,
  4.     subject,
  5.     body
  6.   }
  7.   return request({
  8.     url: '/abp/services/app/Account/SendEmail',
  9.     method: 'post',
  10.     data: data
  11.   })
  12. }

再简单封装一下发送反馈信息的邮件操作函数，如下所示。

  1. export async function SendMail(html, type) { //发送邮件
  2.   type = type || '反馈'
  3.   const mailOptions = {
  4.     from: `一条来自【广州爱奇迪】网站的${type} wuhuacong@163.com`,
  5.     to: 'wuhuacong@163.com',
  6.     subject: `一条来自【广州爱奇迪】网站的${type}`, //邮件标题
  7.     html, //邮件内容
  8.  
  9.   var email = 'wuhuacong@163.com'
  10.   var subject = `一条来自【广州爱奇迪】网站的${type}`
  12.   var result = false
  13.   await privateSendEmail(email, subject, html).then(data => {
  14.     result = data.success
  16.     return result
  17.   })
  18. }

这样我们在组件里面，直接引入这个封装函数进行调用即可。

  1. import { SendMail } from '@/api/system/mail'

最后发送操作。

 再次回到后端的ABP邮件发送接口上，我之前在随笔《循序渐进VUE+Element 前端应用开发(33）--- 邮件参数配置和模板邮件发送处理》中介绍过邮件发送的操作，我们ABP框架后端是基于AbpMailkitModule组件进行发送邮件的，只需要配置好相关发送邮件的信息即可。

Module中初始化中处理下对应的自定义发送和自定义配置项的处理类。

然后在使用的应用服务类中注入对应的邮件发送接口以供使用。

我们简单定义一个发送邮件的DTO对象，用来接收来自客户的反馈信息，如下所示。

  1.     /// <summary>
  2.     /// 常规邮件信息
  3.     /// </summary>
  4.     public class SendEmailDto
  5.     {
  6.         [Required]
  7.         [MaxLength(AbpUserBase.MaxEmailAddressLength)]
  8.         public string Email { get; set; }
  10.         /// <summary>
  11.         /// 内容
  12.         /// </summary>
  13.         [Required]
  14.         public string Body { get; set; }
  16.         /// <summary>
  17.         /// 标题
  18.         /// </summary>
  19.         [Required]
  20.         public string Subject { get; set; }
  22.     }

最后直接发送邮件处理即可。

  1.         /// <summary>
  2.         /// 发送常规邮件内容
  3.         /// </summary>
  4.         /// <param name="input"></param>
  5.         /// <returns></returns>
  6.         public async Task SendEmail(SendEmailDto input)
  7.         {
  8.             await _emailSender.SendAsync(new System.Net.Mail.MailMessage
  9.             {
  10.                 To = { input.Email },
  11.                 Subject = input.Subject,
  12.                 Body = input.Body,
  13.                 IsBodyHtml = true
  14.             });
  16.             LogHelper.Logger.Info($"校验邮件发送给:{input.Email}, 发送邮件成功");
  17.         }

发送处理后，我们就会在邮箱中收到邮件信息，如下所示。

 以上只是简单对用户信息进行收集，我们如果在系统各种常规的处理中，也可以通过邮件和系统用户进行信息通知，如找回密码、更新密码，重要操作、工作提醒通知等等操作。

 

原文链接：http://www.cnblogs.com/wuhuacong/p/14917460.html

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

JavaScript热门文章

  • echarts 饼图 + 全屏显示
  • js正则匹配以{开头,以}结尾的表达式怎么写？-附源码
  • echarts 实现数据(tooltip)自动轮播插件
  • Js设置博客园主题色(theme-color)
  • elementUI 设置input的只读或禁用的方法
  • 超级好用的流程图js框架 值得收藏
  • layui table+复杂表头+合并单元格
  • 获取地理位置
  • 如何使用JavaScript导入和导出Excel文件
  • WebStorm eslint插件报错解决 - TypeError: this.CliEngine is not a constructor

    • JavaScript推荐文章

  • 一些八股：1.fetch 的理解。2.let、const、var
  • 电子表格转身购物车：三步轻松实现
  • Canvas简历编辑器-图形绘制与状态管理(轻量级DOM)
  • IntersectionObserver + scrollIntoView 实现电梯导航 - xingba-coder
  • 可视化—gojs 超多超实用经验分享(三)
  • PixiJS源码分析系列： 第一章 从最简单的例子入手
  • WebRTC入门
  • 前端 Array.sort() 源码学习
  • 【技巧】JS代码这么写，前端小姐姐都会爱上你
  • 【JS】await异常捕获，这样做才完美

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号