1.引入阿里云的包
<dependency> <groupId>com.aliyun</groupId> <artifactId>aliyun-java-sdk-core</artifactId> <version>4.3.3</version> </dependency>
2.编写发送短信的工具类
package com.goodwe.message.Utils; import com.alibaba.fastjson.JSONObject; import com.aliyuncs.CommonRequest; import com.aliyuncs.CommonResponse; import com.aliyuncs.DefaultAcsClient; import com.aliyuncs.IAcsClient; import com.aliyuncs.exceptions.ClientException; import com.aliyuncs.exceptions.ServerException; import com.aliyuncs.http.MethodType; import com.aliyuncs.profile.DefaultProfile; /* pom.xml <dependency> <groupId>com.aliyun</groupId> <artifactId>aliyun-java-sdk-core</artifactId> <version>4.0.3</version> </dependency> */ public class MessageUtil { /** * @Description //验证阿里云开发者身份 **/ DefaultProfile profile = DefaultProfile.getProfile("default", "LTAI41s7UdycZniy", "HngXYiuYNWWPfBjCbHNQZuwhqtwDjQ"); IAcsClient client = new DefaultAcsClient(profile); public String SendMessage(String PhoneNumbers){ CommonRequest request = new CommonRequest(); //request.setSysProtocol(ProtocolType.HTTPS); request.setSysMethod(MethodType.POST); request.setSysDomain("dysmsapi.aliyuncs.com"); request.setSysVersion("2017-05-25"); request.setSysAction("SendSms"); request.putQueryParameter("PhoneNumbers", PhoneNumbers);//接受验证码的手机号 request.putQueryParameter("SignName", "北极光游戏平台");//签名 request.putQueryParameter("TemplateCode", "SMS_149100495");//模板代码 request.putQueryParameter("TemplateParam", "{code:"+((int) (Math.random() * 9000 + 1000))+"}");//用户定义的验证码内容 try { CommonResponse response = client.getCommonResponse(request); String returnstr = response.getData(); System.out.println(returnstr); JSONObject returnjsonstr = JSONObject.parseObject(returnstr); return returnjsonstr.getString("Message");//返回的信息 } catch (ServerException e) { return e.getErrMsg(); } catch (ClientException e) { return e.getErrMsg(); } }; //查询发送信息 public String QuerySendDetails(String PhoneNumber,String SendDate,String PageSize,String CurrentPage){ CommonRequest request = new CommonRequest(); //request.setSysProtocol(ProtocolType.HTTPS); request.setSysMethod(MethodType.POST); request.setSysDomain("dysmsapi.aliyuncs.com"); request.setSysVersion("2017-05-25"); request.setSysAction("QuerySendDetails"); request.putQueryParameter("PhoneNumber", PhoneNumber); request.putQueryParameter("SendDate", SendDate); request.putQueryParameter("PageSize", PageSize); request.putQueryParameter("CurrentPage", CurrentPage); try { CommonResponse response = client.getCommonResponse(request); String returnstr = response.getData(); System.out.println(returnstr); JSONObject returnjsonstr = JSONObject.parseObject(returnstr); return returnjsonstr.getString("Message"); } catch (ServerException e) { return e.getErrMsg(); } catch (ClientException e) { return e.getErrMsg(); } } }
3.调用工具
import javax.servlet.http.HttpServletResponse; import java.io.IOException; @Controller @RequestMapping("/message") public class MessageController { @RequestMapping("/send") public String send() { return "/message"; } @RequestMapping(value = "/sendcode",method = RequestMethod.POST) public void sendcode(String number, HttpServletResponse response) { MessageUtil messageUtil = new MessageUtil(); try { response.getWriter().write(messageUtil.SendMessage(number)); } catch (IOException e) { e.printStackTrace(); } } }
4.前端页面
<!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <header> <meta charset="utf-8"/> <meta http-equiv="X-UA-Compatible" content="IE=edge"/> <meta name="viewport" content="width=device-width, initial-scale=1"/> <title th:text=" 发送验证码"></title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script> </header> <body> <div style="width: 500px;height: auto;margin: auto"> <div style="text-align: center;margin: 30px"><h3>发送验证码</h3></div> <div> <div class="form-group"> <label for="Number">填写手机号码</label> <div> <input style="float: left;width: 80%" type="text" class="form-control" id="Number" > <button style="float: right;width: 20%" type="button" th:οnclick="'javascript:send()'" class="btn btn-default" >Send</button> </div> </div> <div id="returnstr" style="margin: 50px auto;"> </div> </div> </div> </div> <script type="text/javascript"> send = function () { $('#returnstr').html(""); jQuery.ajax({ type: "POST", url: "sendcode", data: {"number":jQuery("#Number").val()}, success: function (data) { console.log(data) jQuery("#returnstr").append(" </br><span style='margin:10px auto;border:-1px;background:#00FFFF;border-color:#00f' type='text' >" + data + "</span>"); }, error: function (xhr, status, error) { console.log(xhr); console.log(status); console.log(error); } }); jQuery("#Number").val("") } </script> </body> </html>