移动端开发_手机快速登录

文章目录

移动端开发_手机快速登录
第一章. 需求分析
第二章. 手机快速登录
【路径】
2.1. 前台代码
2.1.1. 发送验证码
2.1.2. 提交登录请求
2.2. 后台代码
2.2.1. Controller
2.2.2. 服务接口
2.2.3. 服务实现类
2.2.4. Dao接口
2.2.5. Mapper映射文件

移动端开发_手机快速登录

第一章. 需求分析

手机快速登录功能，就是通过短信验证码的方式进行登录。这种方式相对于用户名密码登录方式，用户不需要记忆自己的密码，只需要通过输入手机号并获取验证码就可以完成登录，是目前比较流行的登录方式。

第二章. 手机快速登录

【路径】

（1）发送验证码

获得用户输入的手机号码
生成动态验证码(4或者6位)
使用阿里云发送短信验证码
把验证码存到redis(存5分钟)
（2）登录
获得用户输入的信息(Map)
取出redis里面的验证码和用户输入的验证码进行校验
如果校验通过
• 判断是否是会员, 不是会员, 自动注册为会员
• 保存用户的登录状态( CAS(Central Authentication Service)或者自己手动签发token ，我们这里可以使用Cookie存储用户信息)

2.1. 前台代码

登录页面为/pages/login.html

2.1.1. 发送验证码

（1）为获取验证码按钮绑定事件，并在事件对应的处理函数中校验手机号，如果手机号输入正确则显示30秒倒计时效果并发送ajax请求，发送短信验证码

<div class="input-row"><label>手机号</label><div class="loginInput"><input v-model="loginInfo.telephone" id='account' type="text" placeholder="请输入手机号"><input id="validateCodeButton" @click="sendValidateCode()" type="button" style="font-size: 12px" value="获取验证码"></div>
</div>

（2）调用sendValidateCode()方法

//发送验证码
sendValidateCode(){var telephone = this.loginInfo.telephone;if (!checkTelephone(telephone)) {this.$message.error('请输入正确的手机号');return false;}validateCodeButton = $("#validateCodeButton")[0];clock = window.setInterval(doLoop, 1000); //一秒执行一次axios.post("/validateCode/send4Login.do?telephone=" + telephone).then((response) => {if(!response.data.flag){//验证码发送失败this.$message.error('验证码发送失败，请检查手机号输入是否正确');}});
},

（3）在 ValidateCodeController 中提供 send4Login方法，调用短信服务发送验证码并将验证码保存到redis
注意：存放到redis的可以值：手机号+002（RedisMessageConstant.SENDTYPE_LOGIN）

package com.atguigu.controller;import com.atguigu.constant.MessageConstant;
import com.atguigu.constant.RedisConstant;
import com.atguigu.constant.RedisMessageConstant;
import com.atguigu.entity.Result;
import com.atguigu.utils.SMSUtils;
import com.atguigu.utils.ValidateCodeUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import redis.clients.jedis.JedisPool;@RestController
@RequestMapping("/validateCode")
public class ValidateCodeController {@Autowiredprivate JedisPool jedisPool;//手机快速登录时发送手机验证码@RequestMapping("/send4Login")public Result send4Login(String telephone){Integer code = ValidateCodeUtils.generateValidateCode(4);//生成4位数字验证码try {//发送短信SMSUtils.sendShortMessage(telephone,code.toString());} catch (ClientException e) {e.printStackTrace();//验证码发送失败return new Result(false, MessageConstant.SEND_VALIDATECODE_FAIL);}System.out.println("发送的手机验证码为：" + code);//将生成的验证码缓存到redisjedisPool.getResource().setex(telephone+RedisMessageConstant.SENDTYPE_LOGIN,5 * 60,code.toString());//验证码发送成功return new Result(true,MessageConstant.SEND_VALIDATECODE_SUCCESS);}

2.1.2. 提交登录请求

（1）为登录按钮绑定事件

<div class="btn yes-btn"><a @click="login()" href="#">登录</a></div>

（2）点击登录，login方法：

//登录
login(){var telephone = this.loginInfo.telephone;if (!checkTelephone(telephone)) {this.$message.error('请输入正确的手机号');return false;}axios.post("/login/check.do",this.loginInfo).then((response) => {if(response.data.flag){//登录成功,跳转到index.htmlwindow.location.href="index.html";}else{//失败，提示失败信息this.$message.error(response.data.message);}});
}

2.2. 后台代码

2.2.1. Controller

在meinian_mobile_web工程中创建LoginController并提供check方法进行登录检查，处理逻辑为：
【路径】
1、校验用户输入的短信验证码是否正确，如果验证码错误则登录失败
2、如果验证码正确，则判断当前用户是否为会员，如果不是会员则自动完成会员注册
3、向客户端写入Cookie，内容为用户手机号

package com.atguigu.controller;import com.alibaba.dubbo.config.annotation.Reference;
import com.atguigu.constant.MessageConstant;
import com.atguigu.constant.RedisMessageConstant;
import com.atguigu.entity.Result;
import com.atguigu.pojo.Member;
import com.atguigu.service.MemberService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import redis.clients.jedis.JedisPool;
import javax.servlet.http.Cookie;
import javax.servlet.http.HttpServletResponse;
import java.util.Date;
import java.util.Map;/*** 用户登录*/
@RestController
@RequestMapping("/login")
public class LoginController {@Referenceprivate MemberService memberService;@Autowiredprivate JedisPool jedisPool;//使用手机号和验证码登录@RequestMapping("/check")public Result check(HttpServletResponse response, @RequestBody Map map){String telephone = (String) map.get("telephone");String validateCode = (String) map.get("validateCode");//1：从Redis中获取缓存的验证码，判断验证码输入是否正确String codeInRedis = jedisPool.getResource().get(telephone + RedisMessageConstant.SENDTYPE_LOGIN);if(codeInRedis == null || !codeInRedis.equals(validateCode)){//验证码输入错误return new Result(false, MessageConstant.VALIDATECODE_ERROR);}else{//验证码输入正确//2：判断当前用户是否为会员Member member = memberService.findByTelephone(telephone);if(member == null){//当前用户不是会员，自动完成注册member = new Member();member.setPhoneNumber(telephone);member.setRegTime(new Date());memberService.add(member);}//3：:登录成功//写入Cookie，跟踪用户Cookie cookie = new Cookie("login_member_telephone",telephone);cookie.setPath("/");//路径cookie.setMaxAge(60*60*24*30);//有效期30天（单位秒）response.addCookie(cookie);return new Result(true,MessageConstant.LOGIN_SUCCESS);}}
}

2.2.2. 服务接口

在MemberService服务接口中提供findByTelephone和add方法

package com.atguigu.service;
import com.atguigu.pojo.Member;
public interface MemberService {Member findByTelephone(String telephone);void add(Member member);
}

2.2.3. 服务实现类

在 MemberServiceImpl 服务实现类中实现 findByTelephone 和 add 方法
【路径】
1：使用手机号查询会员
2：新增会员

package com.atguigu.service.impl;import com.alibaba.dubbo.config.annotation.Service;
import com.atguigu.dao.MemberDao;
import com.atguigu.pojo.Member;
import com.atguigu.service.MemberService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.transaction.annotation.Transactional;@Service(interfaceClass = MemberService.class)
@Transactional
public class MemberServiceImpl implements MemberService {@Autowiredprivate MemberDao memberDao;public Member findByTelephone(String telephone) {return memberDao.findByTelephone(telephone);}public void add(Member member) {if(member.getPassword() != null){member.setPassword(MD5Utils.md5(member.getPassword()));}memberDao.add(member);}
}

导入MD5Utils.java

2.2.4. Dao接口

在 MemberDao接口中声明findByTelephone和add方法

public void add(Member member);
public Member findByTelephone(String telephone);

2.2.5. Mapper映射文件

在 MemberDao.xml 映射文件中定义SQL语句

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN""http://mybatis.org/dtd/mybatis-3-mapper.dtd" >
<mapper namespace="com.atguigu.dao.MemberDao"><!--新增会员--><insert id="add" parameterType="member"><selectKey resultType="java.lang.Integer" order="AFTER" keyProperty="id">SELECT LAST_INSERT_ID()</selectKey>insert into t_member(fileNumber,name,sex,idCard,phoneNumber,regTime,password,email,birthday,remark)values(#{fileNumber},#{name},#{sex},#{idCard},#{phoneNumber},#{regTime},#{password},#{email},#{birthday},#{remark})</insert><!--根据手机号查询会员--><select id="findByTelephone" parameterType="string" resultType="member">select * from t_member where phoneNumber = #{phoneNumber}</select>
</mapper>

登录成功之后可以查看浏览器Cookie是否写入成功。

登录成功