现在所教的知识，你们也许一生都用不到，但我还要教，因为这些知识是好的，应该让你们知道。
一、相关配置
1. 阿里云短信服务
短信服务是阿里云为用户提供的一种通信服务的能力，分为国内短信和国际/港澳台短信服务。本文介绍如何快速使用阿里云OpenAPI开发者门户或阿里云SDK完成常见操作，例如添加短信签名、添加短信模板、发送短信服务和查询短信发送详情等，将指定信息发送至国内或境外手机号码。
2. 导入maven坐标
编辑 reggie_tack_out/pom.xml 文件：
...
<!-- 项目依赖的 jar 包-->
<dependencies>
<!--阿里云短信服务-->
<dependency>
<groupId>com.aliyun</groupId>
<artifactId>aliyun-java-sdk-core</artifactId>
<version>4.5.16</version>
</dependency>
<dependency>
<groupId>com.aliyun</groupId>
<artifactId>aliyun-java-sdk-dysmsapi</artifactId>
<version>2.1.0</version>
</dependency>
...
3. 引入工具类
新建短信发送 src/main/java/com/reggie/utils/SMSUtils.java 类：
package com.reggie.utils;
import ...
/**
* 短信发送工具类
*/
public class SMSUtils {
/**
* 发送短信
* @param signName 签名
* @param templateCode 模板
* @param phoneNumbers 手机号
* @param param 参数
*/
public static void sendMessage(String signName, String templateCode,String phoneNumbers,String param){
DefaultProfile profile = DefaultProfile.getProfile("cn-hangzhou", "", "");
IAcsClient client = new DefaultAcsClient(profile);
SendSmsRequest request = new SendSmsRequest();
request.setSysRegionId("cn-hangzhou");
request.setPhoneNumbers(phoneNumbers);
request.setSignName(signName);
request.setTemplateCode(templateCode);
request.setTemplateParam("{\"code\":\""+param+"\"}");
try {
SendSmsResponse response = client.getAcsResponse(request);
System.out.println("短信发送成功");
}catch (ClientException e) {
e.printStackTrace();
}
}
}
新建生成验证码 src/main/java/com/reggie/utils/ValidateCodeUtils.java 类：
package com.reggie.utils;
import java.util.Random;
/**
* 随机生成验证码工具类
*/
public class ValidateCodeUtils {
/**
* 随机生成验证码
* @param length 长度为4位或者6位
* @return
*/
public static Integer generateValidateCode(int length){
Integer code =null;
if(length == 4){
code = new Random().nextInt(9999);//生成随机数，最大为9999
if(code < 1000){
code = code + 1000;//保证随机数为4位数字
}
}else if(length == 6){
code = new Random().nextInt(999999);//生成随机数，最大为999999
if(code < 100000){
code = code + 100000;//保证随机数为6位数字
}
}else{
throw new RuntimeException("只能生成4位或6位数字验证码");
}
return code;
}
/**
* 随机生成指定长度字符串验证码
* @param length 长度
* @return
*/
public static String generateValidateCode4String(int length){
Random rdm = new Random();
String hash1 = Integer.toHexString(rdm.nextInt());
String capstr = hash1.substring(0, length);
return capstr;
}
}
4. 前端代码
编辑 src/main/resources/front/page/login.html 登录页：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=no,minimal-ui">
<title>菩提阁</title>
<link rel="icon" href="./../images/favico.ico">
<!--不同屏幕尺寸根字体设置-->
<script src="./../js/base.js"></script>
<!--element-ui的样式-->
<link rel="stylesheet" href="../../backend/plugins/element-ui/index.css" />
<!--引入vant样式-->
<link rel="stylesheet" href="../styles/vant.min.css"/>
<!-- 引入样式 -->
<link rel="stylesheet" href="../styles/index.css" />
<!--本页面内容的样式-->
<link rel="stylesheet" href="./../styles/login.css" />
</head>
<body>
<div id="login" v-loading="loading">
<div class="divHead">登录</div>
<div class="divContainer">
<el-input placeholder=" 请输入手机号码" v-model="form.phone" maxlength='20'/></el-input>
<div class="divSplit"></div>
<el-input placeholder=" 请输入验证码" v-model="form.code" maxlength='20'/></el-input>
<span @click='getCode'>获取验证码</span>
</div>
<div class="divMsg" v-if="msgFlag">手机号输入不正确，请重新输入</div>
<el-button type="primary" :class="{btnSubmit:1===1,btnNoPhone:!form.phone,btnPhone:form.phone}" @click="btnLogin">登录</el-button>
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="../../backend/plugins/vue/vue.js"></script>
<!-- 引入组件库 -->
<script src="../../backend/plugins/element-ui/index.js"></script>
<!-- 引入vant样式 -->
<script src="./../js/vant.min.js"></script>
<!-- 引入axios -->
<script src="../../backend/plugins/axios/axios.min.js"></script>
<script src="./../js/request.js"></script>
<script src="./../api/login.js"></script>
</body>
<script>
new Vue({
el:"#login",
data(){
return {
form:{
phone:'',
code:''
},
msgFlag:false,
loading:false
}
},
computed:{},
created(){},
mounted(){},
methods:{
getCode(){
this.form.code = ''
const regex = /^(13[0-9]{9})|(15[0-9]{9})|(17[0-9]{9})|(18[0-9]{9})|(19[0-9]{9})$/;
if (regex.test(this.form.phone)) {
this.msgFlag = false
// this.form.code = (Math.random()*1000000).toFixed(0)
sendMsgApi({phone:this.form.phone}) // 调用短信验证码方法
}else{
this.msgFlag = true
}
},
async btnLogin(){
if(this.form.phone && this.form.code){
this.loading = true
// const res = await loginApi({phone:this.form.phone})
const res = await loginApi(this.form)
this.loading = false
if(res.code === 1){
sessionStorage.setItem("userPhone",this.form.phone)
window.requestAnimationFrame(()=>{
window.location.href= '/front/index.html'
})
}else{
this.$notify({ type:'warning', message:res.msg});
}
}else{
this.$notify({ type:'warning', message:'请输入手机号码'});
}
}
}
})
</script>
</html>
编辑 src/main/resources/front/api/login.js 接口配置：
...
function loginoutApi() {
return $axios({
'url': '/user/loginout',
'method': 'post',
})
}
二、结构搭建
1. 业务需求
- 在登录页面(
front/page/login.html)输入手机号，点击 【获取验证码】 按钮，页面发送ajax请求，在服务端调用短信服务API给指定手机号发送验证码短信 - 在登录页面输入验证码，点击 【登录】 按钮，发送ajax请求，在服务端处理登录请求
2. 实体类
新建 src/main/java/com/reggie/entity/User 类：
package com.reggie.entity;
import lombok.Data;
import java.time.LocalDateTime;
import java.util.Date;
import java.util.List;
import java.io.Serializable;
import com.baomidou.mybatisplus.annotation.IdType;
import com.baomidou.mybatisplus.annotation.TableId;
/**
* 用户信息
*/
@Data
public class User implements Serializable {
private static final long serialVersionUID = 1L;
private Long id;
//姓名
private String name;
//手机号
private String phone;
//性别 0 女 1 男
private String sex;
//身份证号
private String idNumber;
//头像
private String avatar;
//状态 0:禁用，1:正常
private Integer status;
}
3. Mapper
新建 src/main/java/com/reggie/mapper/UserMapper 接口：
package com.reggie.mapper;
import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import com.reggie.entity.User;
import org.apache.ibatis.annotations.Mapper;
@Mapper
public interface UserMapper extends BaseMapper<User> {
}
4. Service 接口
新建 src/main/java/com/reggie/service/UserService 类：
package com.reggie.service;
import com.baomidou.mybatisplus.extension.service.IService;
import com.reggie.entity.User;
public interface UserService extends IService<User> {
}
5. Service 实现类
新建 src/main/java/com/reggie/service/impl/UserServiceImpl 类：
package com.reggie.service.impl;
import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
import com.reggie.entity.User;
import com.reggie.mapper.UserMapper;
import com.reggie.service.UserService;
import org.springframework.stereotype.Service;
@Service
public class UserServiceImpl extends ServiceImpl<UserMapper, User> implements UserService {
}
三、功能实现
1. LoginCheckFilter过滤器
编辑 src/main/java/com/reggie/filter/LoginCheckFilter.java 文件：
...
// 定义不需要处理的请求路径
String[] urls = new String[] {
"/employee/login",
"/employee/logout",
"/backend/**",
"/front/**",
"/common/**",
"/user/sendMsg", // 移动端发送短信
"/user/login", // 移动端登录
};
...
// 4_2. 判断 移动端用户 登录状态，如果已登录，则直接放行
if(request.getSession().getAttribute("user") != null) {
log.info("用户已登录，用户 id 为：{}", request.getSession().getAttribute("user"));
// 存储用户 id 至线程
Long userId = (Long) request.getSession().getAttribute("user");
BaseContext.setCurrentId(userId);
filterChain.doFilter(request, response);
return;
}
...
2. 发送短信验证码
新建 src/main/java/com/reggie/controller/UserController.java 文件：
package com.reggie.controller;
import ...
@RestController
@RequestMapping("/user")
@Slf4j
public class UserController {
@Autowired
private UserService userService;
/**
* 发送手机短信验证码
* @param user
* @return
*/
@PostMapping("/sendMsg")
public R<String> sendMsg(@RequestBody User user, HttpSession session) {
// 获取用户手机号
String phone = user.getPhone();
if(StringUtils.isNotEmpty(phone)) {
// 生成随机四位数验证码
String code = ValidateCodeUtils.generateValidateCode(4).toString();
// 打印生成的四位数验证码
log.info("验证码：{}", code);
// 调用阿里云提供的短信服务 API 发送短信验证码
// （因为这里不方便调用阿里云接口，所以先注释掉，根据控制台打印来查看生成的验证码）
// SMSUtils.sendMessage("瑞吉外卖", "", phone, code);
// 需要将生成的验证码保存到 session
session.setAttribute(phone, code);
return R.success("手机验证码短信发送成功");
}
return R.error("短信发送失败");
}
}
3. 登录
新建 src/main/java/com/reggie/controller/UserController.java 文件：
...
/**
* 移动端用户登录
* @param map
* @return
*/
@PostMapping("/login")
public R<User> login(@RequestBody Map map, HttpSession session) {
log.info("map:{}", map.toString());
// 获取手机号
String phone = map.get("phone").toString();
// 获取验证码
String code = map.get("code").toString();
// 获取 Session 中保存的短信验证码
Object codeInSession = session.getAttribute(phone);
// 进行验证码比对
if(codeInSession != null && codeInSession.equals(code)) {
// 比对正确，登录成功
// 手机号和用户库比对
LambdaQueryWrapper<User> queryWrapper = new LambdaQueryWrapper<>();
queryWrapper.eq(User::getPhone, phone);
User user = userService.getOne(queryWrapper);
if(user == null) {
// 如果是新用户，自动完成注册
user = new User();
user.setPhone(phone);
user.setStatus(1);
userService.save(user);
}
session.setAttribute("user", user.getId());
return R.success(user);
}
return R.error("登录失败");
}
}
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
