1.创建springboot项目。
2.创建好的项目如图：
在static目录下新建index.html。
3.点击启动项目
在浏览器的地址栏中访问：http://localhost:8080/
访问到index.html说明创建项目成功。
4.集成邮件发送
参考地址：https://blog.csdn.net/ZZ2713634772/article/details/79576930
①实现以后的目录结构，如图：
②index.html部分代码（主要实现页面中申请演示的一个表单提交，然后将表单内容通过邮件发送给相关负责人，然后进行联系跟进）：
|
<div class="modalform" style="display: none" id="controlViewModalForm">
<div class="reservedemo_bg">
<div class="myformbutton">
<span>×</span>
</div>
</div>
<div class="tableform">
<table>
<tr>
<td width="150px" class="alignright">
<div><span>公司名称</span></div>
</td>
<td width="350px">
<div><input type="text" class="inputwidth340"
name="companyname"></div>
</td>
</tr>
<tr>
<td class="alignright">
<div><span>联系人</span></div>
</td>
<td>
<div><input type="text" class="inputwidth340"
name="companycustomer"></div>
</td>
</tr>
<tr>
<td class="alignright">
<div><span>联系电话</span></div>
</td>
<td>
<div><input type="text" class="inputwidth340"
name="phonenum"></div>
</td>
</tr>
<tr>
<td class="alignright">
<div><span>预约演示产品</span></div>
</td>
<td>
<div>
<label class="mychecklabel">
<input class="demo-radio" type="checkbox" name="orderproduct"
value="1">
<span class="demo-checkbox
demo-radioInput"></span>
<span class="checkspan1">监控平台</span>
</label>
</div>
</td>
</tr>
<tr>
<td>
<div><span></span></div>
</td>
<td>
<div>
<label class="mychecklabel">
<input class="demo-radio" type="checkbox" name="orderproduct"
value="2">
<span class="demo-checkbox
demo-radioInput"></span>
<span class="checkspan1">办公流程平台</span>
</label>
</div>
</td>
</tr>
<tr style="height: 20px">
<td>
<div><span></span></div>
</td>
<td></td>
</tr>
<tr>
<td>
<div><span></span></div>
</td>
<td>
<div class="submitstyle"><span>提交</span></div>
</td>
</tr>
</table>
</div>
</div>
|
③对应表单的js代码：
//预约产品演示 form 表单弹出
//弹出view
var productDemo = $("#center_sky_font");
productDemo.on('click', viewModalForm);
function viewModalForm() {
var modalForm = document.getElementById("controlViewModalForm");
modalForm.style.display = "";
}
//关闭view
var closeView = $(".myformbutton");
closeView.on('click', closeViewModalForm);
function closeViewModalForm() {
var modalForm = document.getElementById("controlViewModalForm");
modalForm.style.display = "none";
//清空表单
$("input[name='companyname']").val("");
$("input[name='companycustomer']").val("");
$("input[name='phonenum']").val("");
$("input[name='orderproduct']").each(function (i, n) {
$(this)[0].checked=false;
});
}
//发送邮件
var sendMailButton = $(".submitstyle");
sendMailButton.on('click', sendMailInfo);
function sendMailInfo() {
// 判断有没有填写公司名称和联系人
var conpanyName_str = $("input[name='companyname']").val(),
conpanyCustomer_str = $("input[name='companycustomer']").val();
if (conpanyName_str == "" || conpanyCustomer_str == "") {
alert("请填写完整的信息！");
return;
}
// 获取电话并进行验证
var phongNum = $("input[name='phonenum']").val();
if (phongNum == "" || !checkTel(phongNum)) {
alert("请输入正确的电话号码！")
return;
}
// 获取复选框数组
var orderProductsArr = [];
$("input[name='orderproduct']:checked").each(function (i, n) {
orderProductsArr[i] = $(this).val();
});
// 如果没有选择演示产品不能提交
if (orderProductsArr.length == 0) {
alert("请选择预约演示的产品！");
return;
}
// 封装页面中获取的数据对象
var emailInfo = {
conpanyName: conpanyName_str,
conpanyCustomer: conpanyCustomer_str,
phoneNum: phongNum,
orderProducts: orderProductsArr,
};
console.log("fromInfo：", emailInfo);
$.ajax({
type: "POST",
url: "/mail/sendSimpleMail",
data: JSON.stringify(emailInfo),
async: false,
dataType: "json",
contentType: "application/json;charset=utf-8",
success: function (data) {
console.log("ajax-succdata:", data);
if (data.state == 200) {
alert(data.msg);
closeViewModalForm();
} else {
alert(data.msg);
}
}
})
}
// 电话验证
function checkTel(tel) {
var mobile = /^1[3|5|8]\d{9}$/, phone = /^0\d{2,3}-?\d{7,8}$/;
return mobile.test(tel) || phone.test(tel);
}
|
④MailController的定义：
这里面只有一个return，将所有的处理放在service实现类中进行处理。
package com.vlinksoft.controller;
import com.vlinksoft.po.MailObj;
import com.vlinksoft.service.MailService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;
import java.util.Map;
/**
* @date 2018/5/29
* @desc 发送邮件的Controller
*/
@RestController
@RequestMapping("/mail")
public class MailController {
@Autowired
private MailService mailService;
@RequestMapping(value = "/sendSimpleMail", method = RequestMethod.POST)
@ResponseBody
public Map sendSimpleMail(@RequestBody MailObj mailObj) {
return mailService.sendSimpleMail(mailObj);
}
}
|
⑤services接口的定义。
package com.vlinksoft.service;
import com.vlinksoft.po.MailObj;
import java.util.Map;
/**
* @date 2018/5/29 0029
*/
public interface MailService {
Map sendSimpleMail(MailObj mailObj);
}
|
⑥service实现类的定义。
package com.vlinksoft.service.impl;
import com.vlinksoft.po.MailObj;
import com.vlinksoft.service.MailService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.mail.SimpleMailMessage;
import org.springframework.mail.javamail.JavaMailSender;
import org.springframework.stereotype.Component;
import org.springframework.stereotype.Service;
import java.util.HashMap;
import java.util.Map;
@Service
@Component
public class MailServiceImpl implements MailService {
@Autowired
private JavaMailSender mailSender;
//从propertise文件中获取发送邮箱和接收邮箱的信息
@Value("${mail.fromMail.addr}")
private String from;
@Value("${mail.toMail.addr}")
private String to;
@Value("${mail.toMail.subject}")
private String subject;
/**
* @date 2018/5/29
* @desc 发送简单邮件
*/
@Override
public Map sendSimpleMail(MailObj mailObj) {
SimpleMailMessage message = new SimpleMailMessage();
message.setFrom(from);
message.setTo(to);
message.setSubject(subject);
String orderProduct_str = "";
String getOrderProductArr[] = mailObj.getOrderProducts();
switch (getOrderProductArr.length) {
case 1:
if ("1".equals(getOrderProductArr[0])) {
orderProduct_str = "视频监控平台";
} else {
orderProduct_str = "ITSM办公流程平台";
}
break;
case 2:
orderProduct_str = "监控平台、办公流程平台";
break;
}
String content = "科技有限公司\n\n产品预约演示申请：\n\n公司名称：" + mailObj.getConpanyName() + "\n联系人：" + mailObj.getConpanyCustomer()
+ "\n联系电话：" + mailObj.getPhoneNum() + "\n预约产品：" + orderProduct_str + "\n\n请及时进行联系！";
message.setText(content);
Map map = new HashMap();
try {
mailSender.send(message);
map.put("state", 200);
map.put("msg", "预约演示成功！\n稍后会有人和您联系，请注意收听您的电话。");
System.out.println("邮件发送成功！");
} catch (Exception e) {
map.put("state", 299);
map.put("msg", "预约演示失败！\n请稍后申请。");
System.out.println("发送邮件时发生异常！" + e);
}
return map;
}
}
|
⑦application.properties定义：
将收件人和发件人的经常修改的信息都放入到properties
注意：properties文件中不能有空格。
#############邮箱服务器地址(此处我使用的是163的邮箱)#############
spring.mail.host=smtp.163.com
#############用户名(此处我填写的是163网站登录的用户名)#############
spring.mail.username=xxx@163.com
#############授权码(此处我填写的是163网站用户的授权码)#############
spring.mail.password=xxxxxx
spring.mail.default-encoding=UTF-8
#############发送邮件的人#############
mail.fromMail.addr=xxxxxx@163.com
#############收件人#############
mail.toMail.addr=xxx@qq.com
#############subject#############
mail.toMail.subject=xxxxxxxxxx
|
⑧pojo的定义：
package com.vlinksoft.po;
import java.io.Serializable;
/**
* @date 2018/5/29 0029
*/
public class MailObj implements Serializable {
private String conpanyName;
private String conpanyCustomer;
private String phoneNum;
private String[] orderProducts;
public String[] getOrderProducts() {
return orderProducts;
}
public void setOrderProducts(String[] orderProducts) {
this.orderProducts = orderProducts;
}
public String getConpanyName() {
return conpanyName;
}
public void setConpanyName(String conpanyName) {
this.conpanyName = conpanyName;
}
public String getConpanyCustomer() {
return conpanyCustomer;
}
public void setConpanyCustomer(String conpanyCustomer) {
this.conpanyCustomer = conpanyCustomer;
}
public String getPhoneNum() {
return phoneNum;
}
public void setPhoneNum(String phoneNum) {
this.phoneNum = phoneNum;
}
}
|
注意：
1.页面弹出框背景是全屏的div，display=fixed
2.js复选框获取选中的val值需要遍历。
3.controller中参数的交互问题。
4.将所有的数据处理放在serviceimpl中进行处理。
5.ajax请求，controller中的返回Map集合。
6.邮件需要登录添加第三方密码。
springboot实现邮件发送的相关教程结束。
