Правильный способ загрузки файлов JS с файлами HTML через NodeJS
Я не могу заставить содержимое, включенное в заголовок обслуживаемой страницы defualt.htm, "работать". HTML загружается в DOM, только CSS и JS файлы терпят неудачу. Есть ли лучшая альтернатива? Я хотел бы оставить решение в NodeJS, но, в качестве альтернативы, открыть для socket.io и также выразить.
Спасибо, ниже то, что я использую.
NodeJS Обслуживание страницы
var http = require('http'),
fs = require('fs');
fs.readFile(__dirname+'/default.htm', function (err, html) {
if (err) {
throw err;
}
http.createServer(function(request, response) {
response.writeHeader(200, {"Content-Type": "text/html"});
response.write(html);
response.end();
}).listen(port.number);
});
Default.html Page
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="objects/css/site.css" type="text/css" />
<script src="objects/js/jquery.min.js" type="text/javascript"></script>
<script src="objects/js/site.min.js" type="text/javascript"></script>
</head>
<body></body>
</html>
5 ответов
Я собираюсь бросить здесь и мои два цента.
Я решил ту же проблему с обслуживанием статических файлов, когда начал использовать модуль Paperboy, который в настоящее время устарел в пользу модуля Send.
Anyhoo, способ, которым я решил это, состоял в том, чтобы "перехватить" запрос, прежде чем он вошел в мой метод GET и проверил его путь.
То, как я "угоняю это", выглядит следующим образом
self.preProcess(self, request, response);
а также
preProcess: function onRequest(app, request, response){ //DO STUFF }
Если бы путь содержал директорию STATICFILES, я бы делал разные операции с файлами, в противном случае я бы использовал путь "html". Ниже //DO STUFF из preProcess() функция
var path = urllib.parse(request.url).pathname;
if(path.indexOf(settings.STATICFILES_DIR) != -1) {
path = settings.STATICFILES_DIR;
requestedFile = request.url.substring(request.url.lastIndexOf('/') + 1, request.url.length);
return resolver.resolveResourceOr404(requestedFile, request, response);
}
Возможно, есть лучший способ сделать это, но это работает как обаяние для вещей, которые мне нужны для этого.
Используя модуль Paperboy I, затем, используя resolver.resolveResourceOr404(); Функция доставить файл так
resolveResourceOr404 : function (filename, httpRequest, httpResponse) {
var root = path.join(path.dirname(__filename), '');
paperboy.deliver(root, httpRequest, httpResponse)
.error(function(e){
this.raise500(httpResponse);
})
.otherwise(function(){
this.raise404(httpResponse);
});
}
Ваш Javascript и стили не работают, потому что они не существуют. Ваш текущий веб-сервер отправляет только один маршрут, корневой маршрут. Вместо этого вам нужно разрешить использование нескольких маршрутов. ExpressJS делает это для вас более простым способом, но все же очень возможно без него.
var http = require('http');
var fs = require('fs');
var server = http.createServer(function(request, response){
var header_type = "";
var data = "";
var get = function (uri, callback) {
// match `request.url` with uri with a regex or something.
var regex = uri;
if (request.url.match(regex)) {
callback();
}
};
var render = function (resource) {
// resource = name of resource (i.e. index, site.min, jquery.min)
fs.readFile( __dirname + "/" + resource, function(err, file) {
if (err) return false; // Do something with the error....
header_type = ""; // Do some checking to find out what header type you must send.
data = file;
}
};
get('/', function(req, res, next) {
// Send out the index.html
render('index.html');
next();
});
get('/javascript.min', function(req, res, next) {
render('javascript.js');
next();
});
});
server.listen(8080);
Это может помочь вам начать, но вам придется реализовать некоторые вещи, такие как next() сам. Довольно простое решение, но рабочее.
Другим решением для ответа на статические файлы было бы создание ловушки внутри http.createServer Перезвоните. В пределах get метод, если Uris не совпадают, то вы бы смотрели в public папка, соответствующая полному URI структуре файловой системы.
Ну, вы служите default.htm файл на все запросы. Итак, когда браузер запрашивает objects/js/jquery.min.jsваш сервер возвращает содержимое default.htm,
Вы действительно должны рассмотреть возможность использования экспресс или какой-либо другой инфраструктуры.
Как насчет этого:
var http = require('http');
var fs = require('fs');
var path = require('path');
http.createServer(function (request, response) {
console.log('request starting...');
var filePath = '.' + request.url;
if (filePath == './')
filePath = './index.html';
var extname = path.extname(filePath);
var contentType = 'text/html';
switch (extname) {
case '.js':
contentType = 'text/javascript';
break;
case '.css':
contentType = 'text/css';
break;
case '.json':
contentType = 'application/json';
break;
case '.png':
contentType = 'image/png';
break;
case '.jpg':
contentType = 'image/jpg';
break;
case '.wav':
contentType = 'audio/wav';
break;
}
fs.readFile(filePath, function(error, content) {
if (error) {
if(error.code == 'ENOENT'){
fs.readFile('./404.html', function(error, content) {
response.writeHead(200, { 'Content-Type': contentType });
response.end(content, 'utf-8');
});
}
else {
response.writeHead(500);
response.end('Sorry, check with the site admin for error: '+error.code+' ..\n');
response.end();
}
}
else {
response.writeHead(200, { 'Content-Type': contentType });
response.end(content, 'utf-8');
}
});
}).listen(8125);
console.log('Server running at http://127.0.0.1:8125/');
Вам лучше использовать Express для такого рода вещей.
Нечто подобное сделает работу.
App.js
var express = require('express')
, http = require('http')
, path = require('path');
var app = express();
//Configure Your App and Static Stuff Like Scripts Css
app.configure(function(){
app.set('port', process.env.PORT || 3000);
app.set('views', __dirname + '/views'); // Your view folder
app.set('view engine', 'jade'); //Use jade as view template engine
// app.set("view options", {layout: false});
// app.engine('html', require('ejs').renderFile); //Use ejs as view template engine
app.use(express.logger('dev'));
app.use(express.bodyParser());
app.use(express.methodOverride());
app.use(express.cookieParser());
app.use(app.router);
app.use(require('stylus').middleware(__dirname + '/public')); //Use Stylus as the CSS template engine
app.use(express.static(path.join(__dirname, 'public'))); //This is the place for your static stuff
});
app.get('/',function(req,res){
res.render('index.jade',{
title:"Index Page
}
});
Индекс - это страница с нефритовым шаблоном. Он рендерится в статический HTML и довольно хорошо работает с экспресс.
Для глобального статического заголовка для всех ваших страниц вы можете создать такой шаблон и включить его в любой.
static_header.jade
doctype 5
html
head
title= title
script(src='/javascripts/jquery-1.8.2.min.js')
block header
link(rel='stylesheet', href='/stylesheets/style.css')
body
block content
И, наконец, ваш index.jade, который использует static_header и собственный динамический заголовок со своими собственными скриптами.
extends static_header
block header
script(src='/javascripts/jquery-ui-1.9.1.custom.js')
script(src='http://jquery-ui.googlecode.com/svn/trunk/ui/i18n/jquery.ui.datepicker-tr.js')
link(rel='stylesheet',href='/stylesheets/jquery-ui-1.9.1.custom.min.css')
block content
h1= title
Поместите оба файла в вашу папку представлений и готовы к работе.