使用 Angular Js 和 JSP 进行登录验证

Question

我正在制作一个 angular js - jsp 应用程序，为此我创建了一个登录页面，还创建了一个用于获取数据库并比较用户名和密码的 servlet。创建登录表单并在登录表单提交时将值传递给我的 angular 控制器。现在我需要访问比较登录的 servlet 如何将信息传递给 servlet？我为此创建了一个工厂，我还必须使用 post 方法来传递数据。

我正在粘贴代码，直到我完成为止。

HTML

<div class="container">

        <form name="myForm" novalidate class="col-md-4 col-md-offset-4">
        <h2>{{login.username}}</h2>
            <div class="form-group">
                <input type="email" ng-model="login.username" required class="form-control input-lg" placeholder="Email">
            </div>

            <div class="form-group">
                <input type="password" required ng-model="login.password"  class="form-control input-lg"
                    placeholder="Password">

            </div>

            <div class="form-group">
                <input type="submit" ng-disabled="myForm.user.$dirty && myForm.user.$invalid ||  
myForm.email.$dirty && myForm.email.$invalid"  ng-click="formSubmit(login)" class="btn btn-primary btn-lg btn-block" value="Sign In"/>
                <span><a href="#">Need help?</a></span> <span class="pull-right"><a
                    href="#">New Registration</a></span>
            </div>

        </form>

    </div>

Controller.js

var appController = angular.module('appController', []);


appController.factory('AccountGroup', ['$resource', 'Data', function ($resource, Data) {
  return $resource( 
    {
      query: {
        isArray: true,
        method: 'POST'
      }
    }
  );
}]);

appController.controller('LoginController', ['$scope','$http', function ($scope,$http) {

      $scope.formSubmit = function(item) {
          debugger;
            console.log(item);
          };


}]);

这是我的eclipse目录结构

LoginValdiator.java是用于登录比较的servlet

Answer 1

您错过了在您的表单字段上添加 name 属性，该属性通过 angular 在该字段上启用表单验证规则。

标记

<div class="container">

    <form name="myForm" novalidate class="col-md-4 col-md-offset-4">
        <h2>{{login.username}}</h2>
        <div class="form-group">
            <input type="email" name="email" ng-model="login.username" required class="form-control input-lg" placeholder="Email">
        </div>
        <div class="form-group">
            <input type="password" name="password" required ng-model="login.password" class="form-control input-lg" placeholder="Password">
        </div>

        <div class="form-group">
            <input type="submit" ng-disabled="myForm.user.$dirty && myForm.user.$invalid ||  
myForm.email.$dirty && myForm.email.$invalid" ng-click="formSubmit(login)" class="btn btn-primary btn-lg btn-block" value="Sign In" />
            <span><a href="#">Need help?</a></span> <span class="pull-right"><a
                    href="#">New Registration</a></span>
        </div>
    </form>
</div>

关于为什么需要name属性的更多信息，你可以参考我的

Answer 2

要访问 servlet，请在部署描述符文件中为该 servlet 添加 servlet 映射 (web.xml)。

例如：

<servlet>
    <servlet-name>servlet1</servlet-name>
    <servlet-class>org.mycompany.test1</servlet-class>
</servlet>
<servlet-mapping>
    <servlet-name>servlet1</servlet-name>
    <url-pattern>/path/test</url-pattern>
</servlet-mapping>

在这里你可以通过.../path/test

访问servelet

使用 Angular Js 和 JSP 进行登录验证

Login Validation Using Angular Js and JSP

java

jsp

servlets

login

angularjs