Javascript 加载资源失败:服务器响应nodejs的状态为404(未找到)
我试图在nodejs服务器上获取html元素数据。但我在浏览器中不断遇到很多错误。这是我的html页面。Javascript 加载资源失败:服务器响应nodejs的状态为404(未找到),javascript,jquery,css,node.js,jquery-ui,Javascript,Jquery,Css,Node.js,Jquery Ui,我试图在nodejs服务器上获取html元素数据。但我在浏览器中不断遇到很多错误。这是我的html页面。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>SimplyBPM | Customer 360 CRM | Da
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>SimplyBPM | Customer 360 CRM | Dashboard</title>
<!-- Tell the browser to be responsive to screen width -->
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<!-- Bootstrap 3.3.5 -->
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<!-- Ionicons -->
<link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<!-- Theme style -->
<link rel="stylesheet" href="assets/css/AdminLTE.min.css">
<!-- AdminLTE Skins. Choose a skin from the css/skins
folder instead of downloading all of them to reduce the load. -->
<link rel="stylesheet" href="assets/css/skins/_all-skins.min.css">
<!-- SB css -->
<link rel="stylesheet" href="assets/css/sbCustom.css">
</head>
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">
<!-- Header -->
<div class="sbIncludeHTML" title="header.html">Include HTML here</div>
<!-- Left Nav -->
<div class="sbIncludeHTML" title="leftNav.html">Include HTML here</div>
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
<!-- Content Header (Page header) -->
<section class="content-header">
<h1>Customer 360 CRM <small>Dashboard</small></h1>
</section>
<!-- Main content -->
<section class="content">
<!-- Small boxes (Stat box) -->
<div class="row">
<div class="col-lg-3 col-xs-6"> <!-- Box1 -->
<!-- small box -->
<div class="small-box bg-aqua">
<div class="inner"><h3>9</h3><p>Unassigned</p></div>
<div class="icon"><i class="ion ion-email-unread"></i></div>
<a style="cursor:pointer;" class="small-box-footer" onclick="filterList('ALL',0)">Show all <i class="fa fa-arrow-circle-right"></i></a>
</div>
</div><!-- ./Box1 -->
<div class="col-lg-3 col-xs-6"> <!-- Box2 -->
<!-- small box -->
<div class="small-box bg-green">
<div class="inner"><h3>3</h3><p>My Incidents</p></div>
<div class="icon"><i class="ion ion-ios-list"></i></div>
<a style="cursor:pointer;" class="small-box-footer" onclick="filterList('MYRECORDS',0)">Show all <i class="fa fa-arrow-circle-right"></i></a>
</div>
</div><!-- ./Box2-->
<div class="col-lg-3 col-xs-6"> <!-- Box3 -->
<!-- small box -->
<div class="small-box bg-yellow">
<div class="inner"><h3>2</h3><p>New Incidents</p></div>
<div class="icon"><i class="ion ion-ios-telephone"></i></div>
<a style="cursor:pointer;" class="small-box-footer" onclick="filterList('NEW',0)">Show all <i class="fa fa-arrow-circle-right"></i></a>
</div>
</div><!-- ./Box3 -->
<div class="col-lg-3 col-xs-6"> <!-- Box4 -->
<!-- small box -->
<div class="small-box bg-red">
<div class="inner"><h3>4</h3><p>Follow-up Today</p></div>
<div class="icon"><i class="ion ion-ios-bell"></i></div>
<a style="cursor:pointer;" class="small-box-footer" onclick="filterList('FOLLOWUPTODAY',0)">Show all <i class="fa fa-arrow-circle-right"></i></a>
</div>
</div><!-- ./Box4 -->
</div><!-- /.row -->
<!-- Main row -->
<div class="row">
<!-- Left col -->
<section class="col-lg-8 connectedSortable">
<!-- Search Options -->
<div class="box box-primary">
<div class="box-header"><span class="glyphicon glyphicon-search"></span><h3 class="box-title">Search</h3></div>
<div class="box-body">
<div class="form-inline">
<!-- Search ID box -->
<div class="col-lg-7 col-md-7 col-sm-12 col-xs-12">
<div class="form-group">
<label for="INCIDENT_ID">Incident Search ID:</label>
<input type="text" class="form-control sbDataFields" id="INCIDENT_ID" placeholder="Search ID">
</div>
</div>
<!-- Search Button -->
<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
<div class="form-group">
<button type="button" name="search" id="search-btn1" class="btn btn-primary" onclick="searchRecord();">Search</button>
<button type="button" onclick="window.location='incidentSearch.html'" name="search" id="search-btn2" class="btn btn-primary" >Advanced</button>
</div>
</div>
</div>
</div> <!-- ./Box Body -->
</div> <!-- End of Search Box ./box-primary -->
<!-- Table of Incidents -->
<div class="box box-primary">
<!-- box-header -->
<div class="box-header"><span class="glyphicon glyphicon-th-list"></span>
<h3 class="box-title">Incident Table</h3>
</div><!-- /.box-header -->
<!-- Table values -->
<div class="box-body table-responsive">
<table class="table table-hover" id="incidentList">
<thead>
<tr>
<th>Alert</th>
<th>Priority</th>
<th>Incident ID</th>
<th>Description</th>
<th>Type</th>
<th>Status</th>
<th>Created On</th>
<th>Assigned To</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<div class="box-tools pull-right">
<ul class="pagination pagination-sm inline" id="pagination"> <!-- Scroll Buttons -->
</ul>
</div>
</div><!-- /.box-body -->
</div><!-- /.box-primary -->
</section><!-- /.Left col -->
<!-- right col (We are only adding the ID to make the widgets sortable)-->
<section class="col-lg-4 connectedSortable">
<!-- Chat box -->
<div class="sbIncludeHTML" title="notes.html">Include HTML here</div>
</section><!-- right col -->
</div><!-- /.row (main row) -->
</section><!-- /.content -->
</div><!-- /.content-wrapper -->
<input type="text" value="" id="CURRENT_FILTER_TYPE" style="display:none"/>
<!-- Main Footer -->
<footer class="main-footer">
<div class="pull-right hidden-xs">
<b>Version</b> 2.3.0
</div>
<strong>Copyright © 2015-2016 <a href="http://www.cgsits.com/simplybpm">CGS IT Solutions</a>.</strong> All rights reserved.
</footer> <!-- ./Main Footer -->
</div><!-- ./wrapper -->
<div class="modal fade" id="pleaseWaitDialog" tabindex="-1" role="dialog" aria-labelledby="pleaseWaitDialogLabel">
<div class="modal-dialog" role="document">
<div class="row">
<div class="col-sm-12">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="pleaseWaitDialogLabel">Processing...</h4>
</div>
<div class="modal-body">
<div class="progress progress-striped active">
<div class="progress-bar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width: 100%;">
<span class="sr-only">70% Complete</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- jQuery 2.1.4 -->
<script src="assets/js/jQuery-2.1.4.min.js"></script>
<!-- Bootstrap 3.3.5 -->
<script src="bootstrap/js/bootstrap.min.js"></script>
<!-- AdminLTE App -->
<script src="assets/js/app.min.js"></script>
<script src="files/common.js"></script>
<script src="files/itsm.js"></script>
<script src="files/sbIncludeHTML.js"></script>
<script>
var totalRows = 0;
var rowCount = 10;
$(document).ready(function(){
getAllRecords(0);
getAllNotes();
$(document).ajaxComplete(function(){
readOnlyNotes();
});
});
function getAllRecords(rowOffset)
{
var dataString = "action=list&rowOffset=" + rowOffset + "&rowCount=" + rowCount;
$("#pleaseWaitDialog").modal("show");
$.ajax({
type:"GET",
url:"/api/itsm/incident",
data:dataString,
success:function(response)
{
$("#pleaseWaitDialog").modal("hide");
var returnMessage = checkResponse(response);
if(returnMessage == true)
{
generateTableHTML(response);
pagination(true,'LIST');
}
else if(returnMessage != false)
{
alert(returnMessage);
}
}
});
}
function generateTableHTML(response)
{
var responseJSON = JSON.parse(response);
var responseJSONList;
if(responseJSON.TOTAL_ROWS && responseJSON.TOTAL_ROWS != null && responseJSON.TOTAL_ROWS != undefined)
{
totalRows = responseJSON.TOTAL_ROWS;
}
responseJSONList = responseJSON.RESULTS_SET;
var incidentTable = document.getElementById("incidentList");
var html = "";
for(var i=0;i<responseJSONList.length;i++)
{
html += "<tr>";
if(i%2 == 0)
{
html += "<td class='glyphicon glyphicon-bell text-red'></td>";
}
else
{
html += "<td></td>";
}
html += "<td>" + responseJSONList[i].PRIORITY; + "</td>";
html += "<td><a href='incidentDetails.html?IID=" + responseJSONList[i].INCIDENT_ID + "'>" + responseJSONList[i].INCIDENT_ID + "</a></td>";
html += "<td>" + responseJSONList[i].SHORT_DESC + "</td>";
html += "<td>" + responseJSONList[i].INCIDENT_TYPE + "</td>";
html += "<td>" + responseJSONList[i].STATUS + "</td>";
html += "<td>" + responseJSONList[i].CREATED_DATE + "</td>";
html += "<td>" + responseJSONList[i].ASSIGNED_TO + "</td>";
html += "</tr>";
}
incidentTable.getElementsByTagName("tbody")[0].innerHTML = html;
}
function filterList(type,rowOffset)
{
$("#pleaseWaitDialog").modal("show");
var searchObject = new Object();
var tempDate = new Date();
if(type == "NEW")
{
searchObject["CREATED_DATE"] = yyyymmdd(tempDate);
}
else if(type == "FOLLOWUPTODAY")
{
searchObject["FOLLOW_UP_DATE"] = yyyymmdd(tempDate);
}
else if(type == "MYRECORDS")
{
searchObject["ASSIGNED_TO"] = "Troy";
}
else if(type == "ALL")
{
searchObject["1"] = "1";
}
var searchObjectString = JSON.stringify(searchObject);
var dataString = "searchRequest=" + searchObjectString + "&action=search&rowOffset="+ rowOffset +"&rowCount=" + rowCount;
$.ajax({
type:"GET",
url:"/api/itsm/incident",
data:dataString,
success:function(response)
{
$("#pleaseWaitDialog").modal("hide");
var returnMessage = checkResponse(response);
if(returnMessage == true)
{
document.getElementById("CURRENT_FILTER_TYPE").value = type;
generateTableHTML(response);
pagination(true,'FILTER');
}
else if(returnMessage != false)
{
alert(returnMessage);
}
}
});
}
function searchRecord()
{
$("#pleaseWaitDialog").modal("show");
var searchObject = new Object();
$(".sbDataFields").each(function(){
searchObject[$(this).attr("id")] = encodeURIComponent($(this).val());
});
var searchObjectString = JSON.stringify(searchObject);
var dataString = "searchRequest=" + searchObjectString + "&action=search&rowOffset=0&rowCount=1";
$.ajax({
type:"GET",
url:"/api/itsm/incident",
data:dataString,
success:function(response)
{
$("#pleaseWaitDialog").modal("hide");
var returnMessage = checkResponse(response);
if(returnMessage == true)
{
generateTableHTML(response);
pagination(false,'SEARCH');
}
else if(returnMessage != false)
{
alert(returnMessage);
}
}
});
}
</script>
</body>
</html>
我发现很难获得准确的html页面,因为没有包含脚本。帮我找出错误。
谢谢看起来您想要更改:
app.use(express.static(__dirname + '/public'));
致:
或者干脆把
webcontent
文件夹重命名为public
,当我改变它时,它起作用了
app.use(express.static(__dirname + '/public'));
到
我在该列表中没有看到您的公用文件夹确保您的所有静态资产都在公用文件夹中谢谢您的建议。但我还是有一些错误`未捕获引用错误:'未在html页面中定义'。GET dashboard.html:16 GET dashboard.html:22 GET dashboard.html:25 GET dashboard.html:28 GET dashboard.html:31它仍然无法获取css、js、bootstrap和jquery脚本。我认为您的服务器js文件在目录结构中处于较高的级别。除非您希望每个人都能看到您的服务器端代码,否则您将希望将其移出公共目录。
app.use(express.static(__dirname + '/Web-Content'));
app.use(express.static(__dirname + '/public'));
app.use(express.static(__dirname + '/'));
const express = require('express');
const path = require('path');
const app = express();
const port = process.env.PORT || 3000;// Heroku will need the PORT environment variable
app.use(express.static(path.join(__dirname, 'build')));
app.get('*', (req, res, next) => {
res.sendFile(path.join(__dirname, 'build', 'index.html'));
console.log(next);
});
app.listen(port, () => console.log(`App is live on port ${port}!`));
// "start": "node server.js",
1. Add this server.js file in your root folder
2. Add this in your package.json file
"scripts": {
"heroku-postbuild": "npm run-script build",
"start": "node server.js",
"dev-server": "node scripts/start.js",
"build": "NODE_PATH=src/ node scripts/build.js",
"test": "NODE_PATH=src/ node scripts/test.js",
"prod": "npm run-script build && serve build"
},
3. Install server package (npm install -g server)
and restart our server`enter code here`