javascript - 样式和 javascript 文件不适用于在 Node.js 中提供 HTML 的页面

标签 javascript css node.js server readfile

我目前正在为引用 style.css 和 index.js 的 HTML 页面提供服务,但是,这些文件没有应用到 HTML 页面,即使我明确声明如果它们被“req”请求则包含它们?

我的 HTML(显示包含):

<!DOCTYPE html>
<html>
  <head>
      <meta charset="utf-8">
      <title>Test site</title>

      <link rel="stylesheet" href="/style.css" media="screen">

      <script src="/index.js" charset="utf-8" defer></script>

      .
      .
      .

我的 server.js 代码:

var PORT = 3000;
var http = require('http');
var fs = require('fs');
var path = require('path');

//cache the files
var index = fs.readFileSync('public/index.html', 'utf8', function read(err, data) {
    if (err) {
        throw err;
    }
});
var style = fs.readFileSync('public/style.css', 'utf8', function read(err, data) {
    if (err) {
        throw err;
    }
});
var indexJS = fs.readFileSync('public/index.js', 'utf8', function read(err, data) {
    if (err) {
        throw err;
    }
});

function requestHandler(req, res){
    res.setHeader('Content-Type', 'text/html');
    res.statusCode = 200
    res.write(index);
    if(req.url === '/style.css'){
        res.write(style);
    }
    if(req.url === '/index.js'){
        res.write(indexJS);
    }
    res.end();
}

//use 3000 by default if PORT is not defined
if(!(typeof PORT !== 'undefined') || PORT === null){
    http.createServer(requestHandler).listen(PORT);
}
else{
    http.createServer(requestHandler).listen(3000);
}

最佳答案

看起来您的想法是正确的,但在服务器代码中有几点需要注意。

设置 Content Type header 告诉网络浏览器如何解释它接收的文件。您的服务器代码始终将其设置为“text/html”,对于 css 应设置为“text/css”,对于 js 文件应设置为“text/javascript”。

res.write 会将文件内容附加到响应中。由于 res.write(index) 是在每个请求上执行的,因此您的 HTML 在同一文件中的 css/js 之前发送。尝试像对 CSS/JS 那样对 HTML 使用条件

if(req.url === '/') {
  res.setHeader('Content-Type', 'text/html');
  res.write(index);
}

关于javascript - 样式和 javascript 文件不适用于在 Node.js 中提供 HTML 的页面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50429529/

相关文章:

html - div 继续向右无限

javascript - 如何获得选择框中所有值的列表?

javascript - 使用 Google Maps Api 和外部 Json 文件

javascript - 如何在 Dynamics CRM 2015 Update 1 online 中将仪表板的宽度设置为 100%

node.js - NodeJS 在获取所有 mySql 结果后做一些事情

Node.js 流管道和垃圾收集

angularjs - 如何在angularjs的ui.router模板url中传递Nodejs jade页面

javascript - 检查一个 div 是否可见或隐藏并切换一个类

javascript - Document.cookie 的 setter 在 Web 浏览器中是异步的吗?

css - 旋转倾斜的元素以获得镜面效果不起作用