短信验证码
程序员文章站
2022-05-13 15:53:59
...
思路
1.引入相关坐标
2.引入所需js文件
3.写form表单
4.后台通过入参接收前台发送的手机号
5.随机生成一个验证码
6.将随机生成的验证码放到session中
7.将手机号和验证码传给工具包 调用工具包接口来发送短信
前台页面
<%--
Created by IntelliJ IDEA.
User: LI WAN
Date: 2019/1/16
Time: 16:22
To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<html>
<head>
<base href="<%=basePath%>">
<script src="${path}/js/jquery-1.11.3.js"></script>
<script src="${path}/js/echarts.js"></script>
<title>标题</title>
</head>
<body>
<form action="" METHOD="post">
手机号：<input id="phone" name="phone">
验证码：<input id="yzm" name="yzm">
<input type="button" value="获取验证码" onclick="sendYzm()">
<input type="button" value="注册" onclick="login()">
</form>
</body>
<script>
function sendYzm() {
$.ajax({
url:"loginYzm.do",
data:{"phone":$("#phone").val()},
dataType:"json",
type:"post",
success:function (data) {
if(data.error==0){
alert("发送成功!");
}else {
alert("发送失败,请稍候重试!");
}
}
})
}
</script>
</html>
后台controller
package com.mr.user.controller;
import com.mr.user.service.UserService;
import com.mr.utils.Yzm;
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 javax.servlet.http.HttpSession;
import java.text.DecimalFormat;
import java.util.Random;
/**
* Created by LI WAN on 2019/1/16.
*/
@Controller
public class UserController {
@Autowired
private UserService userService;
@RequestMapping("toLogin")
public String toJsp(){
return "login";
}
//发送短信
@ResponseBody
@RequestMapping("loginYzm")
public String loginYzm(String phone, HttpSession session){
//实例化一个随机函数的类
Random random = new Random();
//通过nextInt 给random赋值
int anInt= random.nextInt(999999);
//随机补0
DecimalFormat df = new DecimalFormat("000000");
//anInt 随机数
String yzm = df.format(anInt);
System.out.println(yzm);
//将随机生成的验证码存放到sesion中
session.setAttribute(phone,yzm);
//调用工具包 将手机号和验证码传给工具包 调用接口用来发送短信
/* return Yzm.testSend(phone,yzm);*/
return "";
}
}
工具类
package com.mr.utils;
import com.sun.jersey.api.client.Client;
import com.sun.jersey.api.client.ClientResponse;
import com.sun.jersey.api.client.WebResource;
import com.sun.jersey.api.client.filter.HTTPBasicAuthFilter;
import com.sun.jersey.core.util.MultivaluedMapImpl;
import javax.ws.rs.core.MediaType;
/**
* Created by LI WAN on 2019/1/16.
*/
public class Yzm {
public static String testSend(String phone,String yzm){
// just replace key here
Client client = Client.create();
client.addFilter(new HTTPBasicAuthFilter(
"api","key-0e12d048887af63087c06f9fef7cf19d"));
WebResource webResource = client.resource(
"http://sms-api.luosimao.com/v1/send.json");
MultivaluedMapImpl formData = new MultivaluedMapImpl();
formData.add("mobile",phone);
formData.add("message", "验证码："+yzm+"【铁壳测试】");
ClientResponse response = webResource.type( MediaType.APPLICATION_FORM_URLENCODED ).
post(ClientResponse.class, formData);
String textEntity = response.getEntity(String.class);
int status = response.getStatus();
//System.out.print(textEntity);
//System.out.print(status);
return textEntity;
}
}