Node.js-外部JS和CSS文件(仅使用node.js不表达) [英] Node.js - external JS and CSS files (just using node.js not express)
问题描述
我正在尝试学习node.js并遇到了一些障碍.
Im trying to learn node.js and have hit a bit of a roadblock.
我的问题是我似乎无法将外部CSS和JS文件加载到html文件中.
My issue is that i couldn't seem to load an external css and js file into a html file.
GET http://localhost:8080/css/style.css 404 (Not Found)
GET http://localhost:8080/js/script.css 404 (Not Found)
(这是所有文件都位于应用程序根目录中的时间)
(this was when all files were in the root of the app)
有人告诉我要模仿以下应用程序结构,为公共目录添加一条路由,以允许网络服务器为外部文件提供服务.
I was told to somewhat mimic the following app structure, add a route for the public dir to allow the webserver to serve the external files.
我的应用程序结构是这样的
my app structure is like so
domain.com
app/
webserver.js
public/
chatclient.html
js/
script.js
css/
style.css
所以我的webserver.js脚本位于应用程序的根目录中,而我想访问的所有内容都位于公共"目录中.
So my webserver.js script is in the root of app, and everything I want to access is in 'public'.
我还看到了此使用path.extname()获取位于路径中的所有文件扩展名的示例. (请参阅最后一个代码块).
I also saw this example that uses path.extname() to get any files extentions located in a path. (see the last code block).
因此,我尝试将新的站点结构与此path.extname()示例结合在一起,以使网络服务器允许访问我的公共目录中的任何文件,因此我可以呈现引用外部js的html文件.和CSS文件.
So I've tried to combine the new site structure and this path.extname() example, to have the webserver allow access to any file in my public dir, so I can render the html file, which references the external js and css files.
我的webserver.js看起来像这样.
My webserver.js looks like this.
var http = require('http')
, url = require('url')
, fs = require('fs')
, path = require('path')
, server;
server = http.createServer(function(req,res){
var myPath = url.parse(req.url).pathname;
switch(myPath){
case '/public':
// get the extensions of the files inside this dir (.html, .js, .css)
var extname = mypath.extname(path);
switch (extname) {
// get the html
case '.html':
fs.readFile(__dirname + '/public/chatclient.html', function (err, data) {
if (err) return send404(res);
res.writeHead(200, {'Content-Type': 'text/html'});
res.write(data, 'utf8');
res.end();
});
break;
// get the script that /public/chatclient.html references
case '.js':
fs.readFile(__dirname + '/public/js/script.js', function (err, data) {
if (err) return send404(res);
res.writeHead(200, { 'Content-Type': 'text/javascript' });
res.end(content, 'utf-8');
res.end();
});
break;
// get the styles that /public/chatclient.html references
case '.css':
fs.readFile(__dirname + '/public/css/style.css', function (err, data) {
if (err) return send404(res);
res.writeHead(200, { 'Content-Type': 'text/javascript' });
res.end(content, 'utf-8');
res.end();
});
}
break;
default: send404(res);
}
});
在公共情况下,我试图通过以下方式获取此目录中的任何文件夹/文件 var extname = mypath.extname(path); 类似于我提供的链接.
Inside the case of public, I'm trying to get any of the folders/files inside of this dir via var extname = mypath.extname(path); Similar to the link I provided.
但是现在当我控制台登录时,"extname"为空.
But at the moment 'extname' is empty when I console log it.
有人可以在这里建议我可能需要补充的内容吗? 我知道这可以在Express中轻松完成,但是我想知道如何仅依靠Node来实现相同的目的.
Can anyone advise what I might need to add or tweek here? I'm aware this can be done easily in Express, but I would like to know how to achieve the same thing just relying on Node.
我对此表示感谢.
谢谢.
推荐答案
您的代码有几个问题.
- 您的服务器无法运行,因为您没有指定要侦听的端口.
- 正如Eric指出的那样,您的案例条件将失败,因为url中不会出现"public".
- 您在js和CSS响应中引用的变量"content"不存在,应该是"data".
- 您的CSS内容类型标头应为text/css而不是text/javascript
- 不需要在体内指定'utf8'.
我已经重新编写了您的代码. 注意,我不使用大小写/开关.如果不是这样,我宁愿简单得多,如果您愿意,可以将它们放回去. url和path模块在我的重写中不是必需的,因此我将其删除.
I have re-written your code. Notice I do not use case/switch. I prefer much simpler if and else, you can put them back if that's your preference. The url and path modules are not necessary in my re-write, so I have removed them.
var http = require('http'),
fs = require('fs');
http.createServer(function (req, res) {
if(req.url.indexOf('.html') != -1){ //req.url has the pathname, check if it conatins '.html'
fs.readFile(__dirname + '/public/chatclient.html', function (err, data) {
if (err) console.log(err);
res.writeHead(200, {'Content-Type': 'text/html'});
res.write(data);
res.end();
});
}
if(req.url.indexOf('.js') != -1){ //req.url has the pathname, check if it conatins '.js'
fs.readFile(__dirname + '/public/js/script.js', function (err, data) {
if (err) console.log(err);
res.writeHead(200, {'Content-Type': 'text/javascript'});
res.write(data);
res.end();
});
}
if(req.url.indexOf('.css') != -1){ //req.url has the pathname, check if it conatins '.css'
fs.readFile(__dirname + '/public/css/style.css', function (err, data) {
if (err) console.log(err);
res.writeHead(200, {'Content-Type': 'text/css'});
res.write(data);
res.end();
});
}
}).listen(1337, '127.0.0.1');
console.log('Server running at http://127.0.0.1:1337/');
这篇关于Node.js-外部JS和CSS文件(仅使用node.js不表达)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!