SpringBoot实现登录验证操作(一)

Spring的学习笔记还写差AOP（面向切面编程）的内容，因为最近忙着学习写后台接口的内容，就先搁置一下。既然学习和操作了，那不记录起来也就少了一份收获。此次用的是SpringBoot来做后台接口的开发。接下来记录登录接口和页面的代码实现。

一、前端页面的编写

这里实现了一个最简单的页面，表单包括的两个输入框、一个登录按钮用于输入用户名和密码。
（代码和实现效果图）
然后是前端js的代码实现，思路是获取到两个输入框的值（这里只做了简单的判断，输入值是否为空，可根据需要增加认证条件），然后调用后台接口把值传过去，后台做认证操作。

$("#login").click(function () {
        // alert("hello");
        var username =document.getElementById('username').value;
        // alert(username.id)
        if(null == username || "" === username) {
            alert("请输入用户名");
            return;
        }
        var password =document.getElementById('password').value;
        if(null == password || "" === password) {
            alert("请输入密码");
            return;
        }
        //调用登录接口
        $.ajax({
            url : "http://localhost:8080/userLoginTest",
            type : "POST",
            data : {
                "username":username,
                "password":password
            },
            dataType : "json",//后台返回来的数据类型
            //contentType: "application/json;charset=UTF-8",
            success : function(data) {
                //后台返回数据
                if (data.status === 'ok') {
                    alert(data.message);
                    window.location.href = "/index";
                }
                else {
                    alert("用户名或密码错误，请仔细检查~~");    //登录失败
                }
            },
            error:function (data) {
                alert("用户名或密码错误！" + data.message)
            }
        });
    });

二、后台接口的实现

这里就贴一下简单验证的接口实现代码吧，Mapper和Sevice的方法就不贴上来了， 就是简单的在数据库中查询有没有相应用户。

@PostMapping("/userLoginTest")
    @ResponseBody
    public String userLoginTest(HttpServletRequest request, HttpSession session, @RequestParam Map<String, String> parameter) {
        // 获取前端传来的username字段，必须与输入框的id值相同
        String username = request.getParameter("username");
        // 获取前端传来的password字段，必须与输入框的id值相同
        String password = request.getParameter("password");

        // 这里可以做个控制台输出获取的字段值
        System.out.println("用户名：" + username + " " + "密码：" + password);
        UserInfo userInfo;
        try {
            // 执行自定义的Mapper类中的查询方法
            userInfo = userService.getUser(username, password);

            // 后台做简单判断，是否获取相应用户
            if (userInfo != null) {
                // 把当前用户信息存到session里，用于后续操作
                session.setAttribute("userInfo", userInfo);
                // 返回给前端的数据设置（登录成功）
                parameter.put("message", "登录成功");
                parameter.put("status", "ok");
            }
        } catch (Exception e) {
            // 返回给前端的数据设置(登录失败)
            parameter.put("message", "登录失败，用户不存在");
            parameter.put("status", "no");
        }
        return JSON.toJSONString(parameter);
    }

三、成功效果

以上就是简单的springboot写的登录操作接口实现和前端代码实现，这里的认证有点太简单，而且需要自己写认证的操作，下一篇会记录SpringBoot整合Shiro来实现登录认证和页面拦截功能（即没登录成功就不能进入index首页等）。