2016-03-01 352 views
0

我試圖在nodejs服務器上獲取html元素數據。但是我一直在瀏覽器中收到很多錯誤。這是我的html頁面。加載資源失敗:服務器響應狀態爲404(未找到)和nodejs

<!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>&nbsp;&nbsp; 
        <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 &copy; 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頁面沒有被包括在內。幫我找出錯誤。 謝謝!

+0

我沒有看到你的公開文件夾中列表 –

+0

確保您的所有靜態資產公用文件夾 – leobelizquierdo

回答

0

它看起來像你想改變:

app.use(express.static(__dirname + '/public')); 

到:

app.use(express.static(__dirname + '/Web-Content')); 

或者只是重命名Web-Content文件夾public

+0

由於內爲建議。但我仍然有一些錯誤。 '未捕獲的ReferenceError:$未定義'在html頁面中。 GET http:// localhost:8001/bootstrap/css/bootstrap.min.css dashboard.html:16 GET http:// localhost:8001/assets/css/skins/_all-skins.min.css dashboard.html:22 GET http:// localhost:8001/assets/css/sbCustom.css dashboard.html:25 GET http:// localhost:8001/assets/js/jQuery-2.1.4.min .js文件 dashboard.html:28 GET HTTP://本地主機:8001 /引導/ JS/bootstrap.min.js dashboard.html:31 它仍然沒有取CSS,JS,引導和jQuery腳本。 –

0

它的工作,當我改變

app.use(express.static(__dirname + '/public')); 

app.use(express.static(__dirname + '/')); 
+0

我認爲你的服務器js文件是在你的目錄結構中的一個級別。除非您希望每個人都能夠看到您的服務器端代碼,否則您將希望將其移出公共目錄。 – rgvassar

相關問題