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
您正在服务器文件, app
和server
使用两个不同的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()
,我已经使用了使用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