Javascript 通过NodeJS用HTML文件加载JS文件的正确方法_Javascript_Node.js_Readfile_Static Html

Javascript 通过NodeJS用HTML文件加载JS文件的正确方法

javascript node.js

Javascript 通过NodeJS用HTML文件加载JS文件的正确方法,javascript,node.js,readfile,static-html,Javascript,Node.js,Readfile,Static Html,我无法将已送达的defualt.htm页面标题中包含的内容设置为“工作”。html加载到dom中，只是CSS和JS文件失败。有更好的选择吗？我希望将解决方案保留在NodeJS中，但也可以打开socket.io和express 谢谢，下面是我使用的为页面提供服务的节点 var http = require('http'), fs = require('fs'); fs.readFile(__dirname+'/default.htm', function (err, html) { i

我无法将已送达的defualt.htm页面标题中包含的内容设置为“工作”。html加载到dom中，只是CSS和JS文件失败。有更好的选择吗？我希望将解决方案保留在NodeJS中，但也可以打开socket.io和express

谢谢，下面是我使用的

为页面提供服务的节点

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);
});

<!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>

Default.html页面

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);
});

<!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>

好吧，您正在为所有请求提供您的

default.htm

文件。因此，当浏览器请求

objects/js/jquery.min.js

时，服务器返回

default.htm

的内容

你应该考虑使用<强> Express <强>或其他一些框架。

你最好用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 
    }
});

索引是一个jade模板页面。它呈现为静态html，并与express配合使用

对于所有页面的全局静态标题，您可以制作这样的模板，并将其包含在任何页面中

静态_.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，它使用静态_头和自己的动态头以及自己的脚本

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

将这两个文件都放在“视图”文件夹中并准备好滚动。

您的Javascript和样式失败，因为它们不存在。您当前的Web服务器只发送一个路由，即根路由。相反，您需要允许使用多条路由。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

回调中创建一个catcher。在

get

方法中，如果uri不匹配，那么您将在

public

文件夹中查找与文件系统结构匹配的完整uri

我也要把我的两分钱扔到这里

我解决静态文件服务的相同问题的方法是，我开始使用Paperboy模块，该模块现在被弃用，取而代之的是Send模块

总之，我解决它的方法是在请求进入GET方法并检查其路径之前“劫持”请求

我“劫持它”的方式如下

self.preProcess(self, request, response);

及

如果路径包含STATICFILES目录，我将执行不同的文件服务，否则我将使用“html”路径。下面是

preProcess（）

函数的

//DO STUFF

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);
    });
}

试试这个怎么样：
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/');

如果您想自己编写，请查看nodejs或模块。它们可以帮助您交付css/js和图像等静态文件？使用nginx或类似工具。所有非面向用户的任务都不应在用于提供动态内容的同一事件循环中完成。这与我所寻找的最为相似，但我看到了根据请求URL加载时必须执行的操作。