原创 JavaEE实战项目手机快速登录讲解

今天要讲解的JavaEE实战项目是一款应用于健康管理机构的业务系统，它叫做传智健康，能够实现健康管理机构工作内容可视化、会员管理专业化、 健康评估数字化、健康干预流程化、知识库集成化，从而提高健康管理师的工作效率，加强与会员间的互动，增强管理者对健康管理机构运营情况的了解。下面我们来一起看看传智健康实战项目的移动端开发内容，主要包括了需求分析和手机快速登录。

一、需求分析

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

二、手机快速登录

1、页面调整

登录页面为/pages/login.html

（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>

<script>

var vue = new Vue({

el:'#app',

data:{

loginInfo:{}//登录信息

},

methods:{

//发送验证码

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('验证码发送失败，请检查手机号输入是否正确');

}

});

}

}

});

</script>

在ValidateCodeController中提供send4Login方法，调用短信服务发送验证码并将验证码保存到redis

//手机快速登录时发送手机验证码

@RequestMapping("/send4Login")

try {

//发送短信

SMSUtils.sendShortMessage(SMSUtils.VALIDATE_CODE,telephone,code.toString());

} catch (ClientException e) {

e.printStackTrace();

//验证码发送失败

return new Result(false, MessageConstant.SEND_VALIDATECODE_FAIL);

}

System.out.println("发送的手机验证码为：" + code);

//将生成的验证码缓存到redis

jedisPool.getResource().setex(telephone+RedisMessageConstant.SENDTYPE_LOGIN,

5 * 60,

code.toString());

//验证码发送成功

return new Result(true,MessageConstant.SEND_VALIDATECODE_SUCCESS);

}

（2）提交登录请求

为登录按钮绑定事件

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

//登录

login(){

var telephone = this.loginInfo.telephone;

if (!checkTelephone(telephone)) {

this.$message.error('请输入正确的手机号');

return false;

}

axios.post("/member/login.do",this.loginInfo).then((response) => {

if(response.data.flag){

//登录成功,跳转到会员页面

window.location.href="member.html";

}else{

//失败，提示失败信息

this.$message.error(response.data.message);

}

});

}

2、后台代码

（1）Controller

在health_mobile工程中创建MemberController并提供login方法进行登录检查，处理逻辑为：

a、校验用户输入的短信验证码是否正确，如果验证码错误则登录失败

b、如果验证码正确，则判断当前用户是否为会员，如果不是会员则自动完成会员注册

c、向客户端写入Cookie，内容为用户手机号

d、将会员信息保存到Redis，使用手机号作为key，保存时长为30分钟

（2）服务接口

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

public void add(Member member);

public Member findByTelephone(String telephone);

（3）服务实现类

在MemberServiceImpl服务实现类中实现findByTelephone和add方法

（4）Dao接口

public Member findByTelephone(String telephone);

public void add(Member member);

（5）Mapper映射文件

<!--新增会员-->

<insert id="add" parameterType="com.itheima.pojo.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})

<select id="findByTelephone" parameterType="string"

resultType="com.itheima.pojo.Member">

select * from t_member where phoneNumber = #{phoneNumber}

</select>

以上就是JavaEE实战项目手机快速登录的讲解，如果大家对传智健康项目感兴趣，不妨自己尝试着做一做。如果有任何问题，都可以在博学谷上咨询在线老师，报名学习实战项目的课程。