MarsMgn

外观

邮箱管理 ​

使用说明 ​

主界面 ​

消息中心——邮箱管理，包括三部分：

  • 邮箱账号
  • 邮件模板
  • 邮件记录

邮箱账号 ​

image-20250621112338203

以QQ邮箱为例，填写方法如下

image-20250621104141774

登录QQ邮箱——设置——账号，开通POP3/SMTP服务

image-20250621104442985

邮件模板 ​

测试：点击测试，填写收件邮箱和相关参数，触发异步邮件发送。可以在邮件记录中查看发送结果。

image-20250621104628728

新增邮件模板

  • 模板内容：需要变化的内容，放在{}里面
  • 邮箱账号：关联上一步设置的邮箱账号，表示这封邮件，默认由该邮箱发出

image-20250621113953878

TIP

一个邮箱账号可以关联多个邮件模板，被关联的邮箱账号不能删除。

邮件记录 ​

点击详情：能看到邮件内容、发送状态和具体异常信息。

image-20250621114625808

后端实现 ​

目录 ​

代码目录：

  • mysite\myapp_system\mail_account：邮箱账号
  • mysite\myapp_system\mail_template：邮件模板
  • mysite\myapp_system\mail_log：邮件记录

实现原理 ​

文件mysite\myapp_system\tasks.py中，定义了底层Celery发送邮件任务。

image-20250621145652218

文件mysite\myapp_system\mail_template\services.py的send_single_mail方法，对Celery发送邮件任务进行了封装。生成邮件日志，同时使用Celery异步发送邮件。

image-20250621145815242

在视图中实现邮件发送示例：mysite\myapp_system\mail_template\views.py

image-20250621150007875

TIP

邮件发送依赖Celery服务，请确保Celery状态正常

前端实现 ​

目录 ​

代码目录：src\views\system\mail

sh
mail
├── account # 邮箱账号
│   ├── MailAccountDetail.vue
│   ├── MailAccountForm.vue
│   ├── account.data.ts
│   └── index.vue
├── log # 邮件记录
│   ├── MailLogDetail.vue
│   ├── index.vue
│   └── log.data.ts
└── template # 邮件模板
    ├── MailTemplateForm.vue
    ├── MailTemplateSendForm.vue
    ├── index.vue
    └── template.data.ts