（NodeJS + Express）服務器沒有閱讀HTML中的鏈接JavaScript文件

Question

我卡住了，我設法讓我的webhost上的服務器上工作的AWS +一切express.js，但現在我有這個錯誤：

root@ip(censored):/home/ubuntu/(censored)# /home/ubuntu/(censored)/routes/index.js:15 
$(document).ready(function() { 
^

ReferenceError: document is not defined 
    at Object.<anonymous> (/home/ubuntu/(censored)/routes/index.js:15:3) 
    at Module._compile (module.js:570:32) 
    at Object.Module._extensions..js (module.js:579:10) 
    at Module.load (module.js:487:32) 
    at tryModuleLoad (module.js:446:12) 
    at Function.Module._load (module.js:438:3) 
    at Module.require (module.js:497:17) 
    at require (internal/module.js:20:19) 
    at Object.<anonymous> (/home/ubuntu/ForbiddenGround/app.js:12:14) 
    at Module._compile (module.js:570:32) 
    at Object.Module._extensions..js (module.js:579:10) 
    at Module.load (module.js:487:32) 
    at tryModuleLoad (module.js:446:12) 
    at Function.Module._load (module.js:438:3) 
    at Module.runMain (module.js:604:10) 
    at run (bootstrap_node.js:394:7) 
^C 

這裏是我的HTML文件加載了jQuery（是不是它應該知道，我包括jQuery的定義變量$？）

<link rel="stylesheet" href="styles.css"> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"></link> 
<link href="owl-carousel/owl.carousel.css" rel="stylesheet"> 
<link href="owl-carousel/owl.theme.css" rel="stylesheet"> 
<link rel="stylesheet" href="css/style.css"> 
<link href="css/bootstrap-datetimepicker.min.css" rel="stylesheet" media="screen"> 
<link rel="stylesheet" href="font-awesome-4.4.0/css/font-awesome.min.css" type="text/css"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
<script type="text/javascript" src="scripts.js"></script> 

這是我的正在點火的app.js：

var express = require('express'); 
var app = express(); 
var path = require('path'); 
var logger = require('morgan'); 
var cookieParser = require('cookie-parser'); 
var bodyParser = require('body-parser'); 
var favicon = require('serve-favicon'); 
var cons = require('consolidate'); 
const port = 9000; 
var swig = require('swig'); 

var routes = require('./routes/index'); 
var users = require('./routes/users'); 

var app = express(); 


app.engine('html', swig.renderFile); 

app.use(express.static('public')); 
app.use(express.static('forbiddenDirectory')); 
app.set('view engine', 'html'); 
app.set('views', __dirname + '/views'); 




//////////////////////////////////////////////////////////////////////////////////// 
app.get('/', function (err, req, res) { 
    req.render('index'); 
}); 


    app.listen(port); 
console.log(`Server started! Port: ${port}`); 

這是我的index.js：

var express = require('express'); 
var router = express.Router(); 

/* GET home page. */ 
router.get('/', function(req, res, next) { 
    res.render('index', { joo }); 
}); 

module.exports = router; 


// Navbars 
$(document).ready(function() { 
    const apod = $("#apod").attr("href","apod.html"); 
    const home = $("#home").attr("href","home.html"); 
    const animedb = $("#animedb").attr("href","animedb.html"); 
    const birthdays = $("#birthdays").attr("href","birthdays.html"); 
    const holidays = $("#holidays").attr("href","holidays.html"); 
    const events = $("#events").attr("href","events.html"); 
    const contacts = $("#contacts").attr("href","contacts.html"); 
    $("#importantdates").click(function(e) { 
     e.preventDefault(); 
    }); 

}); 

Answer 1

它看起來像你使用你的路線之一的jQuery + DOM的事情。

路由不是這樣做的地方，它們運行在Node.JS上下文中，因此無法訪問DOM。您需要將該代碼（即$(document).ready(function(){ ... });）移動到瀏覽器包含的JS文件中。

編輯：只需補充一點，const apod = $("#apod").attr("href","apod.html");不是在導航鏈接上設置href屬性的有效方法。您應修改發生鏈接的模板，並在其中設置href屬性。