JAVA后台中实现发送测试报告邮件

JAVA后台中实现发送测试报告邮件

需求是java后台（Springboot写的）从MySQL数据库读取当前的测试报告信息，例如，testPlanName、runTime等，实现一个发送邮件到指定的邮箱的功能。由于邮件的阅读工具主要使用outlook(你懂的)，所以太复杂的渲染方式（例如：js）实现不了，因此采用最古老的编写网页的方式去写邮件模板；还要兼顾手机端显示的情况，因此采用了一个自适应css。

邮件模板引擎

采用Velocity模板渲染邮件，需要写一个.vm文件，vm格式支持html+css格式，具体文件已经上传到github：myTemplate

1. 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

2. 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;
    }

3. 调用 org.springframework.mail.javamail 实现邮件发送

MimeMessageHelper message = new MimeMessageHelper(mimeMessage, "utf-8"); // 设置utf-8防止出现乱码
//中间关于数据处理的部分省略；
message.setText(VelocityEngineUtils.mergeTemplateIntoString(velocityEngine, "myTemplate.vm", "utf-8", model), true);

效果展示

1. 手机端

   目测手机端看起来还可以~
   自适应效果还挺8错滴嘛~

2. outlook PC端
   

小结

其实模板语言非常简单，主要是数据处理的部分比较复杂，可以建个HashMap，用key-value的方式把具体信息放进去，然后用Velocity生成这个邮件。这里主要是在后台里写了一个接口，用postman调试过后一切功能正常。