springmvc--登录的实现

最新推荐文章于 2024-05-31 18:48:10 发布

EricaLSR

最新推荐文章于 2024-05-31 18:48:10 发布

阅读量840

点赞数 1

分类专栏： ------SpringMVC

本文链接：https://blog.csdn.net/lishaoran369/article/details/55510204

版权

------SpringMVC 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

以前写登录，习惯用ajax，感觉很方便。看了taotao之后就不这么认为了，原来还有用POST提交的。还学习到了用js封装对象使用。

页面如下：

<form id="formlogin" method="post" οnsubmit="return false;">
    <div class=" w1" id="entry">
        <div class="mc " id="bgDiv">            
<div class="form ">
                <div class="item fore1">
                    <span>用户名</span>
                    <div class="item-ifo">
                        <input type="text" id="loginname" name="username" class="text"  tabindex="1" autocomplete="off"/>
                    </div>
                </div>
              
                <div class="item fore2">
                    <span>密码</span>
                    <div class="item-ifo">
                        <input type="password" id="nloginpwd" name="password" class="text" tabindex="2" autocomplete="off"/>
                    </div>
                </div>
                <div class="item login-btn2013">
                    <input type="button" class="btn-img btn-entry" id="loginsubmit" value="登录" tabindex="8" />
                </div>
            
        </div>
        </div>
    </div>
</form>

采用的是form表单的提交：

所以用的是<form id="formlogin"method="post" οnsubmit="return false;">

js如下：（先用js定义一个对象，里面有，登录的方法：dologin 和Login方法以及输入验证）

var LOGIN = {
        checkInput:function() {
                if ($("#loginname").val() == "") {
                        alert("用户名不能为空");
                        $("#loginname").focus();
                        return false;
                }
                if ($("#nloginpwd").val() == "") {
                        alert("密码不能为空");
                        $("#nloginpwd").focus();
                        return false;
                }
                return true;
        },
        doLogin:function() {
                $.post("/user/login", $("#formlogin").serialize(),function(data){
                        if (data.status == 200) {
                                alert("登录成功！");
                        } else {
                                alert("登录失败，原因是：" + data.msg);
                                $("#loginname").select();
                        }
                });
        },
        login:function() {
                if (this.checkInput()) {
                        this.doLogin();
                }
        }
        
};

然后就是页面加载的时候，获取button的id的点击事件，用来调用这个LOGIN对象的登录方法：

$(function(){
	$("#loginsubmit").click(function(){
		LOGIN.login();
	});
});

最后在 controller 的时候获取登录的用户名和密码，进行查询：

@Controller
@RequestMapping("/user")
public class UserController {
        @Autowired
        private UserService userService;
        //用户登录
        @RequestMapping(value="/login", method=RequestMethod.POST)
        @ResponseBody
        public TaotaoResult userLogin(String username, String password,
                HttpServletRequest request, HttpServletResponse response) {
                try {
                        
                        TaotaoResult result = userService.userLogin(username, password, request, response);
                        return result;
                } catch (Exception e) {
                        e.printStackTrace();
                        return TaotaoResult.build(500, ExceptionUtil.getStackTrace(e));
                }
        }
}

ok了！