Django发送HTML邮件

川长思鸟来 2022-01-22 08:49 243阅读 0赞

### Django发送HTML邮件 ###

--------------------

之前关于使用Django发送邮件已经写过一篇文章，不会在Django中发送邮件的话，可以先看这个[传送门][Link 1]

在这个基础上只需要稍加配置就可以有一个比较好看的HTML而不是单调几句话的页面，话不多说，直接上代码  
models.py的新生类

class NewStudent(models.Model):
        DEPARTMENT_CHOICE={ 
            ('3','技术部'),
            ('2','新媒体'),
            ('1','办公室'),
        }
    
        # unique=True 解决异步问题后将唯一性加上
        email = models.EmailField(default=None, blank=True, null=False, verbose_name='邮箱')
        name = models.CharField(max_length=50, default=None, blank=True, null=True, verbose_name='姓名')
        student_id = models.CharField(max_length=9, default=None, blank=True, null=False, verbose_name='学号')
        qq = models.CharField(max_length=11,null=False,verbose_name='QQ号')
        choice = models.CharField(max_length=10,choices=DEPARTMENT_CHOICE,default=0,null=False,verbose_name='部门')
        code = models.CharField(max_length=20,default=None, verbose_name="邮箱验证码")
        is_success = models.BooleanField(default=False,verbose_name='邮箱已验证')
        register_time = models.DateTimeField(auto_now_add=True,verbose_name='注册时间')
    
    
        class Meta:
            verbose_name = u"新生信息"
            verbose_name_plural = verbose_name

邮件发送的函数

#new_student是前端传过来的新生信息
    #EmailMultiAlternatives是邮件信息相关的model，邮件发送的博文中有描述
    def save_studentinfo(request, new_student):
        code = random_str(16)
        new_student.code = code
        active_url = str(EMAIL_ACTIVE_URL) + str(code)
        context = { 
            'student_id' : str(new_student.student_id),
            'name' : str(new_student.name),
            'active_url' : str(active_url),
        }
        # 发送的html模板的名称
        email_template_name = 'email_template.html'
        t = loader.get_template(email_template_name)
        html_content = t.render(context)
        msg = EmailMultiAlternatives(EMAIL_TITLE, html_content, DEFAULT_FROM_EMAIL, [new_student.email])
        msg.attach_alternative(html_content, "text/html")
        msg.send()

下面是email\_template.html的代码

<!DOCTYPE html>
    <html>
    <meta charset="UTF-8">
    
    <head>
        <title>Vinta</title>
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2 user-scalable = yes">
        <style> html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } body { line-height: 1; } body { background: #424242; /* 标准的语法 */ font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, serif; font-size: 14px; font-weight: 400; line-height: 1.5em; } h1, h2, h3, h4 { font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, serif; color: #000000; font-style: normal; line-height: 1em; } h1 { font-size: 18px; text-transform: uppercase; font-weight: 700; margin-bottom: 15px; } h2 { font-size: 16px; font-weight: 700; margin-top: 20px; margin-bottom: 5px; } h3 { font-size: 15px; color: #5e5e5e; font-style: italic; } h4 { font-size: 16px; font-style: italic; font-weight: 400; margin-bottom: 0px; position: absolute; top: -7px; width: 130px; margin-left: -65px; left: 50%; } #wrapper { width: 940px; margin: 0 auto; } .logo { width: 276px; height: 58px; padding: 40px 0px; margin: 0 auto; } /*----- main content of page -----*/ #content { background:#ffffff; width: 620px; padding: 40px 160px; float: left; box-shadow: 0px 1px 2px 0px #000000; -moz-box-shadow: 0px 1px 2px 0px #000000; -webkit-box-shadow: 0px 1px 2px 0px #000000; text-align: left; } .launch { font-size: 2em; font-weight: bolder; width: 402px; height: 108px; margin: 0 auto; } </style>
    </head>
    <body>
    <div id="wrapper">
        <div class="logo"></div>
        
        <div id="content">
            <div class="launch"><img src="http://pd2qkcgty.bkt.clouddn.com/logo.png" height="70" width="auto" style="position: relative;left: -80%;top: -40%"/><br>致学弟学妹的一封信</div>
            <br>
            <br>
            <hr>
    
            <h1> {
       { student_id }}{
       { name }}同学你好：</h1>
            <h2 style="line-height: 30px">        首先祝贺你正式成为计软网安院科协的一员，从加入院科协的那一刻开始，你将经历一段从没经历和感受过的奇妙旅程。我们希望未来的一年中你能在科协这个大家庭中结交志同道合的朋友，从科协牛人中获取经验，成为技术上的大牛，或者在科协活动的举办中锻炼自己的活动组织能力。我们更希望一年后的你能像我们一样在科协为未来的学弟学妹提供技术和学习上的帮助。
                <br>       愿初来南邮的你，在未来的一年中能在计软网安院科协这片沃土上，施展自己的才华，活出自己的精彩。(๑•̀ㅂ•́)و✧</h2>
            <br>
            <br>
            <a href="{ { active_url }}">
                <button style="width: 620px;border-radius: 3px;background: #3498db;border: 4px;height: 35px;border: #2e6da4;color: white;font-family: 宋体;font-weight: bolder">
                    点击完成验证
                </button>
            </a>
            <br>
            <br>
            <br>
            <hr>
                <div style="width: 80%;height:100%;float: left">
                    <p style="position: relative;width: 450px;">
                        加入科协，你需要什么？<br>
                        你需要的是 Interest——兴趣 Passion——激情 Perseverance——毅力
                        世界本没路，走的人多了就有了路，没有谁天生就会，一切都是通过不断学习获得。从零开始，你将在这里慢慢成长。在这里你将会获得毕生的朋友，因为你们志同道合。</p>
                </div>
                <div style="width: 20%;float: left;height: 100%">
                    <img src="http://pd2qkcgty.bkt.clouddn.com/sacc_QR_Code.png" alt="微信二维码" id="img-left" style="width: 110px;height: 110px">
                </div>
                <hr>
                <p style="text-align: right">南京邮电大学计软网安院科协<br>
                    njupt.sacc@outlook.com</p>
            <br>
                <p style="text-align: center">sacc期待你的加入</p>
        </div>
    </div>
    </body>
    </html>

最后展示一下效果:  
PC端：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4NTQyMDg1_size_16_color_FFFFFF_t_70]

移动端：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4NTQyMDg1_size_16_color_FFFFFF_t_70 1]

[Link 1]: http://suiwo.xyz/2018/03/16/Django%E9%9B%86%E6%88%90%E9%82%AE%E4%BB%B6%E5%8F%91%E9%80%81%E5%8A%9F%E8%83%BD/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4NTQyMDg1_size_16_color_FFFFFF_t_70]: /images/20220122/e41fc874449242f8bf61ccd2908c946a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4NTQyMDg1_size_16_color_FFFFFF_t_70 1]: /images/20220122/39a25d640c0148c8b3fc2f7be08879e4.png