2015-07-21 87 views
-1

我得到一個錯誤,指出:找不到文件404,而在HTML文件中使用腳本SRC標籤

無法加載資源:服務器與404狀態(未找到)

迴應我試圖加載它的HTML文件中的

遵循的軌跡:

Error: Not Found 
     at C:\Users\dev4\Desktop\Sample\server.js:48:13 
     at Layer.handle [as handle_request] (C:\Users\dev4\Desktop\Sample\node_modules\express\lib\router\layer.js:95:5) 
     at trim_prefix (C:\Users\dev4\Desktop\Sample\node_modules\express\lib\router\index.js:312:13) 
     at C:\Users\dev4\Desktop\Sample\node_modules\express\lib\router\index.js:280:7 
     at Function.process_params (C:\Users\dev4\Desktop\Sample\node_modules\express\lib\router\index.js:330:12) 
     at next (C:\Users\dev4\Desktop\Sample\node_modules\express\lib\router\index.js:271:10) 
     at SendStream.error (C:\Users\dev4\Desktop\Sample\node_modules\express\node_modules\serve-static\index.js:120:7) 
     at SendStream.emit (events.js:107:17) 
     at SendStream.error (C:\Users\dev4\Desktop\Sample\node_modules\express\node_modules\send\index.js:245:17) 
     at SendStream.onStatError (C:\Users\dev4\Desktop\Sample\node_modules\express\node_modules\send\index.js:356:12) 
     at onstat (C:\Users\dev4\Desktop\Sample\node_modules\express\node_modules\send\index.js:621:26) 
     at FSReqWrap.oncomplete (fs.js:95:1 

5) 

HTML文件: 據app.html調用,加載爲默認的HTML文件。

<!DOCTYPE HTML> 
<html ng-app="Todo"> 
<head> 
    <meta charset="UTF-8"> 
    <title>DemoAPI</title> 

    <meta name="viewport" content="width=device-width, initial-scale=1"><!-- Optimize mobile viewport --> 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"/> 
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script> 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script> 

<!--<link rel="stylesheet" href="./Client/css/styling.css" />--> 
<!--<script type="text/javascript" src="/Client/public/core.js"></script>--> 


<script type="text/javascript" src="/core.js"></script> 


</head> 
<body> 

<div class="navbar navbar-default navbar-static-top" role="navigation"> 
    <div class="navbar-header"> 
    <a class="navbar-brand" href="/"> 
     Demp<strong>API</strong></a> 
    </div> 

</div> 
<div ng-controller="mainController"> 
<form name="userForm" ng-submit="createTodo()" novalidate> 
    <div class="row col-lg-offset-3"> 
     <div class="form-group col-lg-6" ng-class="{ 'has-error': userForm.name.$invalid && userForm.name.$dirty}" > 
     <label class="control-label">Name</label> 
     <input type="text" class="form-control" name="name" ng-model="user.name" ng-required="true" ng-minlength="3" placeholder="Name" /> 
     <span class="error-message" ng-show="userForm.name.$dirty 
     && userForm.name.$error.required">You are required to provide your name</span> 

     <span class="error-message" ng-show="userForm.name.$dirty 
     && userForm.name.$error.minlength">Your name should contain 3 or more characters</span> 
     </div> 
     </div> 
     <div class="row col-lg-offset-3"> 
     <div class="form-group col-lg-6" ng-class="{ 'has-error': userForm.band.$invalid && userForm.band.$dirty }" > 
     <label class="control-label">Band</label> 
     <input type="text" class="form-control" name="email" ng-model="user.band" ng-required="true" placeholder="Your Band Name" /> 
     <span class="error-message" ng-show="userForm.email.$dirty 
     && userForm.name.$error.required">You are required to provide your Band name </span> 
     </div> 
     </div> 


     <div class="row col-lg-offset-3"> 
     <div class="form-group col-lg-6" ng-class="{ 'has-error': userForm.instrument.$invalid && userForm.instrument.$dirty }" > 
     <label class="control-label">Instrument</label> 
     <input type="text" class="form-control" name="instrument" ng-model="user.instrument" ng-required="true" placeholder="The Instrument you play" /> 
     <span class="error-message" ng-show="userForm.instrument.$dirty 
     && userForm.name.$error.required">You are required the instrument you play </span> 
     </div> 
     </div> 


    <div class="row col-lg-offset-3"> 
     <button class="btn btn-primary" 
     ng-disabled="userForm.$invalid" 
     type="submit">Save</button> 

     </div> 

</form> 
    </div> 




</body> 
</html> 

Javascript文件:這是名稱core.js並放在與app.html相同的文件夾中。

angular.module('Todo', []) 

.controller('mainController', function($scope, $http) 
{ 
    $scope.formData = {}; 

    // get all and show them 
    $http.get('/musicians') 
     .success(function(data) { 
      $scope.todos = data; 
      console.log(data); 
     }) 
     .error(function(data) { 
      console.log('Error: ' + data); 
     }); 

     //get with an id 
     $scope.getOneTodo = function() { 
     $http.get('/musicians' + id) 
      .success(function(data) { 
       $scope.todos = data; 
         console.log(data); 
      }) 
      .error(function(data) { 
       console.log('Error: ' + data); 
      }); 
    }; 
     // send the text to the node API 
    $scope.createTodo = function() { 
     $http.post('/musicians', $scope.formData) 
      .success(function(data) { 
       $scope.formData = {}; // clear the form 
       $scope.todos = data; 
       console.log(data); 
      }) 
      .error(function(data) { 
       console.log('Error: ' + data); 
      }); 
    }; 

    // delete 
    $scope.deleteTodo = function(id) { 
     $http.delete('/musicians' + id) 
      .success(function(data) { 
       $scope.todos = data; 
         console.log(data); 
      }) 
      .error(function(data) { 
       console.log('Error: ' + data); 
      }); 
    }; 

    /* 
    $scope.updateTodo = function(id) { 
     $http.delete('/musicians' + id) 
      .success(function(data) { 
       $scope.todos = data; 
         console.log(data); 
      }) 
      .error(function(data) { 
       console.log('Error: ' + data); 
      }); 
    };*/ 

}); 

server.js看起來是這樣的:

var express = require('express'); 
var path = require('path'); 
//var favicon = require('serve-favicon'); 
var logger = require('morgan'); 
var cookieParser = require('cookie-parser'); 
var bodyParser = require('body-parser'); 
var mongoose = require('mongoose'), 
fs = require('fs'); 

var app = express(); 

var mongoUri = 'mongodb://localhost/DemoDB'; 


mongoose.connect(mongoUri); 
var db = mongoose.connection; 
db.on('error', function() { 
    throw new Error('unable to connect to database at ' + mongoUri); 
}); 



// view engine setup 
app.set('views', path.join(__dirname, 'views')); 
app.set('view engine', 'jade'); 

// uncomment after placing your favicon in /public 
//app.use(favicon(path.join(__dirname, 'public', 'favicon.ico'))); 
app.use(logger('dev')); 
app.use(bodyParser.json()); 
app.use(bodyParser.urlencoded({ extended: false })); 
app.use(cookieParser()); 
app.use(express.static(path.join(__dirname, 'public'))); 

//app.use('/musicians',custom); 
require('./models/musician'); 
require('./routes/routes')(app); 

//page change at front end 


app.get('/', function(req, res) { 
     res.sendfile('app.html'); 
    }); 

// catch 404 and forward to error handler 
app.use(function(req, res, next) { 
    var err = new Error('Not Found'); 
    err.status = 404; 
    next(err); 
}); 







app.listen(3000, function() { 
    console.log("Listening on 3000"); 
}); 
module.exports = app; 
+5

你怎麼能指望我們來幫助你,當我們看到的只是一條錯誤信息?請發佈[mcve]。 – Cerbrus

+0

@Cerbrus:用代碼更新。 –

+0

錯誤發生在這裏:'Not Found at C:\ Users \ dev4 \ Desktop \ Sample \ server.js:48:13'因此請顯示'server.js' - 顯然... –

回答

1

在server.js,後

app.get('/', function(req, res) { 
    res.sendfile('app.html'); 
}); 

添加

app.get('/core.js', function(req, res) { 
    res.sendfile('core.js'); 
}); 
+0

沒有什麼區別。 –

+0

你在哪裏添加它? – Inkbug

+0

我把它放在與app.html相同的文件夾中,app.html是應用程序的根文件夾。 –

相關問題