整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
这个适合初学者的指南中，你将学习如何创建一个响应式电子邮件模板。你将跟随逐步说明以及代码片段设计一个在任何设备上都看起来很棒的电子邮件模板。
这个项目非常适合渴望掌握电子邮件设计基础的新手！
（本文视频讲解：java567.com）
时在我们的收件箱里面,经常会收到很多精美的HTML邮件,上面有文字,图片,图文并茂,点击图片按钮可以直接跳转到所要导流的页面,有的邮件下面还有Social的Logo,比如Facebook,twitter,点击按钮就会跳转所对应的页面。
比如上面截取了一些HTML的邮箱格式,这种HTML的EDM营销感觉非常的酷,比纯文本的邮件更有丰富多彩,也更能传达出更多的内容跟素材,也更吸引抓住用户的眼球。图片下面直接可以设置链接,也方便用户直接点击进入,避免二次流失。
今天就给大家介绍一款在线制作HTML邮件的工具,其实操作也是非常的简单,可以直接在网站内的系统模板修改，替换成自己的素材和链接,也可以自己去设置图文排版。
这款工具就是Topol,一款专门在线制作HTML邮件的工具,非常容易操作跟上手
网址为https://app.topol.io
刚开始制作时建议直接使用网址内的模板去替换自己产品的素材,文案跟链接,因为网址里面提供了几十套制作非常精美的HTML邮件,我们先来看看。
大家可以根据自己的喜爱,去选择喜欢的模板直接点击进去去后台编辑,替换自己的元素,接下来来看看如何替换跟编辑：
比如就以下面这个手环的HTML邮件为模板,因为上面的图文信息真的非常非常丰富,有产品图片,购买按钮,产品Slogan,产品功能介绍以及社媒链接等，展示元素非常充足。
打开后台页面是这样的,首先先熟悉下下方左侧红色方框内的意思,其实也都是非常好理解的, 就是我们想要在右侧HTML邮件模板中需要什么元素,直接把红色方框内的按钮拖过去,比如需要放置文案，就把TEXT按钮,拖过去,如果是放置图片,GIF或者视频,就把对应的按钮拖到需要放置的展示位置就可以。
Sturecture按钮就是你想要图片或者文案的格式,直接拖过去就可以,知道这些意思之后,接下来我们看看如何操作。
第一,先选择你想要排列的Structure,比如选择2个横排并列,直接拖2个并列的结构过去，如下所示：
第二,就是要思考你想要展示的元素是什么,是文案还是图片,把想要展示的形式直接拖到上图2个方框里面,比如我们选择图片
然后选择2个我们自己产品的图片放上去,如下图所示,为了节省时间,文案部分就不做修改,修改方式跟图片是一样的,只需要把图片的文案替换成我们自己的就可以。
然后图片下面有个Check whole collection按钮，可以删去这个按钮,也可以点击保留按钮,可以在按钮下面放上自己的产品链接以及显示在按钮上的文案, 还可以调整按钮显示的验收,尺寸大小,字体验收等等非常详细的信息,建议大家可以都去尝试下。
下面就是产品功能的一些展示,可以把下面的主要展示功能替换为自己产品的功能以及图片，文案等,操作方法跟上面那个一样。
接下来就是产品橱窗展示以及购物按钮添加,以及一些物流等相关信息,可以把下面的产品展示图片替换成自己的以及链接。
在接下来就是一些社交媒体的展示,直接点击下面的按钮然后在对应的社交媒体输入对应的链接,当用户点击的时候就会跳转到对应的页面。
加好这些之后,就可以预览下效果怎么样，可以Preview在PC跟移动端,哪里有不合适的可以直接调整下，如果觉得一切都ok的可以发送到自己的邮箱预览,尤其是导流的链接,点击下是否能跳转到所要导流的页面。
然后你的邮箱就会收到你自己亲手做的HTML精美的邮件,因为我这个主要做演示作用,有很多没有调整所以做的比较难看,大家可以好好设计一下,做出非常精美的HTML邮件,从而做好EDM营销，吸引用户点击邮箱,从而提高转化。
如果你的邮箱收到自己做的HTML邮件,检查之后没有问题,就可以转发给用户,可以是做B2C的用户，也可以是外贸B端用来发开发信的用户。
还有一个方法发送HTML邮件,就是比较复杂一些,做好HTML邮件之后点击保存按钮,然后获取HTML源代码，然后复制源代码去转换。
比如常见的QQ邮箱,网易邮箱都可以转化,以QQ邮箱为例,点击格式--然后复制粘贴HTML源代码--点击可视化编辑按钮就可以啦，如下图所示
Topol工具真的非常方便制作HTML图文并茂邮件,且操作方法也非常简单,功能也非常繁多,建议大家可以好好去研究下，做好EDM营销，不仅仅对B端,C端用户,对开发红人,联系海外科技媒体编辑同样适用。
这篇文章写的也比较简单,主要是讲一些重要的步骤,如何设计非常有吸引力的HTML需要小伙伴在下面好好去尝试下。
邮件服务是常用的服务之一，作用很多，对外可以给用户发送活动、营销广告等；对内可以发送系统监控报告与告警。
本文将介绍Springboot如何整合邮件服务，并给出不同邮件服务商的整合配置。
如图所示：
Springboot搭建
Springboot的搭建非常简单，我们使用 https://start.spring.io/来构建，十分方便，选择需要用到的模块，就能快速完成项目的搭建：
引入依赖
为了使用邮件服务，我们需要引入相关的依赖，对于Springboot加入下面的依赖即可：
<dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-mail</artifactId> </dependency>
配置文件
需要配置邮件服务提供商的相关参数，如服务地址、用户名及密码等。下面的例子是QQ的配置，其中密码并不是QQ密码，而是QQ授权码，后续我们再讲怎么获得。
Springboot的配置文件application.yml如下：
server: port: 8080 spring: profiles: active: qq --- spring: profiles: qq mail: host: smtp.qq.com username: xxx@qq.com password: xxx properties: mail: smtp: auth: true starttls: enable: true required: true --- spring: profiles: netEase mail: host: smtp.163.com username: xxx@163.com password: xxx properties: mail: smtp: auth: true starttls: enable: true required: true
实现发送服务
将JavaMailSender注入，组装Message后，就可以发送最简单的文本邮件了。
@Autowired
private JavaMailSender emailSender;
public void sendNormalText(String from, String to, String subject, String text) {
SimpleMailMessage message = new SimpleMailMessage();
message.setFrom(from);
message.setTo(to);
message.setSubject(subject);
message.setText(text);
emailSender.send(message);
}
调用接口
服务调用实现后，通过Controller对外暴露REST接口，具体代码如下：
@Value("${spring.mail.username}")
private String username;
@Autowired
private MailService mailService;
@GetMapping("/normalText")
public Mono<String> sendNormalText() {
mailService.sendNormalText(username, username,
"Springboot Mail(Normal Text)",
"This is a mail from Springboot!");
return Mono.just("sent");
}
把实现的MailService注入到Controller里，调用对应的方法即可。本次的邮件发送人和收件人都是同一个帐户，实际实现可以灵活配置。
通过Postman调用接口来测试一下能不能正常发送：
成功返回"sent"，并收到了邮件，测试通过。
简单文本邮件
简单文本邮件如何发送，刚刚已经讲解，不再赘述。
HTML邮件
纯文本虽然已经能满足很多需求，但很多时候也需要更加丰富的样式来提高邮件的表现力。这时HTML类型的邮件就非常有用。
Service代码如下：
public void sendHtml(String from, String to, String subject, String text) throws MessagingException {
MimeMessage message = emailSender.createMimeMessage();
MimeMessageHelper helper = new MimeMessageHelper(message, true);
helper.setFrom(from);
helper.setTo(to);
helper.setSubject(subject);
helper.setText(text, true);
emailSender.send(message);
}
与简单的文本不同的是，本次用到了MimeMessage和MimeMessageHelper，这是非常有用的类，后续我们经常会用到，组合使用能大大丰富邮件表现形式。
Controller的代码如下：
@GetMapping("/html")
public Mono<String> sendHtml() throws MessagingException {
mailService.sendHtml(username, username,
"Springboot Mail(HTML)",
"<h1>This is a mail from Springboot!</h1>");
return Mono.just("sent");
}
带附件邮件
邮件发送文件再正常不过，发送附件需要使用MimeMessageHelper.addAttachment(String attachmentFilename, InputStreamSource inputStreamSource)方法，第一个参数为附件名，第二参数为文件流资源。Service代码如下：
public void sendAttachment(String from, String to, String subject, String text, String filePath) throws MessagingException {
MimeMessage message = emailSender.createMimeMessage();
MimeMessageHelper helper = new MimeMessageHelper(message, true);
helper.setFrom(from);
helper.setTo(to);
helper.setSubject(subject);
helper.setText(text, true);
FileSystemResource file = new FileSystemResource(new File(filePath));
helper.addAttachment(filePath, file);
emailSender.send(message);
}
Controller代码如下：
@GetMapping("/attachment")
public Mono<String> sendAttachment() throws MessagingException {
mailService.sendAttachment(username, username,
"Springboot Mail(Attachment)",
"<h1>Please check the attachment!</h1>",
"/Pictures/postman.png");
return Mono.just("sent");
}
带静态资源邮件
我们访问的网页其实也是一个HTML，是可以带很多静态资源的，如图片、视频等。Service代码如下：
public void sendStaticResource(String from, String to, String subject, String text, String filePath, String contentId) throws MessagingException {
MimeMessage message = emailSender.createMimeMessage();
MimeMessageHelper helper = new MimeMessageHelper(message, true);
helper.setFrom(from);
helper.setTo(to);
helper.setSubject(subject);
helper.setText(text, true);
FileSystemResource file = new FileSystemResource(new File(filePath));
helper.addInline(contentId, file);
emailSender.send(message);
}
其中，contentId为HTML里静态资源的ID，需要对应好。
Controller代码如下：
@GetMapping("/inlinePicture")
public Mono<String> sendStaticResource() throws MessagingException {
mailService.sendStaticResource(username, username,
"Springboot Mail(Static Resource)",
"<html><body>With inline picture<img src='cid:picture' /></body></html>",
"/Pictures/postman.png",
"picture");
return Mono.just("sent");
}
模板邮件
Java的模板引擎很多，著名的有Freemarker、Thymeleaf、Velocity等，这不是本点的重点，所以只以Freemarker为例使用。
Service代码如下：
@Autowired
private FreeMarkerConfigurer freeMarkerConfigurer;
public void sendTemplateFreemarker(String from, String to, String subject, Map<String, Object> model, String templateFile) throws Exception {
MimeMessage message = emailSender.createMimeMessage();
MimeMessageHelper helper = new MimeMessageHelper(message, true);
helper.setFrom(from);
helper.setTo(to);
helper.setSubject(subject);
Template template = freeMarkerConfigurer.getConfiguration().getTemplate(templateFile);
String html = FreeMarkerTemplateUtils.processTemplateIntoString(template, model);
helper.setText(html, true);
emailSender.send(message);
}
注意需要注入FreeMarkerConfigurer，然后使用FreeMarkerTemplateUtils解析模板，返回String，就可以作为内容发送了。
Controller代码如下：
@GetMapping("/template")
public Mono<String> sendTemplateFreemarker() throws Exception {
Map<String, Object> model = new HashMap<>();
model.put("username", username);
model.put("templateType", "Freemarker");
mailService.sendTemplateFreemarker(username, username,
"Springboot Mail(Template)",
model,
"template.html");
return Mono.just("sent");
}
注意模板文件template.html要放在resources/templates/目录下面，这样才能找得到。
模板内容如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>Hello ${username}</h1>
<h1>This is a mail from Springboot using ${templateType}</h1>
</body>
</html>
其中${username}和${templateType}为需要替换的变量名，Freemarker提供了很多丰富的变量表达式，这里不展开讲了。
邮件服务的提供商很多，国内最常用的应该是QQ邮箱和网易163邮箱了。
集成QQ邮件需要有必备的账号，还要开通授权码。开通授权码后配置一下就可以使用了，官方的文档如下：
https://service.mail.qq.com/cgi-bin/help?subtype=1&&no=1001256&&id=28
需要注意的是，开通授权码是需要使用绑定的手机号发短信到特定号码的，如果没有绑定手机或者绑定手机不可用，那都会影响开通。
开通之后，授权码就要以作为密码配置到文件中。
163
网易的开通方式与QQ没有太大差别，具体的指导可以看如下官方文档：
http://help.mail.163.com/faqDetail.do?code=d7a5dc8471cd0c0e8b4b8f4f8e49998b374173cfe9171305fa1ce630d7f67ac2cda80145a1742516
同样也是需要绑定手机进行操作。
本次例子发送后收到邮件如图所示：
邮件功能强大，Springboot也非常容易整合。技术利器，善用而不滥用。
*请认真填写需求信息，我们会在24小时内与您取得联系。
