0%

Django发送HTML邮件

发表于 分类于
由于想给新生一些仪式感，所以委托了王老板写了一个HTML的页面，结果展示效果非常好，希望这个能给新生一种仪式感吧（PS：希望今年的院科协能蒸蒸日上吧）

Django发送HTML邮件

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
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

邮件发送的函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
#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的代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
<!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>
    <!--content starts-->
    <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"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;首先祝贺你正式成为计软网安院科协的一员，从加入院科协的那一刻开始，你将经历一段从没经历和感受过的奇妙旅程。我们希望未来的一年中你能在科协这个大家庭中结交志同道合的朋友，从科协牛人中获取经验，成为技术上的大牛，或者在科协活动的举办中锻炼自己的活动组织能力。我们更希望一年后的你能像我们一样在科协为未来的学弟学妹提供技术和学习上的帮助。
            <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;愿初来南邮的你，在未来的一年中能在计软网安院科协这片沃土上，施展自己的才华，活出自己的精彩。(๑•̀ㅂ•́)و✧</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端：

在这里插入图片描述

移动端：

在这里插入图片描述