堆栈内存溢出
  繁体   English   中英

API服务器返回404错误

[英]API Server returns a 404 Error

 原文  2015-08-20 16:37:31  9   1    mysql/ angularjs/ node.js/ twitter-bootstrap/ loopbackjs

问题描述

我创建了一个使用节点，环回，ui路由器和引导程序的AngularJS Web应用程序。

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

回送api侦听localhost：3000，而mysql端口为3306。

我还看到人们可以通过单独浏览到localhost：3000来加载Web应用程序，但是对我来说，我只看到服务器的运行时。

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

我还尝试通过在users.js代码的'getse_users（）'点插入一个断点来进行调试。 这表明错误出现在“ xhr.onload = function requestLoaded（）”第10460行的angular.js文件中

这是我的代码：

的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 个解决方案

解决方案1
 0 已采纳  2015-08-24 13:50:01

我想到了！

lbservices文件需要为“ http：// localhost：3000 / api ”时，使用的URL是“ / api ”

谢谢你们每一个人的帮助！

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 没有www的服务器返回404 连接到API时解决错误404 将邮件JSON代码传递给API（codeigniter）时，邮递员（chrome app）返回500内部服务器错误 GET方法返回500内部服务器错误 Django DetailView 在真实服务器中引发 404 not found 错误 这个mysql查询返回500服务器错误 Bluemix `docker exec` 返回 404 Archlinux :: pacman phpmyadmin返回404 Flask返回错误：断开与MySQL服务器的连接，系统错误：60 服务器显示诸如禁止错误（403）或未找到错误（404）之类的错误时如何终止php中的会话
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM