循序漸進VUE+Element 前端應用開發(33)--- 郵件參數配置和模板郵件發送處理


在系統處理中,有時候需要發送郵件通知用戶,如新增用戶的郵件確認,密碼找回,以及常規訂閱消息、通知等內容處理,都可以通過郵件的方式進行處理。本篇隨筆介紹結合VUE+Element 前端,實現系統的郵件參數配置管理,以及基於郵件模板的方式進行郵件的發送。

1、郵件參數的配置管理

郵件參數一般需要配置如用戶名、密碼、郵件地址,顯示名稱,以及其他郵件所需的必要配置,一般我們可以通過界面管理的方式進行常規的參數配置,如下界面所示。

 其中的登錄密碼,現在一般是授權登錄密碼,而不是原始的賬號密碼了。以163為例,可以在設置中添加一個授權密碼。

 

前端參數的配置管理,我們構建一個Api類,用於調用ABP后端的Api接口,如下所示。

 

查看窗體中顯示郵件參數數據的代碼如下所示。

    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的依賴,如下所示。

然后在模塊的依賴上,添加對應的AbpMailkitModule的依賴即可。

一般來說,我們發送郵件,還需要重寫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的實現如下。

但是我們應用程序的設置信息,密碼是經過加密過的,因此需要重寫這個配置項,進行對應的密碼解密。

    /// <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中初始化中處理下對應的自定義發送和自定義配置項的處理類。

這樣默認注入的發送郵件的接口就正常了,我們接下來就是根據郵件的模板進行內容發送即可。

 

3、郵件模板的處理

一般的郵件模板,是一個獨立的文件方式,文件中定義一些預設的內容,然后實際處理的時候,替換這些變量即可。

郵件模板的內容替換,我喜歡用基於模板引擎的方式處理變量的替換,一般我用NVelocity來進行處理。

我在早期介紹過一些關於NVelocity的知識,需要可以參考:

使用NVelocity生成內容的幾種方式

強大的模板引擎開源軟件NVelocity》

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

使用NVelocity0.5實現服務器端頁面自動生成 》

例如,我在文本中定義一個連接:http://www.iqidi.com/h5/EmailValidate?callback=${callback} 其中${callback} 就是變量定義,可以在運行中進行變量替換的。

我們在Host項目中定義一些郵件文件模板,如下所示。

 

然后在使用的應用服務類中注入對應的郵件發送接口以供使用。

 

具體的郵件發送,就是讀取模板內容,進行替換變量,然后調用接口進行郵件的發送即可。

        /// <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 前端應用開發(1)--- 開發環境的准備工作

循序漸進VUE+Element 前端應用開發(2)--- Vuex中的API、Store和View的使用

循序漸進VUE+Element 前端應用開發(3)--- 動態菜單和路由的關聯處理

循序漸進VUE+Element 前端應用開發(4)--- 獲取后端數據及產品信息頁面的處理

循序漸進VUE+Element 前端應用開發(5)--- 表格列表頁面的查詢,列表展示和字段轉義處理

循序漸進VUE+Element 前端應用開發(6)--- 常規Element 界面組件的使用

循序漸進VUE+Element 前端應用開發(7)--- 介紹一些常規的JS處理函數

循序漸進VUE+Element 前端應用開發(8)--- 樹列表組件的使用

循序漸進VUE+Element 前端應用開發(9)--- 界面語言國際化的處理

循序漸進VUE+Element 前端應用開發(10)--- 基於vue-echarts處理各種圖表展示 

循序漸進VUE+Element 前端應用開發(11)--- 圖標的維護和使用

循序漸進VUE+Element 前端應用開發(12)--- 整合ABP框架的前端登錄處理

循序漸進VUE+Element 前端應用開發(13)--- 前端API接口的封裝處理

循序漸進VUE+Element 前端應用開發(14)--- 根據ABP后端接口實現前端界面展示

循序漸進VUE+Element 前端應用開發(15)--- 用戶管理模塊的處理

循序漸進VUE+Element 前端應用開發(16)--- 組織機構和角色管理模塊的處理 

循序漸進VUE+Element 前端應用開發(17)--- 菜單管理

循序漸進VUE+Element 前端應用開發(18)--- 功能點管理及權限控制  

VUE+Element 前端應用開發框架功能介紹 

循序漸進VUE+Element 前端應用開發(19)--- 后端查詢接口和Vue前端的整合

使用代碼生成工具快速生成基於ABP框架的Vue+Element的前端界面

循序漸進VUE+Element 前端應用開發(20)--- 使用組件封裝簡化界面代碼

循序漸進VUE+Element 前端應用開發(21)--- 省市區縣聯動處理的組件使用

循序漸進VUE+Element 前端應用開發(22)--- 簡化main.js處理代碼,抽取過濾器、全局界面函數、組件注冊等處理邏輯到不同的文件中

循序漸進VUE+Element 前端應用開發(23)--- 基於ABP實現前后端的附件上傳,圖片或者附件展示管理 

循序漸進VUE+Element 前端應用開發(24)--- 修改密碼的前端界面和ABP后端設置處理

循序漸進VUE+Element 前端應用開發(25)--- 各種界面組件的使用(1)

循序漸進VUE+Element 前端應用開發(26)--- 各種界面組件的使用(2)

電商商品數據庫的設計和功能界面的處理 

循序漸進VUE+Element 前端應用開發(27)--- 數據表的動態表單設計和數據存儲

循序漸進VUE+Element 前端應用開發(28)--- 附件內容的管理 

循序漸進VUE+Element 前端應用開發(29)--- 高級查詢條件的界面設計

部署基於.netcore5.0的ABP框架后台Api服務端,以及使用Nginx部署Vue+Element前端應用

循序漸進VUE+Element 前端應用開發(30)--- ABP后端和Vue+Element前端結合的分頁排序處理 

循序漸進VUE+Element 前端應用開發(31)--- 系統的日志管理,包括登錄日志、接口訪問日志、實體變化歷史日志

循序漸進VUE+Element 前端應用開發(32)--- 手機短信動態碼登陸處理 

循序漸進VUE+Element 前端應用開發(33)--- 郵件參數配置和模板郵件發送處理 

使用代碼生成工具快速開發ABP框架項目 

使用Vue-TreeSelect組件實現公司-部門-人員級聯下拉列表的處理 

使用Vue-TreeSelect組件的時候,用watch變量方式解決彈出編輯對話框界面無法觸發更新的問題 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM