我正在尝试在 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 | 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>
这是我的 nodejs 服务器程序。
var express = require('express');
var bodyParser = require('body-parser');
var urlencodedParser = bodyParser.urlencoded({ extended: false });
var mysql = require('mysql');
var $ = require('jquery');
var settings = {
host: 'cgs-devdb.czspzuv6lcaw.us',
database: 'Customer 360',
user: 'cgsadmin',
password: 'cypre55gs'
};
// Express
var app = express();
app.use(express.static(__dirname + '/public'));
app.use(bodyParser.urlencoded({ extended: false}));
app.use(bodyParser.json());
app.get('/dashboard.html', function (req, res) {
res.sendFile( __dirname + "/" + "dashboard.html" );
});
// Get information submitted
app.get('/api/itsm/incident', function(req, res){
var obj = {};
var jsonString = JSON.stringify(req.body);
console.log('body: ' + JSON.stringify(req.body));
console.log(req.body);
var qb = require('node-querybuilder').QueryBuilder(settings, 'mysql', 'single');
// Generating Query
qb.select('*')
.where(req.body)
.get('SM_INCIDENT', function(err,response) {
if (err) return console.error("Uh oh! Couldn't get results: " + err.msg);
console.log("Query Ran: " + qb.last_query());
console.log(response);
res.send(response); // sending back the response to ajax
});
});
// Start server
app.listen(8000);
console.log("API is running on port");
These are the errors I am getting.
Here is the folder structure of my Node JS project
我发现很难获得准确的 html 页面，因为没有包含脚本。帮我找出错误。 谢谢!!
最佳答案
看起来你想改变:
app.use(express.static(__dirname + '/public'));
到:
app.use(express.static(__dirname + '/Web-Content'));
或者将 Web-Content 文件夹重命名为 public。
关于javascript - 无法加载资源 : the server responded with a status of 404 (Not Found) with nodejs，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35732420/