SpringBoot+Layui+Ajax实现登录操作


前言

SpringBoot+Layui+Ajax实现登录操作验证用户输入的账号、密码、验证是否正确,向后台发送异步请求。


一、什么是 AJAX ?

AJAX = 异步 JavaScript 和 XML。

AJAX 是一种用于创建快速动态网页的技术。

通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。

传统的网页(不使用 AJAX)如果需要更新内容,必需重载整个网页面。

有很多使用 AJAX 的应用程序案例:新浪微博、Google 地图、开心网等等。

二、使用步骤

1.编辑前端界面

代码如下:

<form  class="layui-form"  >
        <input id="cuserName" name="cuserName" placeholder="用户名"  type="text" lay-verify="required" class="layui-input" >
        <hr class="hr15">
        <input id="cuserPassword" name="cuserPassword" lay-verify="required" placeholder="密码"  type="password" class="layui-input" value="123456">
        <hr class="hr15">
        <input type="text" lay-verify="required" id="captcha" name="captcha" placeholder="验证码"  class="layui-input" value="1234">
        <hr class="hr15">
        <img th:src="@{/kaptcha}" onclick="refresh()"  id="captcha_img" alt="验证码" title="点击刷新验证码" >
        <hr class="hr15">
        <input value="登录" lay-submit lay-filter="login" style="width:100%;" type="button">
        <hr class="hr20" >
    </form>

2.Ajax

代码如下:

layui.use(['form', 'layer','jquery'],
        function(){
            $ = layui.jquery;
            var form = layui.form,
            layer = layui.layer;
            //监听提交
            form.on('submit(login)',
                function(data){
                var captcha=document.getElementById("captcha").value;
                var cuserName=document.getElementById("cuserName").value;
                var cuserPassword=document.getElementById("cuserPassword").value;
                //发异步,把数据提交给后端
                $.ajax({
                    url: "/admin/login",
                    data:{
                        cuserName:cuserName,
                        cuserPassword:cuserPassword,
                        captcha:captcha
                    },
                    type:"Post",
                    dataType:"json",
                    success:function(data){
                        console.log(data);
                        if (data.result=="success"){
                            console.log("准备跳转页面");
                            location.href="/admin/index";

                        }else if (data.msg=="验证码错误"){
                            document.getElementById("captcha").value="";
                            layer.alert(data.msg);
                        }else{
                            document.getElementById("cuserName").value="";
                            document.getElementById("cuserPassword").value="";
                            layer.alert(data.msg);
                        }
                    }
            });
        });
    });

3.后台

代码如下:

@PostMapping("/login")
    @ResponseBody
    public Map<String,Object> login(HttpServletRequest request,HttpSession session,CccUser cccUser){
        Map<String,Object> map = new HashMap<>();
        System.out.println("开始ajax");
        String captcha=request.getParameter("captcha");
        System.out.println(captcha);
        String cap=session.getAttribute(Constants.KAPTCHA_SESSION_KEY).toString();//获取验证码
        if(!cap.equals(captcha)){
            System.out.println("验证对比失败");
             map.put("msg","验证码错误");
        }else{
            String md5Password = DigestUtils.md5DigestAsHex(request.getParameter("cuserPassword").getBytes());
            System.out.println(md5Password);
            cccUser.setCuserPassword(md5Password);
            cccUser.setCuserName(request.getParameter("cuserName"));
            CccUser user = this.cccUserService.loginQuery(cccUser);
            if (user!=null){
                user.setCuserPassword(null);
                session.setAttribute("user",user);
                System.out.println("--------------登录成功------------");
                map.put("result","success");
            }else{
                map.put("msg","用户名/密码错误");
            }
        }
        return map;
    }

4.结果

在这里插入图片描述

总结

期间遇到了点击按钮自动刷新页面问题,具体原因如下

button,input type=button按钮在IE和w3c浏览器区别:
1、当在IE浏览器下面时,button标签按钮,input标签type属性为button的按钮是一样的功能,不会对表单进行任何操作。
2、但是在W3C浏览器,如Firefox下就需要注意了,button标签按钮会提交表单,而input标签type属性为button不会对表单进行任何操作。
解决方法:将button标签更换为input、为button按钮增加一个type=”button”属性

  • 9
    点赞
  • 51
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
很高兴为您提供帮助。下面是一个基于SpringBootLayui、MySQL和Ajax技术实现用户登录的示例: 1. 创建SpringBoot项目,添加Layui、MyBatis、MySQL等依赖。 2. 在application.properties文件中配置MySQL连接信息: ``` spring.datasource.driver-class-name=com.mysql.jdbc.Driver spring.datasource.url=jdbc:mysql://localhost:3306/dbname?useUnicode=true&characterEncoding=utf-8&useSSL=false spring.datasource.username=root spring.datasource.password=password ``` 3. 创建User表,包含id、username和password字段。 4. 创建User类,使用Lombok注解简化代码: ``` @Data public class User { private Long id; private String username; private String password; } ``` 5. 创建UserMapper接口,使用MyBatis注解实现对User表的基本操作: ``` @Mapper public interface UserMapper { @Select("SELECT * FROM user WHERE username = #{username}") User findByUsername(String username); } ``` 6. 在UserController中编写处理用户登录请求的方法,并使用Ajax提交登录表单: ``` @Controller public class UserController { @Autowired private UserMapper userMapper; @PostMapping("/login") @ResponseBody public Result login(User user) { User loginUser = userMapper.findByUsername(user.getUsername()); if (loginUser == null) { return Result.fail("该用户不存在"); } if (!loginUser.getPassword().equals(user.getPassword())) { return Result.fail("密码不正确"); } return Result.ok(); } } ``` 7. 在前端页面中使用Layui的form组件实现登录表单,并使用jQuery和Ajax发送登录请求: ``` <form class="layui-form" action="#"> <div class="layui-form-item"> <label class="layui-form-label">用户名</label> <div class="layui-input-block"> <input type="text" name="username" required lay-verify="required" autocomplete="off" placeholder="请输入用户名" class="layui-input"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">密码</label> <div class="layui-input-block"> <input type="password" name="password" required lay-verify="required" autocomplete="off" placeholder="请输入密码" class="layui-input"> </div> </div> <div class="layui-form-item"> <div class="layui-input-block"> <button class="layui-btn" lay-submit lay-filter="login">登录</button> </div> </div> </form> <script> layui.use(['form'], function(){ var form = layui.form, $ = layui.jquery; //监听提交 form.on('submit(login)', function(data){ $.ajax({ url: '/login', type: 'POST', data: data.field, success: function(res) { if (res.code === 0) { layer.msg('登录成功'); } else { layer.msg(res.msg); } } }); return false; }); }); </script> ``` 这样,用户登录功能就完成了。用户输入用户名和密码后,前端使用Ajax向后端发送登录请求,后端根据用户名和密码查询User表,如果查询到了该用户,则返回登录成功的消息。如果查询不到该用户或密码不正确,则返回相应的错误消息。前端接收并提示用户。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值