博学谷 > 资讯 > Java > JavaEE实战项目手机快速登录讲解

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

发布时间:2020-04-22 12:06:56 浏览 1070 来源:博学谷 作者:照照

    今天要讲解的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、后台代码

     

    1Controller

     

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

     

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

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

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

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

     

    2)服务接口

     

    MemberService服务接口中提供findByTelephoneadd方法

     

    public void add(Member member);

    public Member findByTelephone(String telephone);

     

    3)服务实现类

     

    MemberServiceImpl服务实现类中实现findByTelephoneadd方法

     

    JavaEE实战项目

     

    4Dao接口

     

    public Member findByTelephone(String telephone);

    public void add(Member member);

     

    5Mapper映射文件

     

    <!--新增会员-->

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

    申请免费试学名额    

在职想转行提升,担心学不会?根据个人情况规划学习路线,闯关式自适应学习模式保证学习效果
讲师一对一辅导,在线答疑解惑,指导就业!

领取成功
领取失败
上一篇:Java开发工程师的工资为什么这么高? 下一篇:Neo4j实战课程内容介绍

相关推荐 更多

最新文章

扫描二维码,回复"Java"获取180G资料包