标签：用户名 java 登录 saleUser 密码 简易版 num 后台 页面

首先我们要在页面引入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;
        }
    }

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

标签：用户名,java,登录,saleUser,密码,简易版,num,后台,页面
来源： https://www.cnblogs.com/cy1163565627/p/16209449.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。