登录的anglarJS使用，简单易懂_$scope.getuser-优快云博客

本文介绍了一个使用AngularJS实现的简单登录页面示例，并展示了如何通过JavaScript和HTML进行前后端交互来完成用户验证过程。


//首先就是界面里的操作

<html ng-app="" lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <title>登录</title>
    <script src="/js/angular-1.0.1.min.js"></script>
</head>
<body ng-controller="myController">
用户名：<input type="text" name="email" id="email" ng-model="user.email"/><br/>
密码：<input type="password" name="userPassword" id="password" ng-model="user.userPassword"/><br/>
<button ng-click="getUser()">登录</button>
</body>
<script>
    function myController($scope, $http){
        //复初值
        $scope.user = {
            email:"2399968819@qq.com",
            userPassword:"123"
        };

        $scope.getUser = function(){
            $http({
                method: "POST",
                url: "/user/login2.action",
                data: $scope.user,
                dataType:"json"
            }).success(function (data){
                if(data.flag == 1)
                {
                    window.location.href = "/user/userhtml.action";
                }
                else
                {
                    alert("登录失败");
                }
            }).error(function(){
                alert("登录失败");
            })
        };
    }
</script>
</html>


//之后是Controller


@RequestMapping(value = "/login2",method = RequestMethod.POST)
@ResponseBody
public Map<String,Object> login2(@RequestBody User user, HttpSession session){
    Map<String,Object> map = new HashMap<>();
    User my = new User();
    my.setEmail(user.getEmail());
    my.setUserPassword(user.getUserPassword());
    my =isService.login(my);
    user.setEmail(user.getEmail());
    user.setUserPassword(user.getUserPassword());
    my =isService.login(user);
    session.setAttribute("user", my);
    if(my!=null){
        map.put("flag",1);
    } else{
        map.put("flag",0);
    } return map;
}

//这就是简单的登录