SpringBoot邮件服务（三）：模板与可视化

这是我参与2022首次更文挑战的第5天，活动详情查看：2022首次更文挑战」

关于SpringBoot的邮件服务功能，我们已经实现了在代码中发送简单邮件和携带附件的自定义格式邮件。在开发界，后端语言不好的地方就在于不够直观，不能直接可视的看到程序效果，今天我们就结合SpringBoot的Thymeleaf模板引擎实现一个简单的邮件发送的可视化界面。

文章涉及到SpringBoot框架的邮箱服务和Thymeleaf使用，相关功能的使用介绍可以查看此前文章：

1. 环境准备

1.1 邮件服务

SpringBoot邮件服务的搭建流程为：

引入邮件服务依赖
配置邮件发送邮箱服务器、账户、密码等信息
使用SpringBoot内置javaMailSender工具实现邮件发送方法

1.2 Thymeleaf环境

Thymeleaf的使用流程可以简单概括为：

引入Thymeleaf依赖信息
配置文件中设置Thymeleaf基础属性
resource/templates下定义Thymeleaf使用的html文件
定义接口服务指向Thymeleaf模板文件，并将属性数据传参
Thymeleaf文件中使用相关语法展示后端传参内容

2. 模板邮件实现

2.1 Thymeleaf

定义邮件模板首先使用Thymeleaf定义一个静态的html文件，并利用Thymeleaf与服务接口变量的绑定特性，动态的改变邮件模板中的参数内容。如定义一个html邮件模板文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <P>您好,这是一封模板邮件,请点击下面的链接跳转到指定路径</P>
    <a href="#" th:href="@{${url}}">激活账号</a>
</body>
</html>

其中th:href="@{${url}}"是利用了Thymeleaf模板引擎的特性，获取服务返回的参数信息，并展示到html页面中。

2.1 TemplateEngine

为了使用定义的邮件模板，并将整个html文件内容作为html的格式邮件发送，这时就需要用到 org.thymeleaf.TemplateEngine包中的TemplateEngine类。可以按照如下方式获取模板文件中的html内容，并填充内容：

@Autowired
private TemplateEngine templateEngine;

@Test
public void testMailTemplate(){
    log.info("测试模板邮件发送功能 => ");
    Context context = new Context();
    context.setVariable("url", "http://www.baidu.com");
    String html = templateEngine.process("mailTemplate", context);
    log.info("发送内容：{}",html);
    emailService.sendHTMLStyleMail("15554009148@163.com","模板邮件",html);
}

使用时需要注意：

TemplateEngine需要注入而不能使用new TemplateEngine()创建新实例，因为创建的新实例没有和TemplateResolver关联，使用process()方法读取文件时只显示文件名而不能解析文件内容。
Context类是org.thymeleaf.context.Context;包中的类，用来对模板内容中的占位符设置对应的值。此外，执行程序可能会报错显示java.lang.ClassNotFoundException: ognl.PropertyAccessor，此时需要引入相关的ognl依赖信息。

<!--ognl-->
<dependency>
    <groupId>ognl</groupId>
    <artifactId>ognl</artifactId>
    <version>3.1.12</version>
</dependency>

2.3 解析模板

最后，执行单元测试，程序执行完成后发送邮件，并以HTML格式解析邮件内容。

3. 邮件功能可视化

3.1 HTML页面

邮件发送界面的可视化实现依然是使用Thymeleaf，定义的html内容为：

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<form id="mailForm" action = "/sendMailSubmit" enctype="multipart/form-data" th:object="${mailVo}" method="post">
    <div >
        <label >收信人:</label>
        <div>
            <input id="to" name="to" title="多个邮箱使用,隔开" th:field="*{to}">
        </div>
    </div>
    <div>
        <label>邮件主题:</label>
        <div>
            <input id="subject" name="subject" th:field="*{subject}">
        </div>
    </div>
    <div>
        <label>邮件内容:</label>
        <div>
            <textarea id="text1" name="text" rows="5" th:field="*{content}"></textarea>
        </div>
    </div>
    <div >
        <label>邮件附件:</label>
        <div>
            <input id="files" name="files" type="file" multiple="multiple">
        </div>
    </div>
    <div>
        <label>邮件操作:</label>
        <div>
            <input type="submit" />
        </div>
    </div>
</form>

</body>
</html>

其中，需要注意的内容有：

form表单设置enctype="multipart/form-data"表示使用表单提交文件数据
thymeleaf中提交数据到后端服务采用
- th:object="${mailVo}"定义对象名
- 在对应的文本框中定义th:field="*{content}"绑定对象属性名
submit按钮提交表单时后端服务可以根据对象+属性名获取到文本数据

得到可视化的邮件页面

3.2 后端服务

后端定义接收表单数据的服务，此处直接将代码放在了Controller层。

/**
 * 发送邮件
 */
@PostMapping("/sendMailSubmit")
public String sendMail(MailVo mailVo, MultipartFile[] files){
    log.info("可视化页面获取内容发送邮件");
    MimeMessage mimeMessage = javaMailSender.createMimeMessage();
    try {
        MimeMessageHelper messageHelper = new MimeMessageHelper(mimeMessage,true);
        messageHelper.setFrom(fromEmail);
        messageHelper.setTo(mailVo.getTo());
        messageHelper.setSubject(mailVo.getSubject());
        messageHelper.setText(mailVo.getContent(),true);

        if(files != null){
            //添加本地文件作为邮件附件，可以重复添加多个文件附件
            for (MultipartFile file : files) {
                messageHelper.addAttachment(file.getOriginalFilename(), file);
            }
        }
        javaMailSender.send(mimeMessage);
        log.info("邮件发送完成！");
    } catch (MessagingException e) {
        log.info("邮件发送失败，错误信息：{}",e);
    }
}

获取前端Thymeleaf传入数据时，对于传入文件和文本数据分别处理，并调用邮件功能完成发送。

3.3 邮件发送成功

邮箱收到邮件信息

至此，一个简单的邮箱发送可视化页面开发完成。