在系統處理中,有時候需要發送郵件通知用戶,如新增用戶的郵件確認,密碼找回,以及常規訂閱消息、通知等內容處理,都可以通過郵件的方式進行處理。本篇隨筆介紹結合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的知識,需要可以參考:
例如,我在文本中定義一個連接: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 前端應用開發(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)--- 郵件參數配置和模板郵件發送處理
使用Vue-TreeSelect組件實現公司-部門-人員級聯下拉列表的處理
使用Vue-TreeSelect組件的時候,用watch變量方式解決彈出編輯對話框界面無法觸發更新的問題