[前端必看，后端福利❤]如何创建美观的邮件模板并通过qq邮箱的SMTP服务向用户发送

最近在写注册功能的自动发送邮箱告知验证码的功能，无奈根本没有学过前端，只有写Qt的qss基础，只好借助网页设计自己想要的邮箱格式，最终效果如下:

也推销一下自己的项目ShaderLab，可运行ShaderToy上的大部分着色器代码，有学图形学的伙伴们可以关注下，学前端的伙伴们有意向WebGL发展的也可以关注下:)

近期开发进度及效果在这个链接

如何通过模板创建美观的邮件格式

这里推荐使邮箱设计神器CampainMonitor  （这网站一看就是设计网站）

注册登录后进入OverView界面，点击Create按钮就可创建模板

点击创建邮箱设计

输入计划主题后点击设计邮箱按钮，并且选择模板进行设计

点击主题选择CampainMonitor提供的丰富的设计模板进行设计

 

选择一个就可以进行在线设计了

设计完成后返回OverView界面，点击这个放大镜按钮

点击打印

进入到纯html展示界面，右击——>另存为html，选择最后面的网页，全部

可以看到已经下载成功了，纯html代码52KB

这个良心网站还帮你保存上传的设计图片，所以不用担心转为html后再打开图片失效的问题！！

如何通过脚本发送邮件到指定邮箱

首先要了解SMTP协议内容的相关知识，网上有很多博客，就不赘述了，具体参考这篇博客

首先我们要先开通QQ邮箱的SMTP服务，让QQ邮箱作为我们邮件发送的"中转站"，参考该文

另外可以注册Foxmail，对QQ邮箱STMP服务的端口和发送协议进行配置,开启SMTP服务并且取得授权码后就可以通过socket通信让发件服务器对我们的邮件进行转发

我们使用python实现socket通信作为邮件发送脚本，本来想用C++/libcurl，发现libcurl的默认附件上传大小限制在16K，后来考虑C++纯socket实现，又是一堆坑。偶然发现一段python代码管用，果断加入python大军。

将设计好的html邮件命名为email_template.html和python脚本放在一个目录下，并运行如下代码，

注意替换你自己的用户名和授权码。

# SMTPClient.py
from socket import *
import base64

msg = open("email_template.html",'r',encoding='UTF-8').read()
endMsg = "\r\n.\r\n"
# 选择一个邮件服务
mailServer = "smtp.qq.com"
# 发送方地址和接收方地址，from 和 to
fromAddress = "[email protected]"
toAddress = "[email protected]"
# 发送方，验证信息，由于邮箱输入信息会使用base64编码，因此需要进行编码
username = str(base64.b64encode(b"xxxx"),encoding='UTF-8') # 输入自己的用户名对应的编码
password = str(base64.b64encode(b"xxxx"),encoding='UTF-8')  # 此处不是自己的密码，而是开启SMTP服务时对应的授权码

# 创建客户端套接字并建立连接
serverPort = 587  # SMTP使用587号端口
clientSocket = socket(AF_INET, SOCK_STREAM)
clientSocket.connect((mailServer, serverPort))  # connect只能接收一个参数
# 从客户套接字中接收信息
recv = clientSocket.recv(1024).decode()
print(recv)
if '220' != recv[:3]:
    print('220 reply not received from server.')

# 发送 HELO 命令并且打印服务端回复
# 开始与服务器的交互，服务器将返回状态码250,说明请求动作正确完成
heloCommand = 'HELO MSG\r\n'
clientSocket.send(heloCommand.encode())  # 随时注意对信息编码和解码
recv1 = clientSocket.recv(1024).decode()
print(recv1)
if '250' != recv1[:3]:
    print('250 reply not received from server.')

# 发送"AUTH LOGIN"命令，验证身份.服务器将返回状态码334（服务器等待用户输入验证信息）
clientSocket.sendall('AUTH LOGIN\r\n'.encode())
recv2 = clientSocket.recv(1024).decode()
print(recv2)
if '334' != recv2[:3]:
    print('334 reply not received from server.')

# 发送验证信息
clientSocket.sendall((username + '\r\n').encode())
recvName = clientSocket.recv(1024).decode()
print(recvName)
if '334' != recvName[:3]:
    print('334 reply not received from server')

clientSocket.sendall((password + '\r\n').encode())
recvPass = clientSocket.recv(1024).decode()
print(recvPass)
# 如果用户验证成功，服务器将返回状态码235
if '235' != recvPass[:3]:
    print('235 reply not received from server')

# TCP连接建立好之后，通过用户验证就可以开始发送邮件。邮件的传送从MAIL命令开始，MAIL命令后面附上发件人的地址。
# 发送 MAIL FROM 命令，并包含发件人邮箱地址
clientSocket.sendall(('MAIL FROM: <' + fromAddress + '>\r\n').encode())
recvFrom = clientSocket.recv(1024).decode()
print(recvFrom)
if '250' != recvFrom[:3]:
    print('250 reply not received from server')

# 接着SMTP客户端发送一个或多个RCPT (收件人recipient的缩写)命令，格式为RCPT TO: <收件人地址>。
# 发送 RCPT TO 命令，并包含收件人邮箱地址，返回状态码 250
clientSocket.sendall(('RCPT TO: <' + toAddress + '>\r\n').encode())
recvTo = clientSocket.recv(1024).decode()  # 注意UDP使用sendto，recvfrom
print(recvTo)
if '250' != recvTo[:3]:
    print('250 reply not received from server')

# 发送 DATA 命令，表示即将发送邮件内容。服务器将返回状态码354（开始邮件输入，以"."结束）
clientSocket.send('DATA\r\n'.encode())
recvData = clientSocket.recv(1024).decode()
print(recvData)
if '354' != recvData[:3]:
    print('354 reply not received from server')

# 编辑邮件信息，发送数据
subject = "ShaderLab Regstration"
contentType = "text/html"

message = 'from:' + fromAddress + '\r\n'
message += 'to:' + toAddress + '\r\n'
message += 'subject:' + subject + '\r\n'
message += 'Content-Type:' + contentType + '\t\n'
message += '\r\n' + msg
clientSocket.sendall(message.encode())

# 以"."结束。请求成功返回 250
clientSocket.sendall(endMsg.encode())
recvEnd = clientSocket.recv(1024).decode()
print(recvEnd)
if '250' != recvEnd[:3]:
    print('250 reply not received from server')

# 发送"QUIT"命令，断开和邮件服务器的连接
clientSocket.sendall('QUIT\r\n'.encode())

clientSocket.close()

可以看到邮件已经成功转发：