1.创建springboot项目。
2.创建好的项目如图：
在static目录下新建index.html。
3.点击启动项目
在浏览器的地址栏中访问：http://localhost:8080/
访问到index.html说明创建项目成功。
4.集成邮件发送
参考地址：
①实现以后的目录结构，如图：
②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.邮件需要登录添加第三方密码。