API Server returns a 404 Error

问题

I have created an AngularJS webapp that uses node, loopback, ui-router, and bootstrap.

I am building my app using Brackets and when I launch their live preview (http://127.0.0.1:53490/index.html). The page loads all elements but does not populate the proper database information. I know that the loopback api and mysql database connection works because I can push and pull data from the table in the loopback explorer. The issue seems to be in the connection between my webapp and loopback.

The loopback api listens at localhost:3000 and the mysql port is 3306.

I have also seen that people can load their webapp by browsing to localhost:3000 alone, but for me I just see the runtime of the server.

Specifically, the error I am seeing is this: GET http://127.0.0.1:53490/api/se_users 404 (Not Found)

I also tried to debug by throwing in a breakpoint at the 'getse_users()' point in the users.js code. This showed that the error appears in the angular.js file at line 10460 at 'xhr.onload=function requestLoaded()'

Here is my code:

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'
    //  })

}]);

partial-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();
        });
    };
}]);

partial-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>

I am relatively new to coding and have really just begun to teach myself. Any help is appreciated!!

Thanks!!

EDIT:

rest-api.js

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

回答1:

I figured it out!

The lbservices file was using a BaseURL of "/api" when it needed to be "http://localhost:3000/api"

Thank you everyone for your help!

来源：https://stackoverflow.com/questions/32123713/api-server-returns-a-404-error

标签

mysql

angularjs

node.js

twitter-bootstrap

loopbackjs