Node.js 加载空的 css 文件答案

【问题标题】：Node.js loading empty css fileNode.js 加载空的 css 文件
【发布时间】：2016-06-07 05:46:53
【问题描述】：

对 node.js 很陌生，我想知道是否有什么可以帮助我解决这个小的 css 和图像错误。我只发布了我的 html 和 .js 的主要部分，只是为了保持干净。无论如何我的css和图像都没有加载。我几乎尝试了一切，但无法弄清楚。一切都适用于我的表单，服务器，除了 CSS 和图像之外的一切。任何帮助都会很棒！

文件结构

webDemo
node_modules
public
   css
     indexCss.css
   images
      powerbyfhirlogo.JPG
index.html
package.json
server.js

我的节点文件的主要部分。

var http = require('http');
var fs = require('fs');
var path = require('path');
var formidable = require("formidable");
var XMLHttpRequest = require("xmlhttprequest").XMLHttpRequest;
var xhr = new XMLHttpRequest();
var request = require("request");
var express = require('express');
var app = express();
var server = http.createServer(function (req, res) {

if (req.method.toLowerCase() == 'get') {
    app.use(express.static(path.join(__dirname, '/public')));
    displayForm(res);
}
else if (req.method.toLowerCase() == 'post') {

    processFormFieldsIndividual(req, res);
  }
});

function displayForm(res) {


    fs.readFile('index.html', function (err, data) {
    res.writeHead(200, {
        'Content-Type': 'text/html',
        'Content-Length': data.length
    });

    res.write(data);
    res.end();
});
}

server.listen(63342);
console.log("server listening on 63342");

我的 html 文件的开头。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>MI FHIR Demo Form</title>
<link rel="stylesheet" type="text/css" href="public/css/indexCss.css" />

</head>
 <body>
<div class=container1>
    <img src= "public/images/powerbyfhirlogo.JPG" class="img-rounded" alt="Cinque Terre">
    <h1>MI FHIR Demo Form</h1>
</div>
<hr/>

<div class=container2>
    <form role="form" action="" method="post" enctype="multipart/form-data">

编辑 解决方案

var express = require('express');
var path = require('path');
var server = express();

var port = process.env.port || 63342;

// Setup Views & View Engine
server.set('views', path.join(__dirname, 'views'));
server.engine('html', require('ejs').renderFile);
server.set('view engine', 'html');


// Define ./public as static
server.use(express.static(path.join(__dirname, 'public')));

//All POST's use processFormFieldsIndividual
server.post('*', processFormFieldsIndividual);

server.listen(port, function() {
    console.log('listening on port ' + port);
});

新的文件结构

webDemo
   node_modules
   public
      css
        indexCss.css
      images
         powerbyfhirlogo.JPG
      index.html
   package.json
   server.js

【问题讨论】：

试试css/indexCss.css
@VikramTiwari 在 html 中？我完成了仍然无法正常工作，而且它给了我一个无法解析目录 css/文件错误

标签： javascript html css node.js

【解决方案1】：

您在服务器文件中使用了两个不同的服务器，app 和 server。那真的是你出错的地方。您不能混合和匹配两台不同的服务器，并期望一台为另一台工作，反之亦然。

如果您要使用 express，则不需要 http.createServer()，因为 express 是 Node Core http 服务器。

此外，您不希望为每个 GET 请求重新声明静态文件，这没有必要。

从根本上说，这就是您所需要的

var express = require('express');
var path = require('path');
var server = express();

var port = process.env.port || 63342;

// Setup Views & View Engine
server.set('views', path.join(__dirname, 'views'));
server.engine('html', require('ejs').renderFile);
server.set('view engine', 'html');


// Define ./public as static
server.use(express.static(path.join(__dirname, 'public')));

//All GET's render index.html
server.get('*', function(req, res) {
    return res.render('index');
});  

//All POST's use processFormFieldsIndividual
server.post('*', processFormFieldsIndividual);

server.listen(port, function() {
    console.log('listening on port ' + port);
});

编辑

为了消除不必要的res.sendFile()，我使用ejs 合并了view engine 的使用。为了使用它，您需要通过 npm 安装 ejs 作为依赖项。

npm i --save ejs

此外，您需要将index.html 放在项目文件夹中名为views 的新目录中。这允许您利用res.render，从而消除了res.sendFile() 的使用。您的新目录结构将如下所示。

webDemo
node_modules
public
   css
     indexCss.css
   images
      powerbyfhirlogo.JPG
views
   index.html
package.json
server.js

【讨论】：

TypeError: path must be absolute or specified root to res.sendFile at ServerResponse.sendFile (..express\lib\response.js:403:11) at displayForm (..webDemo\server.js :48:9) 在 Layer.handle [as handle_request] ..express\lib\router\layer.js:95:5) 在下一个 (..\webDemo\node_modules\express\lib\router\route.js:131 :13) 在 Route.dispatch (..express\lib\router\route.js:112:3) 在 Layer.handle [as handle_request] (..express\lib\router\layer.js:95:5) 在...express\lib\router\index.js:277:22 at param (..webDemo\node_modules\express\lib\router\index.js:349:14)
然后做res.sendFile(path.join(__dirname, 'index.html')
函数 displayForm(req, res) { res.sendFile(path.join(__dirname, 'index.html'), function(err) { if (err) return res.status(err.status ).end(); 返回; }); }
喜欢吗？如果我这样做，它会加载页面，但 css 和图像仍然不起作用。
@Samkh 查看我的编辑以删除 res.sendFile() 的使用以支持视图引擎和 res.render() 设置。只要确保从 npm 安装 ejs。 npm i --save ejs.