提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档
1.Contriller层调用方法
代码如下(示例):
import java.util.HashMap;
import java.util.Map;
import java.util.Random;
import javax.servlet.http.HttpServletRequest;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import com.alibaba.fastjson.JSON;
import com.alibaba.fastjson.JSONObject;
import bm.web.aliyun.SendSmsUtil;
import bm.web.utils.CommonEnum;
import bm.web.utils.ResultBase;
@Controller
@RequestMapping(“/sms/”)
public class SendSmsController {
@Autowired
private SendSmsUtil sendSmsUtil;
/**
* 发送手机验证码
*/
@RequestMapping("sendcode")
@ResponseBody
public ResultBase sendSmsCode(HttpServletRequest request) {
String phone = request.getParameter("phone");
ResultBase result = null;
if(phone == null || phone.equals("")) {
result = ResultBase.error(CommonEnum.USERINFO_NO_PHONE);
}
System.out.println("phone=" + phone);
//生成验证码 1-9 6
StringBuilder builder = new StringBuilder();
for (int i = 0; i < 6; i++) {
builder.append(new Random().nextInt(9) + 1);
}
String smsCode = builder.toString();
System.out.println("smsCode=" + smsCode);
//验证码注意要转为json字符串
Map<String, String> mapcode = new HashMap<String, String>();
mapcode.put("code",smsCode);
String jsoncode = JSON.toJSONString(mapcode);
String smsinfo = sendSmsUtil.aliSendSms(phone, jsoncode);
System.out.println("smsinfo=" + smsinfo);
if(smsinfo == "ok") {
result = ResultBase.success(smsCode);
}else {
result = ResultBase.error(CommonEnum.USERINFO_SMS_ERROR);
}
System.out.println("result=" + result);
return result;
}
}
2.阿里云短信验证工具类
代码如下(示例):
package bm.web.aliyun;
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;
import com.google.gson.Gson;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.stereotype.Service;
import java.util.Map;
/**
- @Description: 短信发送工具
- @CreateDate:
*/
@Service
public class SendSmsUtil {
// 配置工具类中的对应参数 ,示例:@Value(“${alisms.accessKeyId}”) ,参数在application.properties中配置,示例:alisms.accessKeyId=LTAIrKk,其他参数需要同样设置,也可以通过其他方式设置这些参数值
@Value(“示例中的符号{alisms.accessKeyId}”)
private String accessKeyId;
private String accessSecret;
private String signName;
private String templateCode;
public String aliSendSms(String PhoneNumbers,String TemplateParam){
String result = "";
DefaultProfile profile = DefaultProfile.getProfile("default", accessKeyId, accessSecret);
IAcsClient client = new DefaultAcsClient(profile);
CommonRequest request = new CommonRequest();
request.setSysMethod(MethodType.POST);
request.setSysDomain("dysmsapi.aliyuncs.com");
request.setSysVersion("2017-05-25");
request.setSysAction("SendSms");
request.putQueryParameter("RegionId", "default");
request.putQueryParameter("PhoneNumbers", PhoneNumbers);
request.putQueryParameter("SignName", "发送者单位名字"); //填写自己需要的发送者单位名字
request.putQueryParameter("TemplateCode", templateCode);
request.putQueryParameter("TemplateParam", TemplateParam);
try {
CommonResponse response = client.getCommonResponse(request);
System.out.println(response.getData());
String infojson = response.getData();
Gson gson2 = new Gson();
Map map = gson2.fromJson(infojson, Map.class);
String codes = map.get("Message").toString();
System.out.println("codes="+codes);
if(codes.equals("OK")){
result="ok";
}else {
result="not_ok";
}
} catch (ServerException e) {
e.printStackTrace();
} catch (ClientException e) {
e.printStackTrace();
}
System.out.println("result="+result);
return result;
}
}
3.前端页面使用方法,放在script中,使用了layui模板
代码如下(示例):
layui.use([ 'layer', 'form' ], function() {// >=layui
var $ = layui.jquery;
var layer = layui.layer;
var form = layui.form;
var yzcode ="000000";
//表单验证(页面自动关联,验证结果绑定在表单)
form.verify({
realName: function(value, item){ //value:表单的值、item:表单的DOM对象 自定义验证规则
if(!(/^[\u4E00-\u9FA5\uf900-\ufa2d·s]{2,20}$/).test(value)){
return '请输入中文姓名!';
}
},
card: function(value, item){ //value:表单的值、item:表单的DOM对象 自定义验证规则
if(!(/(^\d{15}$)|(^\d{17}(x|X|\d)$)/).test(value)){
return '请输入身份证号!';
}
},
phone: function(value, item){ //value:表单的值、item:表单的DOM对象 自定义验证规则
if(!(/^1\d{10}$/).test(value)){
return '请输入11位手机号!';
}
},
code: function(value, item){ //value:表单的值、item:表单的DOM对象 自定义验证规则
if(!(/^\d{6}$/).test(value)){
return '请输入6位验证码!';
}
},
password: function(value, item){ //value:表单的值、item:表单的DOM对象 自定义验证规则
if(value.length < 6 ){
return '密码长度不能少于6位!';
}
}
});
//$("#btnWxPay").click(function () {
form.on('submit(btnStuInfo)', function(data){
//返回的验证码
var code = $("#code").val();
var datas = data.field;
var card = $("#code").val();
if(code == yzcode){
var saveLoading = parent.layer.msg('用户注册中,请稍候', {
icon : 16,
time : false,
shade : 0.8
});
//ajax发送信息
$.ajax({
url: "/regiserinfo",
type: "post",
data: datas,
success: function (res) {
parent.layer.close(saveLoading);
if (res.code == 200) {
layer.msg("注册成功,跳转中...",{icon:1});
setTimeout(function(){
//如果输入成功,可以跳到另一个你需要的界面
location.replace("/login");
},1000)
}else{
layer.msg(res.msg);
}
}
});//结束ajax发送订单信息
return false; //表单必加,解决表单不跳转问题
}else{
layer.msg('验证码不匹配!',{time:3000,icon:5});
return false;
}
});
//短信验证码
var InterValObj; //timer变量,控制时间
var count = 60; //间隔函数,1秒执行
var curCount;//当前剩余秒数
var code = ""; //验证码
var codeLength = 6;//验证码长度
//获取手机号 发送验证码
$('#getcode').click(function (){
var regrep=/^1[3|4|5|7|8][0-9]{9}$/;
var phone=$('#phone').val();
if(!regrep.test(phone)){
layer.msg('请输入11位手机号!',{time:3000,icon:5});
return false;
}
curCount = count;
// 设置按钮显示效果,倒计时
$("#getcode").attr("disabled", "true");
$("#getcode").val("重新发送(" + curCount + ")");
InterValObj = window.setInterval(SetRemainTime, 1000); // 启动计时器,1秒执行一次
$.ajax({//ajax start
url: "/sms/sendcode" , // 请求地址
type: "POST",//请求方式
data:{phone:phone},
dataType: "JSON",//返回数据类型
success:function(data){
if(data.code==200){
//var datas = data.data;
var rescode = data.data;
yzcode = rescode;
}else{
layer.msg(data.msg)
}
}
})//ajax over
});
//timer处理函数
function SetRemainTime() {
if (curCount == 0) {
window.clearInterval(InterValObj);// 停止计时器
$("#getcode").removeAttr("disabled");// 启用按钮
$("#getcode").val("重发验证码");
code = ""; // 清除验证码。如果不清除,过时间后,输入收到的验证码依然有效
} else {
curCount--;
$("#getcode").val("重新发送(" + curCount + ")");
}
}
});// >=end layui
总结
使用layui模板直接使用ajax发送参数,参照了其他学习方法整理为自己小白使用的短信发送与接收小案例