旅游点评项目骡

最新推荐文章于 2024-07-06 01:23:09 发布

8G_maker

最新推荐文章于 2024-07-06 01:23:09 发布

阅读量66

点赞数 1

文章标签：旅游 redis java

本文链接：https://blog.csdn.net/corlinsu/article/details/125316067

版权

旅游点评项目_骡

注册

注册号码验证需求分析

在这里插入图片描述

电话号码验证

代码实现, 前端发送一个带电话号码的ajax checkPhone?phone=15151515155

后端得到电话号码,以号码为查询条件,查询是否存在该用户,返回结合前端得知需要返回的是一个Boolean值

@Controller层

@GetMapping("/checkPhone")
public Boolean checkPhone(String phone){
    return userInfoService.checkPhone(phone);
}
-------------------------------
 @Service 层
  /**
     * 利用电话号码验证账号是否能存在 然后进行注册操作
     * @param phone
     * @return true 账号存在 不予以注册  false 可以注册
     */
    Boolean checkPhone(String phone);//接口方法
	
//实现类
@Autowired
private UserInfoMapper userInfoMapper;
@Override
public Boolean checkPhone(String phone) {

    LambdaQueryWrapper< UserInfo > wrapper = Wrappers.< UserInfo >lambdaQuery();
    wrapper.eq(UserInfo::getPhone,phone);
    UserInfo userInfo = userInfoMapper.selectOne(wrapper);

    return userInfo != null;
}

数据库无此用户时跳转到信息录入界面,进行注册信息录入操作

账号注册及验证码验证

注册用户将信息输入完毕后,并且信息验证通过
点击获取验证码,此时发送一条ajax请求验证码
页面又会携带电话号码到后端,后端拿到电话号码,
需要先成随机的验证码,然后用电话号码拼接出来key值,将验证码存入redis中
拼接携带验证码的短信发送给客户
返回一个操作成功的提示信息(jsonResult)
客户填入验证码,点击注册成功使用的post请求再次发送一条提交表单信息 ,其中包括用户的电话号码
后端需要使用一个UserInfo 和verifyCode 封装值
拿到UserInfo中的电话号码拼接Key去redis中获取原先存入的verifyCode,在与用户输入verifyCode值在service层中使用的redis层的业务逻辑进行验证
如果验证正确返回一个验证的成功的jsonResult,成功后执行的添加用户的注册信息
反之返回失败的JSONResult

具体实现代码:

发送短信

@Controller
@GetMapping("/sendVerifyCode")
public JsonResult sendVerifyCode(String phone){
    userInfoRedisService.sendVerifyCode(phone);
    return JsonResult.success();
}
----------------------------------------------
 Redis_@Service
    @Override
    public void sendVerifyCode(String phone) {
    //将验证码生成然后存入到redis中

    String verifyCode = UUID.randomUUID().toString().substring(0, 5);
    redisTemplate.opsForValue().setIfAbsent(keyPrefix+phone,verifyCode, Duration.ofSeconds(120));
    //模拟 拼接短信发送给用户 具体需要使用发送短信的插件
    System.out.println( phone+"的用户请在两分钟内使用该验证码:"+verifyCode );

}

验证码验证

@Controller层
    @PostMapping("/regist")
    public JsonResult regist(UserInfo userInfo,String verifyCode){

    if (!userInfoRedisService.verifyCodeCheck(userInfo,verifyCode)) {
        return JsonResult.defaultError();
    }
    userInfoService.save(userInfo);
    return JsonResult.success();
}
 ---------------------------------
 redis_@Service
     @Override
     public Boolean verifyCodeCheck(UserInfo userInfo, String verifyCode) {

     String redisVerifyCode = redisTemplate.opsForValue().get(keyPrefix + userInfo.getPhone());
     return redisVerifyCode.equals(verifyCode);
 }

所使用java配置

MyBatisPlus mapper包路径配置
跨域访问配置,需要说明的是,该配置应该放在被访问的服务器,项目中,但如果两个子项目的使用的是同一个服务中的那么可以任意一个也是可以,前提是包路径能扫描到已经两个项目的包路径名称一样那么编译成字节码时是放置在一个文件夹中的所以

具体实现(我是将此配置放置公共子项目中的)

@Configuration
@MapperScan("cn.wolfcode.wolf2w.mapper")
@PropertySource("classpath:core.properties")
public class WebConfig {
    //被访问服务器进行设置
    //跨域访问
    @Bean
    public WebMvcConfigurer corsConfigurer() {
        return new WebMvcConfigurer() {
            @Override
            //重写父类提供的跨域请求处理的接口
            public void addCorsMappings(CorsRegistry registry) {
                //添加映射路径
                registry.addMapping("/**")
                    //放行哪些原始域
                    .allowedOriginPatterns("*")
                    //是否发送Cookie信息
                    .allowCredentials(true)
                    //放行哪些原始域(请求方式)
                    .allowedMethods("GET", "POST", "PUT", "DELETE","OPTIONS")
                    //放行哪些原始域(头部信息)
                    .allowedHeaders("*");
                //暴露哪些头部信息（因为跨域访问默认不能获取全部头部信息）.exposedHeaders("Header1", "Header2");
            }
        };
    }

JQuery注册信息验证-快速入门

使用的是JQuery语法
使用正则表达式来进行格式校验(可以根据需求来编写正则表达式)
逻辑实现是点击框时触发验证
格式错误时出现提示信息
格式正确时将提示信息消除

代码实现

<!--专注于form表单即可理清楚逻辑-->
div class="add-info">
                    <div class="hd">账号注册</div>
                    <form  method="post" id="editForm">
                        <input type="hidden" name="phone" value="" id="phone">
                        <div class="form-field m-t-10">
                            <input name="nickname" id="nickname" type="text" placeholder="字母，数字，下划线，减号" >
                            <span id="nicknamespan"></span>
                            <div class="err-tip"></div>
                        </div>
                        <div class="form-field">
                            <input name="password" id="password" type="password" placeholder="您的密码">
                            <span id="passwordspan"></span>
                            <div class="err-tip"></div>
                        </div>
                        <div class="form-field">
                            <input name="rpassword" id="rpassword" type="password" placeholder="确认密码" >
                            <span id="repasswordspan"></span>
                            <div class="err-tip"></div>
                        </div>

                        <div class="form-field">
                            <div class="clearfix">
                                <a href="#" class="vcode-send sms-code-send">获取验证码</a>
                                <input name="verifyCode" type="text" placeholder="短信验证码" autocomplete="off"class="vcode-input">
                            </div>
                            <div class="err-tip clearfix"></div>
                        </div>
                        <div class="submit-btn">
                            <button type="submit">完成注册</button>
                        </div>
                    </form>
                </div>
            </div>

   $(function () {
            $("#editForm").click(function () {
                //验证用户名
                var nameText=$("#nickname").val();
                patt=/^[a-zA-Z0-9_-]{4,16}$/;
                if (!patt.test(nameText)){
                    $('#nicknamespan').text("用户密码格式错误！");
                     return false;
                }
               //正确要把红字去掉
                $('#nicknamespan').text("");
                //验证用户密码*/
                var passwordText=$("#password").val();
                patt=/^\w{5,12}$/;
                if (!patt.test(passwordText)){
                    //$('#password').next().text('用户密码格式错误！').show()
                    $("#passwordspan").text("用户密码格式错误！");
                    return false;
                }
                //正确要把红字去掉
                 $("#passwordspan").text("");

                //验证确认密码
                var passwordText=$("#password").val();
                var repasswordText=$("#rpassword").val();
                if (passwordText!=repasswordText){

                   $("#repasswordspan").text("确认密码和用户密码不一致！");
                    return false;
                }
                //正确要把红字去掉
                $("#repasswordspan").text("");

               //验证邮箱
                var emailText=$("#email").val();
                patt=/^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
                if (!patt.test(emailText)){
                    $("#emailspan").text("用户邮箱格式错误！");
                    //return false;
                }
                //正确要把红字去掉
                $("#emailspan").text("");

            });
        });