JAVA后端实现发送html邮件
JAVA后台中实现发送测试报告邮件
需求是java后台(Springboot写的)从MySQL数据库读取当前的测试报告信息,例如,testPlanName、runTime等,实现一个发送邮件到指定的邮箱的功能。由于邮件的阅读工具主要使用outlook(你懂的),所以太复杂的渲染方式(例如:js)实现不了,因此采用最古老的编写网页的方式去写邮件模板;还要兼顾手机端显示的情况,因此采用了一个自适应css。
邮件模板引擎
采用Velocity模板渲染邮件,需要写一个.vm文件,vm格式支持html+css格式,具体文件已经上传到github:myTemplate
- vm模板特有的格式
vm模板支持#if/#else/#end
语句;循环的话,使用一组#foreach(xx in xx)/#end
,xx是你java代码中对应的变量;注意:所有语句结尾要加#end
!!!不然没法识别!!!
#foreach($result in $myReports)
<tr>
<td data-label="TestCaseID">$!{result.id}</td>
<td data-label="TestCaseName">$!{result.name}</td>
#if($!{result.failNum}>0)
<td data-label="Pass/Fail" style="color:#FF0000;">$!{result.pass}/$!{result.fail}</td>
#else
<td data-label="Pass/Fail">$!{result.pass}/$!{result.fail}</td>
#end
</tr>
#end
- CSS自适应样式
主要是为了方便手机查看表格的样式,重点是@media screen and (max-width: 600px)
下面的部分,实现了手机上的自适应。
.mytable {
border: 1px solid #ccc;
width: 100%;
margin:0;
padding:0;
border-collapse: collapse;
border-spacing: 0;
margin: 0 auto;
}
.mytable tr {
/* border: 1px solid #000;*/
padding: 5px;
text-align: left;
}
.mytable td {
border: 1px solid #000;
padding: 10px;
text-align: left;
}
.mytable th{
border: 1px solid #000;
padding: 10px;
text-align: left;
text-transform: uppercase;
font-size: 14px;
letter-spacing: 1px;
}
@media screen and (max-width: 600px) {
.mytable {
border: 0;
}
.mytable thead {
display: none;
}
.mytable tr {
margin-bottom: 10px;
display: block;
border-bottom: 1px dotted #000;
}
.mytable td {
display: block;
text-align: right;
font-size: 13px;
border-bottom: 1px dotted #000;
}
.mytable td:last-child {
border-bottom: 1px solid #000;
}
.mytable td:before {
content: attr(data-label);
float: left;
text-transform: uppercase;
font-weight: bold;
}
- 调用 org.springframework.mail.javamail 实现邮件发送
MimeMessageHelper message = new MimeMessageHelper(mimeMessage, "utf-8"); // 设置utf-8防止出现乱码
//中间关于数据处理的部分省略;
message.setText(VelocityEngineUtils.mergeTemplateIntoString(velocityEngine, "myTemplate.vm", "utf-8", model), true);
效果展示
-
手机端
目测手机端看起来还可以~
自适应效果还挺8错滴嘛~ -
outlook PC端
小结
其实模板语言非常简单,主要是数据处理的部分比较复杂,可以建个HashMap,用key-value的方式把具体信息放进去,然后用Velocity生成这个邮件。这里主要是在后台里写了一个接口,用postman调试过后一切功能正常。