邮件管理：模块功能需求文档
一、发纯文本邮件
1.首页界面要有链接跳转到邮件管理界面，用户还可以返回首页。
2. 用户可以随意配置目标邮箱地址。
3. 用户可以随意编写文本内容，文本内容不超过200字。
4. 用户可以邮件管理页面选择任意功能进行发送邮件。
5. 点击发送按钮
二、发附件邮件（随意选本地的附件、中文名不能乱码）
- 用户可以随意配置目标邮箱地址。
- 用户可以随意选本地电脑的附件发送。
- 用户可以邮件管理页面选择任意功能进行发送邮件。
- 点击发送按钮
三、发图片邮件（随意选本地的图片、中文名不能乱码）
- 用户可以随意选本地的图片发送。
- 随意发送到指定邮箱
- 用户可以邮件管理页面选择任意功能进行发送邮件。
- 点击发送按钮
四、发模版邮件
- 用户可以选择一个已存在的模板发送邮件。
- 随意发送到指定邮箱
- 用户可以邮件管理页面选择任意功能进行发送邮件。
- 点击发送按钮
五、定时发送邮件（比如：每日中午12点调用邮件发送任务发送邮件）
- 用户可以设置定时发送邮件的时间。
- 在设定的时间到达时，自动调用邮件发送任务发送邮件。
- 随意发送到指定邮箱
- 用户可以邮件管理页面选择任意功能进行发送邮件。
- 点击发送按钮
邮件管理页面代码如下：
<!--邮件功能主页-->
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>邮件管理</title>
<link href="/user/css/emailTemplate.css" rel="stylesheet">
<script th:src="@{/assets/js/jquery.min.js}"></script>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
}
header {
background-color: #333;
color: #fff;
padding: 10px;
text-align: center;
}
h1 {
text-align: center;
}
.btn-panel{
list-style-type: none;
padding: 0;
margin: 0;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
}
button {
display: inline-block;
margin: 10px;
padding: 10px;
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
button.selected{
background-color: #0066ff;
}
</style>
<script>
function show(c){
location.href='index?page='+c;
}
function val(id){
return trim($('#'+id).val());
}
function trim(str) {
return str.replace(/(^\s*)|(\s*$)/g, '');
}
function isEmail(v){
let reg = /^[a-zA-Z0-9]+([-_.][A-Za-zd]+)*@([a-zA-Z0-9]+[-.])+[A-Za-zd]{2,5}$/
return reg.test(v);
}
window.onload=function(){
let message='[[${message}]]';
if(message!='')
alert(message);
}
</script>
</head>
<body>
<header>
<h1>邮箱界面</h1>
</header>
<div class="btn-panel">
<button onclick="show(1)" th:class="${page=='1'?'selected':''}">发纯文本邮件</button>
<button onclick="show(2)" th:class="${page=='2'?'selected':''}">发附件邮件</button>
<button onclick="show(3)" th:class="${page=='3'?'selected':''}">发图片邮件</button>
<button onclick="show(4)" th:class="${page=='4'?'selected':''}">发模板邮件</button>
<button onclick="show(5)" th:class="${page=='5'?'selected':''}">发定时邮件</button>
</div>
<div class="page-content" th:switch="${page}">
<th:block th:case="'1'" th:include="client/email/text"></th:block>
<th:block th:case="'2'" th:include="client/email/attach"></th:block>
<th:block th:case="'3'" th:include="client/email/image"></th:block>
<th:block th:case="'4'" th:include="client/email/template"></th:block>
<th:block th:case="'5'" th:include="client/email/schedule"></th:block>
<th:block th:case="*">
<div style="text-align: center;padding:20px;">请选择功能</div>
</th:block>
</div>
<a href="/"><input type="button" value="返回首页"></a>
</body>
</html>
邮件管理界面的效果图如下：
创建一个css文件及内容如下：
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
h2 {
color: #333;
text-align: center;
}
form {
width: 50%;
margin: 0 auto;
padding: 20px;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 5px;
}
input[type="text"], textarea {
width: 100%;
padding: 5px;
border: 1px solid #ccc;
border-radius: 3px;
}
button {
display: block;
width: 100%;
margin-top: 10px;
padding: 5px 10px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 3px;
cursor: pointer;
}
发纯文本邮箱方法类代码如下：
//发送纯文本
@PostMapping("/sendText")
private String sendTextEmail(@RequestParam("to") String to,
@RequestParam("subject") String subject,
@RequestParam("content") String content,
HttpServletRequest request) {
SimpleMailMessage mailMessage = new SimpleMailMessage();
mailMessage.setFrom(emailfrom);
mailMessage.setTo(to);
mailMessage.setSubject(subject);
mailMessage.setText(content);
String message=null;
try {
//发送邮件
mailSender.send(mailMessage);
message="纯文本邮件发送成功";
} catch (MailException e) {
message="纯文本邮件发送失败 " + e.getMessage();
System.out.println(message);
e.printStackTrace();
}
request.setAttribute("message",message);
return index(request);
}
标题纯文本前端代码如下：
<!--纯文本邮件-->
<script>
function checkform(){
let address=val('to');
if(address==''){
alert('请输入邮箱地址');
return false;
}
if(!isEmail(address)){
alert('邮箱格式不正确');
return false;
}
if(val('subject')==''){
alert('邮件主题不能为空');
return false;
}
let content=val('content');
if(content==''){
alert('请输入文本内容');
return false;
}
if(content.length>200){
alert('文本内容不能超过200个字');
return false;
}
return true;
}
</script>
<form method="post" th:action="@{/email/sendText}" onsubmit="return checkform();">
<input type="hidden" name="page" value="1"/>
<div>
<label for="to">邮箱地址（收件人）：</label>
<input id="to" name="to" type="text">
</div>
<div>
<label for="subject">邮件主题：</label>
<input id="subject" name="subject" type="text">
</div>
<div>
<label for="content">邮件内容：</label>
<textarea cols="50" name="content" id="content" rows="10"></textarea>
</div>
<button type="submit">发送邮件</button>
</form>
纯文本效果图如下：
发附件邮件方法类代码如下：
//发送上传附件
@PostMapping("sendAttachment")
public String sendAttachment(@RequestParam("file") MultipartFile file, HttpServletRequest request) throws MessagingException {
String dirName="D:\\file\\";
String fileName = file.getOriginalFilename();
File uploadDir = new File(dirName);
if (!uploadDir.exists())
uploadDir.mkdirs();
String path = dirName + fileName;
// 新建一个文件
File tempFile = new File(path);
try {
// 将上传的文件写入新建的文件中
file.transferTo(tempFile);
} catch (Exception e) {
request.setAttribute("message","上传文件存储失败 "+e.getMessage());
e.printStackTrace();
}
//-------发送邮件附件
MimeMessage message=mailSender.createMimeMessage();
MimeMessageHelper helper = new MimeMessageHelper(message, true,"UTF-8");
helper.setFrom(emailfrom);
helper.setTo(request.getParameter("to"));
helper.setSubject(request.getParameter("subject"));
helper.setText("");
helper.addAttachment(fileName,tempFile);
String result;
try {
//发送邮件
mailSender.send(message);
result="附件邮件发送成功";
} catch (MailException e) {
result="附件邮件发送失败 " + e.getMessage();
System.out.println(result);
e.printStackTrace();
}
request.setAttribute("message",result);
return index(request);
}
附件前端代码如下：
<!--附件邮件-->
<script>
let filesize=-1;
let maxsize=10*1024*1024;//最大文件大小 10M
function checkform(){
console.log('1111');
let address=val('to');
if(address==''){
alert('请输入邮箱地址');
return false;
}
if(!isEmail(address)){
alert('邮箱格式不正确');
return false;
}
if(val('subject')==''){
alert('邮件主题不能为空');
return false;
}
let file=$('#file')[0];
if(file.value==''||filesize==-1){
alert('请选择一个附件');
return false;
}
//获取文件扩展名
let ext=file.value;
ext=ext.lastIndexOf('.')<0?ext:(ext.substring(ext.lastIndexOf('.')+1));
ext=ext.toLowerCase();
if(ext!='txt' && ext!='doc' && ext!='pptx')
{
alert('请选择正确的附件类型，比如：.text、.doc、.pptx');
return false;
}
if(filesize>maxsize){
alert('附件大小不能超过10M');
return false;
}
return true;
}
//获取上传文件大小
function filechange(e){
filesize=e.target.files[0].size;
}
</script>
<form method="post" th:action="@{/email/sendAttachment}" onsubmit="return checkform();" enctype="multipart/form-data">
<input type="hidden" name="page" value="2"/>
<div>
<label for="to">邮箱地址（收件人）：</label>
<input id="to" name="to" type="text">
</div>
<div>
<label for="subject">邮件主题：</label>
<input id="subject" name="subject" type="text">
</div>
<div>
<label for="content">附件：</label>
<input id="file" name="file" type="file" onchange="filechange(event)">
</div>
<button type="submit">发送邮件</button>
</form>
附件前端效果图如下：
发图片邮件方法类代码如下：
//发送图片
@PostMapping("sendImage")
public String sendImage(@RequestParam("file") MultipartFile file, HttpServletRequest request) throws MessagingException {
String dirName="D:\\file\\tupan\\";
String fileName = file.getOriginalFilename();
File uploadDir = new File(dirName);
if (!uploadDir.exists())
uploadDir.mkdirs();
String path = dirName + fileName;
// 新建一个文件
File tempFile = new File(path);
try {
// 将上传的文件写入新建的文件中
file.transferTo(tempFile);
} catch (Exception e) {
request.setAttribute("message","图片文件存储失败 "+e.getMessage());
e.printStackTrace();
}
//-------发送邮件图片
MimeMessage message=mailSender.createMimeMessage();
MimeMessageHelper helper = new MimeMessageHelper(message, true);
helper.setFrom(emailfrom);
helper.setTo(request.getParameter("to"));
helper.setSubject(request.getParameter("subject"));
String fileKey=System.currentTimeMillis()+"";
String html="<img src=\"cid:"+fileKey+"\"/>"; //邮件内容 为html， filekey必须跟下面的图片对应
helper.setText(html,true);
helper.addInline(fileKey,tempFile); //file key对应图片文件
String result;
try {
//发送邮件
mailSender.send(message);
result="图片邮件发送成功";
} catch (MailException e) {
result="图片邮件发送失败 " + e.getMessage();
System.out.println(result);
e.printStackTrace();
}
request.setAttribute("message",result);
return index(request);
}
发图片前端代码如下：
<!--图片邮件-->
<script>
let filesize=-1;
let maxsize=1*1024*1024;//最大文件大小 1M
function checkform(){
let address=val('to');
if(address==''){
alert('请输入邮箱地址');
return false;
}
if(!isEmail(address)){
alert('邮箱格式不正确');
return false;
}
if(val('subject')==''){
alert('邮件主题不能为空');
return false;
}
let file=$('#file')[0];
if(file.value==''||filesize==-1){
alert('请选择一个图片');
return false;
}
//获取文件扩展名
let ext=file.value;
ext=ext.lastIndexOf('.')<0?ext:(ext.substring(ext.lastIndexOf('.')+1));
ext=ext.toLowerCase();
if(ext!='jpg' /*&& ext!='gif' && ext!='png' && ext!='bmp' && ext!='jpeg'*/)
{
alert('请选择正确的图片类型，如：.jpg');
return false;
}
if(filesize>maxsize){
alert('图片大小不能超过1M');
return false;
}
return true;
}
//获取上传文件大小
function filechange(e){
filesize=e.target.files[0].size;
}
</script>
<form method="post" th:action="@{/email/sendImage}" onsubmit="return checkform();" enctype="multipart/form-data">
<input type="hidden" name="page" value="3"/>
<div>
<label for="to">邮箱地址（收件人）：</label>
<input id="to" name="to" type="text">
</div>
<div>
<label for="subject">邮件主题：</label>
<input id="subject" name="subject" type="text">
</div>
<div>
<label for="content">图片：</label>
<input id="file" name="file" type="file" onchange="filechange(event)">
</div>
<button type="submit">发送邮件</button>
</form>
发图片效果图如下：
发模版邮件方法类代码如下：
//加载模板
@GetMapping("/template")
public String loadTemplate(HttpServletRequest request){
String name=request.getParameter("name");
return "client/email/moban/"+name;
}
//发送模板邮件
@PostMapping("sendTemplate")
public String sendImage(HttpServletRequest request) throws MessagingException {
//-------发送模板邮件
MimeMessage message=mailSender.createMimeMessage();
MimeMessageHelper helper = new MimeMessageHelper(message, true);
helper.setFrom(emailfrom);
helper.setTo(request.getParameter("to"));
helper.setSubject(request.getParameter("subject"));
helper.setText(request.getParameter("content"),true);
String result;
try {
//发送邮件
mailSender.send(message);
result="模板邮件发送成功";
} catch (MailException e) {
result="模板邮件发送失败 " + e.getMessage();
System.out.println(result);
e.printStackTrace();
}
request.setAttribute("message",result);
return index(request);
}
发模版前端代码如下：
<!--模板邮件-->
<script>
function checkform(){
let address=val('to');
if(address==''){
alert('请输入邮箱地址');
return false;
}
if(!isEmail(address)){
alert('邮箱格式不正确');
return false;
}
if(val('subject')==''){
alert('邮件主题不能为空');
return false;
}
let editor=$('#templateEditor');
let empty=false;
let value='';
editor.find("input").each(function(){
if($(this).val()==''){
empty=true;
//模板内的输入没有填写
}else
value=$(this).val();
});
if(empty){
alert('请输入用户姓名');
return false;
}
let html=editor.data('template');
html=html.replaceAll('$input',value);
$('#content').val(html);
return true;
}
//加载模板
function loadTemplate(name){
if(name=='') return;
$.get('/email/template?name='+name,function(html){
let html2=html.replaceAll('$input',"<input type='text'/>");
$('#templateEditor').html(html2).data('template',html)//设置编辑区的html内容
});
}
$(function(){
loadTemplate('resume');
})
</script>
<form method="post" th:action="@{sendTemplate}" onsubmit="return checkform();">
<input type="hidden" name="page" value="4"/>
<input type="hidden" id="content" name="content" />
<div>
<label for="to">邮箱地址（收件人）：</label>
<input id="to" name="to" type="text">
</div>
<div>
<label for="subject">邮件主题：</label>
<input id="subject" name="subject" type="text">
</div>
<div style="text-align: center">模板内容编辑</div>
<div id="templateEditor" style="border:2px solid #aaa;height: 500px;padding:30px;" contenteditable="false"><div style="height: 100%;color:#9999;display: flex;align-items: center;justify-content: center">请选择模板</div></div>
<button type="submit">发送邮件</button>
</form>
发模版内容前端代码如下：
<!--模板-->
欢迎 加入我们公司
<table border="1" style="width:500px;">
<tr>
<td width="100">
姓名
</td>
<td>$input</td>
</tr>
<tr>
<td>
职位
</td>
<td>会牌设计</td>
</tr>
<tr>
<td>
职称
</td>
<td>设计师</td>
</tr>
<tr>
<td>
部门
</td>
<td>宣传部</td>
</tr>
</table>
<p>
希望在未来的日子里，携手共进！
</p>
发模版邮件效果图如下：
定时邮件发送步骤
- 邮件发送工具类实现：创建一个用于邮件发送服务的工具类MailUtils，并编写一个发送简单邮件的方法
- 邮件定时发送调度实现：创建一个定时任务管理类ScheduleTask，并编写了定时调度方法sendEmail()，并通过“@Scheduled(cron = ”0 0 12 1 * ?“)”注解指定了在每月1日中午12点调用邮件发送任务发送邮件。（具体代码见“发定时邮件方法类”）
- 开启基于注解的定时任务：在项目启动类上使用@EnableScheduling注解开启基于注解的定时任务支持。（具体代码见“开启基于注解的定时任务”）
- 效果展示(详情见附件)
1.邮件发送工具类实现
@Component
public class MailUtils {
@Autowired
private JavaMailSenderImpl mailSender;
@Value("${spring.mail.username}")
private String mailfrom;
// 发送简单邮件
public void sendSimpleEmail(String mailto, String title, String content) {
// 定制邮件发送内容
SimpleMailMessage message = new SimpleMailMessage();
message.setFrom(mailfrom);
message.setTo(mailto);
message.setSubject(title);
message.setText(content);
// 发送邮件
mailSender.send(message);
}
}
2.发定时邮件方法类代码如下：
@Component
public class ScheduleTask {
@Autowired
private StatisticMapper statisticMapper;
@Autowired
private MailUtils mailUtils;
@Value("${spring.mail.username}")
private String mailto;
/**
* 定时邮件发送任务，每月1日中午12点整发送邮件
*/
@Scheduled(cron = "0 0 12 1 * ?")
// @Scheduled(cron = "0 */3 * * * ? ")
public void sendEmail(){
// 定制邮件内容
long totalvisit = statisticMapper.getTotalVisit();
long totalComment = statisticMapper.getTotalComment();
StringBuffer content = new StringBuffer();
content.append("博客系统总访问量为："+totalvisit+"人次").append("\n");
content.append("博客系统总评论量为："+totalComment+"人次").append("\n");
mailUtils.sendSimpleEmail(mailto,"个人博客系统流量统计情况",content.toString());
}
}
3.开启基于注解的定时任务
@EnableScheduling
@SpringBootApplication
public class BlogSystemApplication {
...
}
附件
定时邮件展示如下：
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
