在HTML文件中使用脚本SRC标签时，没有找到404
file not found 404 while using script src tag in html file
我得到一个错误说:
加载资源失败:服务器响应404 (Not Found)状态
在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;
在server.js中
之后app.get('/', function(req, res) {
res.sendfile('app.html');
});
app.get('/core.js', function(req, res) {
res.sendfile('core.js');
});
相关文章：
- 在<script src=“"></脚本>标签
- 使用json数据更改视频标签中的src属性
- 如何通过单击更改对象标签 src
- 图片标签获胜't接受src
- 使用jQuery通过更改src属性来设置一个图像标签的动画
- 类似于htmls<script src=“">xaml的标签
- 使用angularjs交换图像标签中的ng-src属性
- 用JavaScript更改
标签src
- 使用 javascript 从图像数组中更改 img 标签 src.骰子游戏
标签和新的Image(）.src有什么区别
- 如何在
标签中获取来自 ng 控制器的 'src' 的数据
- 将 src 注入到 HTML5 的音频标签中
- 将图像从 img 标签的 src 上传到 php
- 脚本标签的动态创建和 src 加载在 ie10 中不起作用
- 如何在区域标签中更改 img 的 src
- 如何使用来自 IP 网络摄像头应用程序的 jpeg 流作为 html5 视频标签中的 src
- 尝试使用 javascript 更改音频标签的 src
- 如何从图片标签中获取“src”属性
- 谷歌标签管理器添加&instrad of just&转换为脚本src
- 在souce代码中的视频标签src属性中显示不同的URL或隐藏URL
