Node.js加载空的CSS文件

对node.js来说很新,我想知道是否有什么可以帮助我处理这个小的CSS和图像错误。 我只发布了我的html和.js的主要部分,只是为了保持清洁。 反正我的CSS和图像arent加载。 我已经尝试了一切,但不能确定。 一切工作我的forms,服务器,除了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"> 

编辑 解决scheme

 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 

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

如果你打算使用express,那么你不需要http.createServer()因为express是一个Node核心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() ,我已经使用了使用ejsview 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