java简易版前后端分离实现登录

首先我们要在页面引入jquery包

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

然后写一个简易的登陆页面

　　　　　　　<input name="saleUser" id="saleUser" placeholder="用户名"  type="text" lay-verify="required" >  
            <input name="salePwd" id="salePwd" lay-verify="required" placeholder="密码"  type="password" >
            <input value="登录"  style="width:100%;" type="button" onclick="return login()">

点击登录按钮，调用javascript里面的login()方法，我们要新建一个方法

    <script>
    function login(){
      var saleUser= $("#saleUser").val();　　　　//定义一个变量，它的值就是id为saleUser的输入框中的值
      var salePwd= $("#salePwd").val();
        $.ajax({
            url: "/loginCheck",                 //url访问后台方法
            type: "post",
            data:{　　　　　　　　　　　　　　　　　　//data里面是要向后台传递的数据　　

                saleUser:saleUser, 　　　　　　　　//因为登录需要用户名密码，所以我们向后台传递的就是用户名密码，":"前面的字段名就是后台方法里面传递的字段名
                salePwd:salePwd,
            },
            success:function f(result){　　　　　　//如果方法成功，因为不能直接后台跳转页面，所以我们需要后台返回的是一个值，根据这个值判断是否登录成功
                if(result=="1"){   　　　　　　　　//如果后台返回的是字符串是“1”，判定这个用户输入的用户名密码都是对的，跳转页面"/index",进入主页
                    window.location.href="/index";
                    window.event.returnValue=false; 
                }else{　　　　　　　　　　　　　　　　//如果返回其他值，则登录失败，不跳转页面，并提示"用户名密码错误"

                    window.event.returnValue=false; 
                    alert("用户名或密码错误");
                    return false;
                }
            },
        });
  }
    </script>

前端页面方法也写完了，该写后端了

　　@ResponseBody　　　　　　//必须注解 不然,方法会默认返回一个页面
    @RequestMapping("/loginCheck")
    public String loginCheck(String saleUser,String selaPwd,Model model,HttpSession session) {
        String num="";　　　　　　　　//定义一个变量
        SaleTable user=service.login(saleUser,salePwwd);　　//调用service中根据用户名密码查找数据库的方法
        if (user！=null) {　　　　　　　　　　　　　　　　　　　　　//如果查询得到的user不为为空，则说明有用户名和密码都匹配
            num="1";　　　　　　　　　　　　　　　　　　　　　　　　//如果user有值，定义的变量为"1"
            return num;　　　　　　　　　　　　　　　　　　　　　　//返回变量
        } else {
            num="0";　　　　　　　　　　　　　　　　　　　　　　　　//反之，用户名密码不匹配，或没有这个用户，定义变量为"0"
            return num;
        }
    }

这样，我们就实现了简易版前后端分离的登录方法，是不是很简单呢