使用SpringMVC+Angularjs实现登录功能

一、使用idea+maven配置Spring MVC环境

二、创建登录页面login.html


<form class="m-t" role="form" ng-app="myApp" ng-controller="regCtrl"> 
    <div class="form-group"> 
        <input type="email" class="form-control" name="username"
             id="username" placeholder="请输入用户名" ng-model="username" required="">
    </div> 
   <div class="form-group"> 
       <input type="password" name="password" id="password" 
              class="form-control" placeholder="请输入密码" ng-model="password" required=""> 
   </div> 
<button ng-submit="regis()" id="send" class="btn btn-primary block full-width m-b">登 录</button>
</from>

三、创建js文件并引用到html文件中

    angular.module("myApp",[])
            .controller("loginCtrl",function ($scope,$http) {
                $scope.userData={}
                $scope.login = function(){
                    $http({
                        method:"post",
                        url:"/user/login",
                        params:{
                            "username":$scope.userData.username,
                            "password":$scope.userData.password
                        }
                    }).success(function(data){
                        if(data.success){
                            window.location="http://localhost:8080/static/template/index.html"
                        }else{
                           document.getElementById("showError").innerHTML="用户名或密码错误";
                        }
                    }).error(function() {
                        window.location="http://localhost:8080/static/template/500.html"
                    });
                }
            })

四、编写UserController

package com.grandinsight.business.controller;

import com.grandinsight.business.model.User;
import com.grandinsight.business.service.IUserService;

@Controller
@RequestMapping("/user")
public class UserController extends SupperController { 

    @Autowired public IUserService userService; 
    @RequestMapping(value = "/login") 
    @ResponseBody 
    public String login(String username,String password){ 
          boolean result =false; 
          User user1 = userService.getUserByName(username);
            if(password.equals(user1.getPassword())){ 
                    result = true; 
            } 
              return "index" ; 
      }

五、编写Service,DAO层getUserByName()方法的代码即可实现Springmvc+AngularJS的登录功能

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容