API服务器返回404错误

时间：2015-08-20 16:37:31

标签： mysql angularjs node.js twitter-bootstrap loopbackjs

我创建了一个使用node，loopback，ui-router和bootstrap的AngularJS webapp。

我正在使用Brackets构建我的应用程序，当我启动他们的实时预览（http://127.0.0.1:53490/index.html）时。该页面加载所有元素，但不填充正确的数据库信息。我知道loopback api和mysql数据库连接有效，因为我可以在loopback explorer中从表中推送和提取数据。问题似乎在于我的webapp和loopback之间的联系。

loopback api侦听localhost：3000，mysql端口为3306。

我也看到人们可以通过浏览localhost：3000来加载他们的webapp，但对我来说，我只看到服务器的运行时。

具体来说，我看到的错误是：获取http://127.0.0.1:53490/api/se_users 404（未找到）

我还尝试通过在＆＃39; getse_users（）＆＃39;中输入一个断点来进行调试。指向users.js代码。这表明错误出现在第10460行的angular.js文件中，xhr.onload = function requestLoaded（）＆＃39;

这是我的代码：

的index.html 

<!DOCTYPE html>
<html lang="en">

<head>
    <title>User Management Tool</title>
    <link href="bower_components/bootstrap/dist/css/bootstrap.css" rel="stylesheet">
    <script src="bower_components/jquery/dist/jquery.js"></script>
    <script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
    <script src="bower_components/angular/angular.js"></script>
    <script src="bower_components/angular-resource/angular-resource.js"></script>
    <script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
    <script src="client/js/lb-services.js"></script>
    <script src="app.js"></script>
</head>

<body ng-app="userApp">

    <!-- NAVIGATION -->
    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">User Management Tool</a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li class="active"><a ui-sref='home'>All Users <span class="sr-only">(current)</span></a></li>
                    <li><a ui-sref="create">Create a User</a></li>
                </ul>
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#">User Admin</a></li>
                </ul>
            </div>
            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container-fluid -->
    </nav>

    <div class="container">
        <div ui-view></div>
    </div>
</body>

</html>

app.js 

angular.module('userApp', ['ui.router', 'lbServices'])

.controller('UserController', ['$scope', '$state', 'Se_user', function ($scope, $state, Se_user) {
    $scope.users = [];

    function getse_users() {
        Se_user
            .find()
            .$promise
            .then(function (results) {
                $scope.users = results;
            });
    }
    getse_users();

    $scope.addSe_user = function () {
        Se_user
            .create($scope.newUser)
            .$promise
            .then(function (user) {
                $scope.newUser = '';
                $scope.userForm.content.$setPristine();
                $('.focus').focus();
                getse_users();
            });
    };

    $scope.removeUser = function (item) {
        Se_user
            .deleteById(item)
            .$promise
            .then(function () {
                getse_users();
            });
    };
}])

.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {

    $urlRouterProvider.otherwise('');

    $stateProvider

        .state('home', {
            url: '',
            templateUrl: 'partial-home.html',
            controller: 'UserController'
        })
        .state('create', {
            url: '/create',
            templateUrl: 'partial-create.html',
            controller: 'UserController'
        });
    //  .state('edit',{
    //      url:'/edit',
    //      templateUrl:'partial-edit.html',
    //      contoller: 'UserDetailController'
    //  })

}]);

局部home.html的

<div class="container-fluid">
<div class="row">
<div class="col-md-9">
<h1>All Users</h1>
</div>
<br>    
<div class="col-md-3">
    <div class="input-group">
      <input type="text" class="form-control" placeholder="Search for...">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">Go!</button>
      </span>
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->
</div><!--/.container-fluid -->

<div class="container-fluid" ng-controller="UserController as users">
            <table class="table table-hover">
                <thead>
                <tr>
                    <th>EID</th>
                    <th>First Name</th>
                    <th>Last Name</th>
                    <th>Active</th>
                </tr>
                </thead>
                <tbody>
                <tr ng-repeat="user in users">
                    <td>{{user.content}}</td>
                    <td>{{user.first_nm}}</td>
                    <td>{{user.last_nm}}</td>
                    <td>{{user.active}}</td>
                </tr>
                </tbody>
            </table>
</div>

<div ui-view></div>

user.js的

angular.module('userApp')
.controller('UserController', ['$scope', '$state', 'Se_user', function($scope, $state, Se_user) {
    $scope.users = [];
    function getSe_users() {
        Se_user
            .find()
            .$promise   
            .then(function(results){
                $scope.users = results;
        });
    }
    getSe_users();

    $scope.addSe_user = function() {
        Se_user
            .create($scope.newUser)
            .$promise
            .then(function(user){
            $scope.newUser = '';
            $scope.userForm.content.$setPristine();
            $('.focus').focus();
            getSe_users();
        });
    };

    $scope.removeUser = function(item) {
        Se_user
            .deleteById(item)
            .$promise   
            .then(function(){
            getSe_users();
        });
    };
}]);

局部create.html上

<div class="row">
<div class="col-md-8">
<h1>Create a User</h1>
    </div>
<div class="col-md-4">
    </div>
</div>
<div class="container-fluid">
    <div class="row">
        <div class="col-md-6 col-md-offset-3">
    <form name=userForm ng-submit="addSe_user()">
            <div class="form-group">
                <label for="user_id">ID</label>
                <input type="text" class="form-control" ng-model="user.user_id" placeholder="Enter EID">
                </div>
                <div class="form-group">
                <label for="first_nm">First Name</label>
                <input type="text" class="form-control" ng-model="user.user_first_nm" placeholder="Enter First Name">
                </div>
                <div class="form-group">
                <label for="last_nm">Last Name</label>
                <input type="text" class="form-control" ng-model="user.user_last_nm" placeholder="Enter Last Name">
                </div>
                <div class="form-group">
                <label for="email_adr">Email Address</label>
                <input type="text" class="form-control" ng-model="user.user_email_adr" placeholder="Enter Item Type">
                </div>
                <div class="form-group">
                <label for="user_role">Role</label>
                <input type="text" class="form-control" ng-model="user.user_role" placeholder="Enter Status Code">
                </div>
                <div class="form-group">
                <label for="user_active">Active</label>
                <div class="radio">
                <label>
                <input type="radio" name="optionsRadios" id="optionsRadios1" value="Yes" ng-model="user.user_active" checked>Yes
                </label>
                </div>
                <div class="radio">
                <label>
                <input type="radio" name="optionsRadios" id="optionsRadios2" value="No" ng-model="user.user_active">No
                </label>
                </div>
                </div>
                <div class="form-group">
                <label for="mgr_full_nm">Manager Name</label>
                <input type="text" class="form-control" ng-model="user.user_mgr_full_nm" placeholder="Enter Full Name">
                </div>
                <div class="form-group">
                <label for="mgr_eid">Manager EID</label>
                <input type="text" class="form-control" ng-model="user.user_mgr_eid" placeholder="Enter Manager EID">
                </div>
                <div class="form-group">
                <label for="insrt_dt">Insert Date</label>
                <input type="date" class="form-control" ng-model="user.insrt_dt" placeholder="Enter Date">
                </div>
                <div class="form-group">
                <label for="insrt_user_id">Insert User EID</label>
                <input type="text" class="form-control" ng-model="user.user_upd_user_id" placeholder="Enter User EID">
                </div>
                <div class="form-group">
                <label for="upd_dt">Update Date</label>
                <input type="date" class="form-control" ng-model="user.user_upd_dt" placeholder="Enter Update User Date">
                </div>
                <div class="form-group">
                <label for="upd_user_id">Update User EID</label>
                <input type="text" class="form-control" ng-model="user.upd_user_id" placeholder="Enter Update User EID">
                </div>

                <div class="btn-group btn-group-justified" role="group">
                <div class="btn-group" role="group">
                <button type="submit" class="btn btn-primary btn-lg">Submit</button>
                </div>
                </div>
        <br>
        <br>
        <pre>
        {{user | json}}
        </pre>

            </form>
        </div>
    </div>
</div>

我对编码比较陌生，并且刚刚开始自学。任何帮助表示赞赏!!

谢谢！

编辑：

其余-api.js 

module.exports = function mountRestApi(server) {
  var restApiRoot = server.get('restApiRoot');
  server.use(restApiRoot, server.loopback.rest());
};

1 个答案:

答案 0 :(得分：0)

我明白了！

当需要“http://localhost:3000/api”时，lbservices文件使用的是“/ api”的BaseURL

谢谢大家的帮助！

相关问题
最新问题