Springboot登陆页面遇到的坑

springboot+ thymeleaf+security+ajax

跳转页面model的值无法传递到前端页面

登陆页面如图
在这里插入图片描述
form表单:

 <form class="layui-form" th:action="@{/user/login}" method="post">
 <p style="color: red ;text-align: center;"  th:text="${lmsg}"th:if="${not #strings.isEmpty(lmsg)}" ></p>
 .........
 </form>

验证用户名和密码是否正确,否则提示“用户名密码错误”到p标签中

sessionn.setAttribute("lmsg", "用户名或密码错误");

正常来说应该用model.addAttribute()存放数据,但是跳转页面用的重定向,model的值无法传递到前端页面,我就偷了个懒,用session存放的数据,但弊端是一旦登陆失败,刷新登录页面,该数据依旧存在
在这里插入图片描述
这好嘛,这不好。
于是我在写完项目之后回过头又完善了一遍

model.addAttribute("lmsg", "用户名或密码错误");

跳转页面不用重定向,同时采用model存放数据
然后,测试了一遍,唉没问题,当我在登陆错误的页面再次登陆错误之后,问题来了


登陆失败返回登陆页面报404错误

在这里插入图片描述
emmmm,大家注意看上图的地址,是/user/user/login
,于是我就改了一下地址

    @RequestMapping("/login")

从/user/login改成了/login
然后,问题解决!登陆失败一万次地址栏还是/login,并不会user/循环。


ajax实现输入用户名之后判断用户名是否存在

控制层代码

    @RequestMapping("/user/name")
    @ResponseBody
    public String nameIsRepeat(String gname,Model model){
        String text;
        //查找表单提交的用户名是否存在,存在返回ok,不存在返回用户名不存在
        Graduate userByName = dao.findUserByName(gname);
        text = (userByName!=null?"ok":"用户名不存在");
        return text;
    }

ajax代码

<script>
        function f1() {
            $.post("/user/name", {"gname": $("#gname").val()}, function (data) {
                if (data.toString() == "ok") {
                //#是按id查找
                    $("#gname").css("color", "green")
                    $("#pp0").html(" ");
                } else {
                    $("#gname").css("color", "red");
                    $("#pp0").html(data.toString());
                }
            })
        }
    </script>

表单代码

<input type="text" id="gname" name="gname" required onblur="f1()" lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">
<p  id="pp0"  style="color: red ;text-align: center;"></p>

图示

  • 当用户存在时
    在这里插入图片描述
  • 当用户不存在时
    在这里插入图片描述

注意事项:

  • ajax后跟三个参数,分别为提交的url传给控制层的参数提交成功执行的方法,其中data接受的就是控制层返回的text
  • 控制层要加@ResponseBody注解
  • 控制层传入的参数gname必须和ajax{“gname”: $("#gname").val()}冒号左侧同名
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值