Question

对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

Answer 1

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

如果您打算使用express，那么您不需要http.createServer()，因为express是节点核心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()，我已使用view engine使用ejs。要使用此功能，您需要通过ejs安装npm作为依赖项。

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

Node.js加载空css文件

1 个答案:

修改