当 Node.js 调用 HTML 时，外部 Javascript 和 CSS 不会对 HTML 产生影响

external Javascript and CSS are not effected to HTML when the HTML is invoked by Node.js

本文关键字：HTML CSS 影响 Javascript js Node 调用 外部      更新时间：2023-09-26

我创建了一个简单的Node JS程序。我在app.js所在的同一文件夹中有index.html，外部css和js文件public/stylesheets/style.css和/public/javascripts/script.js目录中。当我直接从浏览器中打开index.html时，css文件被Sycecess链接到html文件。但是当我运行node app.js并导航到http://localhost:3000时，会显示index.html，但任何样式都没有影响它。我该如何解决？

app.js文件是这个

var express = require('express');
var app = express();
var server = require('http').createServer(app);
var io = require('socket.io').listen(server);
server.listen(3000);
app.get('/', function(req, res){
    res.sendfile(__dirname + '/index.html');
});

index.html文件是这个

<html>
<head>
    <title>Sanitizor</title>
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script src="/socket.io/socket.io.js"></script>
    <script src="public/javascripts/script.js"></script>
    <link rel="stylesheet" type="text/css" href="public/stylesheets/style.css">
</head>
<body>
<h3>hello</h3>
    <div id="chat"></div>
    <form id="sent-message">
        <input size="35" id="message"></input>
        <input type="submit"></input>
    </form>
</body>
</html>

您需要启用静态服务： 

app.use(express.static(path.join(__dirname, 'public'))); //this line enables the static serving in the public directory

您的public目录可能是：

public 
|_css
|_js
|_images
  |_logo.png

然后，如果你想得到一个图像： 

http://localhost:3000/images/logo.png

如果你想在你的html页面中显示它：

<img id="logo" src="/images/logo.png"/>

在您的情况下，请替换以下行 

<script src="public/javascripts/script.js"></script>

由 

<script src="/javascripts/script.js"></script>

与 CSS 相同

就像 Cristy 在她的评论中已经说过的那样，您需要启用资源文件的静态服务。为此，您可以使用 express.static。Express 有关于路由或中间件等的良好文档和指南，所以请查看它。

考虑一个文件结构，例如：

/app
   /public/index.html
      /stylesheets/style.css          
      /javascripts/script.js

您的应用文件夹包含app.js其余部分按描述排序。

您的app.js ：

var express = require('express');
var app = express();
var server = require('http').createServer(app);
app.use(express.static(__dirname + '/public'));
var io = require('socket.io').listen(server);
server.listen(3000);
app.get('/', function(req, res){
    res.sendfile(__dirname + '/public/index.html');
});

大多数时候，订单很重要，所以你需要小心。为了配置express，您可以使用app.configure(function() {...});并将所有app.use(...)命令放入其中。

您的索引.html现在应如下所示：

<html>
<head>
    <title>Sanitizor</title>
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script src="/socket.io/socket.io.js"></script>
    <script src="/javascripts/script.js"></script>
    <link rel="stylesheet" type="text/css" href="/stylesheets/style.css">
</head>
<body>
<h3>hello</h3>
    <div id="chat"></div>
    <form id="sent-message">
        <input size="35" id="message"></input>
        <input type="submit"></input>
    </form>
</body>
</html>
相关文章：