【AngularJS】简单Demo实现用户登录

实现功能：用户登录，将用户的id和密码提交给http://localhost:8080/onlyofficeeditor/validate。没有实现页面跳转功能。
补充说明：如果要想实现页面跳转的功能，应该使用ngRoute、ngProvider配合ng-view来实现。建议参考angularJS的官网和菜鸟教程以及大牛博客来学习。

JS代码：

var formApp = angular.module('formApp',[]);
formApp.controller('formCtrl',function ($scope, $http, $location) {
    $scope.user={};
    $scope.loginAction = function () {
        var host = location.host;
        $http({
            url:'http://'+host+'/onlyofficeeditor/validate',//验证表单的接口
            method:'post',
            data:{
                'userID':$scope.user.id,
                'pwd': $scope.user.pwd,
            },
            headers:{'Content-Type':'application/x-www-form-urlencoded'},
        }).success(function(data) {
            /*登录成功*/
            console.log(data);
        });
    }
});

前端代码：

<!DOCTYPE html>
<html lang="zh">
<head>
    <title>首页登录</title>
    <meta charset="utf-8" http-equiv="X-UA-Compatible" content="IE=Edge">
    <link rel="stylesheet" href="/onlyofficeeditor/css/bootstrap.min.css">  
    <link rel="stylesheet" href="/onlyofficeeditor/css/loginPage.css">
</head>

<body ng-app="formApp">
   <form id="loginFormInfo" ng-controller="formCtrl" ng-submit="loginAction()">
      <!-- 用户名 -->
      <div id="uname_text" class="form-group">
        <input type="text"  placeholder="输入账号" ng-model="user.id"  required ng-minlength="1">
      </div>
      <!-- 密码 -->
      <div id="pwd_text" class="form-group">
        <input type="password"  placeholder="输入密码"  ng-model="user.pwd" required ng-minlength="1">
      </div>

      <!-- 提交按钮 -->
      <div id="submit_bg">
        <button id="submit_btn" type="submit"  class="btn btn-secondary btn-lg" ng-disabled="loginFormInfo.$invalid">立即登录</button>
      </div> 
    </form>

<script src="/onlyofficeeditor/scripts/angular.min.js"></script>
<script src="/onlyofficeeditor/scripts/jquery-1.11.3.min.js"></script>
<script src="/onlyofficeeditor/scripts/bootstrap.js"></script>
<script src="/onlyofficeeditor/scripts/angular-route.min.js"></script>
<script src="/onlyofficeeditor/scripts/angular-cookies.min.js"></script>
<script src = "/onlyofficeeditor/scripts/myScript/loginPage.js"></script>
</body>
</html>

【AngularJS】简单Demo实现用户登录

猜你喜欢