• 欢迎访问开心洋葱网站,在线教程,推荐使用最新版火狐浏览器和Chrome浏览器访问本网站,欢迎加入开心洋葱 QQ群
  • 为方便开心洋葱网用户,开心洋葱官网已经开启复制功能!
  • 欢迎访问开心洋葱网站,手机也能访问哦~欢迎加入开心洋葱多维思维学习平台 QQ群
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏开心洋葱吧~~~~~~~~~~~~~!
  • 由于近期流量激增,小站的ECS没能经的起亲们的访问,本站依然没有盈利,如果各位看如果觉着文字不错,还请看官给小站打个赏~~~~~~~~~~~~~!

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

C# 开心洋葱 3113次浏览 0个评论

在系统处理中,有时候需要发送邮件通知用户,如新增用户的邮件确认,密码找回,以及常规订阅消息、通知等内容处理,都可以通过邮件的方式进行处理。本篇随笔介绍结合VUE+Element 前端,实现系统的邮件参数配置管理,以及基于邮件模板的方式进行邮件的发送。

1、邮件参数的配置管理

邮件参数一般需要配置如用户名、密码、邮件地址,显示名称,以及其他邮件所需的必要配置,一般我们可以通过界面管理的方式进行常规的参数配置,如下界面所示。

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

 其中的登录密码,现在一般是授权登录密码,而不是原始的账号密码了。以163为例,可以在设置中添加一个授权密码。

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

 

前端参数的配置管理,我们构建一个Api类,用于调用ABP后端的Api接口,如下所示。

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

查看窗体中显示邮件参数数据的代码如下所示。

    showAbpEmail() {
      this.resetForm('emailForm')
      setting.GetEmailSettingsForApplication().then(data => {
        if (data.result) {
          Object.assign(this.abpEmailForm, data.result)
        }
        this.isAbpEmail = true // 编辑状态
      })
    },

 

2、ABP后端邮件的发送处理

系统参数配置完成后,我们需要根据这些邮件参数进行邮件的发送,ABP框架基于.net core 的实现,我们发送邮件,需要添加一个Abp.MailKit的依赖,如下所示。

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

然后在模块的依赖上,添加对应的AbpMailkitModule的依赖即可。

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

一般来说,我们发送邮件,还需要重写DefaultMailKitSmtpBuilder的配置处理项,以便自定义发送处理过程。

    /// <summary>
    /// 重写默认的SmtpBuilder类
    /// </summary>
    public class MyMailKitSmtpBuilder : DefaultMailKitSmtpBuilder
    {
        private readonly ISmtpEmailSenderConfiguration _smtpEmailSenderConfiguration;
        private readonly IAbpMailKitConfiguration _abpMailKitConfiguration;
        public MyMailKitSmtpBuilder(ISmtpEmailSenderConfiguration smtpEmailSenderConfiguration, IAbpMailKitConfiguration abpMailKitConfiguration)
            : base(smtpEmailSenderConfiguration, abpMailKitConfiguration)
        {
            _smtpEmailSenderConfiguration = smtpEmailSenderConfiguration;
            _abpMailKitConfiguration = abpMailKitConfiguration;
        }

        /// <summary>
        /// 配置发送处理
        /// </summary>
        /// <param name="client"></param>
        protected override void ConfigureClient(SmtpClient client)
        {
            client.CheckCertificateRevocation = false;
            client.ServerCertificateValidationCallback = (sender, certificate, chain, errors) => true;

            client.Connect(_smtpEmailSenderConfiguration.Host, _smtpEmailSenderConfiguration.Port, GetSecureSocketOption());

            if (_smtpEmailSenderConfiguration.UseDefaultCredentials)
            {
                return;
            }

            var username = _smtpEmailSenderConfiguration.UserName;
            var password = _smtpEmailSenderConfiguration.Password;
            //password = SimpleStringCipher.Instance.Decrypt(originalPass);//如果不重写自定义配置MySmtpEmailSenderConfiguration,那么密码需要解密
            client.Authenticate(username, password);

            //base.ConfigureClient(client);
        }
    }

但是由于基类处理中,默认的邮件配置密码是直接从数据库读取信息的,没有进行加密,如基类SmtpEmailSenderConfiguration的实现如下。

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

但是我们应用程序的设置信息,密码是经过加密过的,因此需要重写这个配置项,进行对应的密码解密。

    /// <summary>
    /// 邮件发送参数配置类
    /// </summary>
    public class MySmtpEmailSenderConfiguration : SmtpEmailSenderConfiguration
    {
        public MySmtpEmailSenderConfiguration(ISettingManager settingManager) : base(settingManager)
        {

        }

        /// <summary>
        /// 重写密码处理,需要解密密码
        /// </summary>
        public override string Password => SimpleStringCipher.Instance.Decrypt(GetNotEmptySettingValue(EmailSettingNames.Smtp.Password));
    }

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

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

这样默认注入的发送邮件的接口就正常了,我们接下来就是根据邮件的模板进行内容发送即可。

 

3、邮件模板的处理

一般的邮件模板,是一个独立的文件方式,文件中定义一些预设的内容,然后实际处理的时候,替换这些变量即可。

邮件模板的内容替换,我喜欢用基于模板引擎的方式处理变量的替换,一般我用NVelocity来进行处理。

我在早期介绍过一些关于NVelocity的知识,需要可以参考:

《使用NVelocity生成内容的几种方式》

《强大的模板引擎开源软件NVelocity》

《Database2Sharp版本更新之自定义模板生成 》

《使用NVelocity0.5实现服务器端页面自动生成 》

例如,我在文本中定义一个连接:http://www.iqidi.com/h5/EmailValidate?callback=${callback} 其中${callback} 就是变量定义,可以在运行中进行变量替换的。

我们在Host项目中定义一些邮件文件模板,如下所示。

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

 

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

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

 

具体的邮件发送,就是读取模板内容,进行替换变量,然后调用接口进行邮件的发送即可。

        /// <summary>
        /// 发送校验的电子邮件
        /// </summary>
        /// <returns></returns>
        public async Task SendEmailValidate(SendEmailActivationLinkDto input)
        {
            var user = await GetUserByChecking(input.EmailAddress);
            //user.SetNewEmailConfirmationCode();

            #region 根据模板生成邮件正文

            //使用相对路径进行构造处理
            string template = string.Format("/UploadFiles/Email/EmailValidate.html");
            var helper = new NVelocityHelper(template);
            //${标题} ${内容} ${称呼} ${日期}
            var tilte = "邮箱验证通知";
            helper.AddKeyValue("title", tilte);
            helper.AddKeyValue("callname", "");
            helper.AddKeyValue("date", DateTime.Now.ToLongDateString());

            //邮箱校验码
            var callback = Guid.NewGuid().ToString();
            helper.AddKeyValue("callback", callback);

            var html = helper.ExecuteString();

            #endregion

            #region 构建邮件内容对象 发送邮件
            string toEmail = "wuhuacong@163.com";

            await _emailSender.SendAsync(new System.Net.Mail.MailMessage
            { 
                To = { toEmail },
                Subject = tilte,
                Body = html,
                IsBodyHtml = true
            });

            #endregion

            LogHelper.Logger.Info(string.Format("校验邮件发送给:{0}, {1}", toEmail, "发送邮件成功"));
        }

为了处理模板内容的方便,我们把规则放在辅助类 NVelocityHelper 中处理即可。

上面就是整个发送模板邮件的过程代码了。

发送邮件成功后,我们可以在邮箱中查看到对应的邮件,我们一般根据自己的业务需要定义不同的邮件模板即可。

邮件发送成功后,查看邮件效果如下所示。

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

 


开心洋葱 , 版权所有丨如未注明 , 均为原创丨未经授权请勿修改 , 转载请注明循序渐进VUE+Element 前端应用开发(33)— 邮件参数配置和模板邮件发送处理
喜欢 (0)

您必须 登录 才能发表评论!

加载中……