Laden von einfachem HTML in Node.js.

Ich versuche herauszufinden, wie eine einfache HTML-Datei geladen und gerendert wird, damit ich keinen Code schreiben muss wie:

response.write('...<p>blahblahblah</p>...');

Ich habe gerade einen Weg gefunden, die fs-Bibliothek zu benutzen . Ich bin mir nicht sicher, ob es das sauberste ist.

var http = require('http'),
    fs = require('fs');


fs.readFile('./index.html', 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(8000);
});

Das Grundkonzept besteht nur darin, Rohdaten zu lesen und den Inhalt zu sichern. Trotzdem offen für sauberere Optionen!

Verwenden Sie app.get, um die HTML-Datei abzurufen. Es ist einfach!!

const express = require('express');
const app = new express();

app.get('/', function(request, response){
    response.sendFile('absolutePathToYour/htmlPage.html');
});

So einfach ist das. Verwenden Sie dazu das Express-Modul. Express installieren:npm install express -g

Sie können Dateien manuell mit dem fs-Objekt wiedergeben, aber ich würde empfehlen, das ExpressJS- Framework zu verwenden, um Ihnen das Leben zu erleichtern.

... Aber wenn Sie darauf bestehen, es auf die harte Tour zu machen:

var http = require('http');
var fs = require('fs');

http.createServer(function(req, res){
    fs.readFile('test.html',function (err, data){
        res.writeHead(200, {'Content-Type': 'text/html','Content-Length':data.length});
        res.write(data);
        res.end();
    });
}).listen(8000);

Ich weiß, dass dies eine alte Frage ist, aber da niemand sie erwähnt hat, dachte ich, dass es sich lohnt, sie hinzuzufügen:

Wenn Sie buchstäblich statischen Inhalt bereitstellen möchten (z. B. eine "Über" -Seite, ein Bild, ein CSS usw.), können Sie eines der statischen Inhaltsbereitstellungsmodule verwenden, z. B. Node-Static. (Es gibt andere, die möglicherweise besser / schlechter sind - versuchen Sie es mit search.npmjs.org.) Mit ein wenig Vorverarbeitung können Sie dynamische Seiten aus statischen herausfiltern und an den richtigen Anforderungshandler senden.

Dies wäre wahrscheinlich etwas Besseres, da Sie die Datei (en) streamen, anstatt sie wie fs.readFile in den Speicher zu laden.

var http = require('http');
var fs = require('fs');
var path = require('path');
var ext = /[\w\d_-]+\.[\w\d]+$/;

http.createServer(function(req, res){
    if (req.url === '/') {
        res.writeHead(200, {'Content-Type': 'text/html'});
        fs.createReadStream('index.html').pipe(res);
    } else if (ext.test(req.url)) {
        fs.exists(path.join(__dirname, req.url), function (exists) {
            if (exists) {
                res.writeHead(200, {'Content-Type': 'text/html'});
                fs.createReadStream('index.html').pipe(res);
            } else {
                res.writeHead(404, {'Content-Type': 'text/html'});
                fs.createReadStream('404.html').pipe(res);
        });
    } else {
        //  add a RESTful service
    }
}).listen(8000);

Dies ist ein Update der Antwort von Muhammed Neswine

In Express 4.x ist sendfile veraltet und die sendFile- Funktion muss verwendet werden. Der Unterschied besteht darin, dass sendfile den relativen Pfad und sendFile den absoluten Pfad verwendet. Daher wird __dirname verwendet, um eine Hardcodierung des Pfads zu vermeiden.

var express = require('express');
var app = express();
var path = require("path");

app.get('/', function (req, res) {
    res.sendFile(path.join(__dirname + '/folder_name/filename.html'));
});

Es ist flexibler und einfacher, Methode zu verwenden pipe.

var fs = require('fs');
var http = require('http');

http.createServer(function(request, response) {
  response.writeHead(200, {'Content-Type': 'text/html'});

  var file = fs.createReadStream('index.html');
  file.pipe(response);

}).listen(8080);

console.log('listening on port 8080...');

Der beste Weg, den ich gelernt habe, ist die Verwendung von Express mit HTML-Dateien, da Express viele Vorteile bietet. Sie können es auch auf eine Heroku-Plattform erweitern, wenn Sie möchten. Sagen Sie einfach :)

var express = require("express");
var app     = express();
var path    = require("path");


app.get('/',function(req,res){
  res.sendFile(path.join(__dirname+'/index.html'));
});

app.listen(3000);



console.log("Running at Port 3000");

Sauber und am besten .. !!!

Die einfache Möglichkeit besteht darin, alle Ihre Dateien, einschließlich index.html oder etwas mit allen Ressourcen wie CSS, JS usw., in einem öffentlichen Ordner abzulegen, oder Sie können ihn beliebig benennen. Jetzt können Sie Express-JS verwenden und App einfach mitteilen um den _dirname zu verwenden als:

Fügen Sie diese in Ihren server.js mit Express hinzu

var express = require('express');
var app = express();
app.use(express.static(__dirname + '/public'));

und wenn Sie ein separates Verzeichnis haben möchten, fügen Sie ein neues Verzeichnis unter dem öffentlichen Verzeichnis hinzu und verwenden Sie diesen Pfad "/ public / YourDirName".

Also, was machen wir hier genau? Wir erstellen eine Expressinstanz mit dem Namen app und geben die Adresse des öffentlichen Verzeichnisses an, um auf alle Ressourcen zuzugreifen. Hoffe das hilft !

Wie wäre es mit einem Express-Modul?

    var app = require('express')();

    app.get('/',function(request,response){
       response.sendFile(__dirname+'/XXX.html');
    });

    app.listen('8000');

Dann können Sie den Browser verwenden, um / localhost: 8000 abzurufen

   var http = require('http');
   var fs = require('fs');

  http.createServer(function(request, response) {  
    response.writeHeader(200, {"Content-Type": "text/html"});  
    var readSream = fs.createReadStream('index.html','utf8')
    readSream.pipe(response);
  }).listen(3000);

 console.log("server is running on port number ");

Ich denke, dies wäre eine bessere Option, da die URL angezeigt wird, auf der der Server ausgeführt wird:

var http = require('http'),
    fs = require('fs');

const hostname = '<your_machine_IP>';
const port = 3000;

const html=fs.readFile('./index.html', 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, hostname, () => {
            console.log(`Server running at http://${hostname}:${port}/`);
        })
}); 

Sie können auch dieses Snippet verwenden:

var app = require("express");
app.get('/', function(req,res){
   res.sendFile(__dirname+'./dir/yourfile.html')
});
app.listen(3000);

Es ist ganz einfach, wenn Sie Pipe verwenden. Das Folgende ist das Code-Snippet server.js.

var http = require('http');
var fs = require('fs');

function onRequest(req, res){

    console.log("USER MADE A REQUEST. " +req.url);
    res.writeHead(200, {'Content-Type': 'text/html'});
    var readStream = fs.createReadStream(__dirname + '/index.html','utf8'); 
    
/*include your html file and directory name instead of <<__dirname + '/index.html'>>*/

    readStream.pipe(res);

}

http.createServer(onRequest).listen(7000);
console.log('Web Server is running...');

Ich weiß, dass dies eine alte Frage ist. Hier ist ein einfaches Dateiserver-Dienstprogramm, wenn Sie Connect oder Express nicht verwenden möchten. sondern das http-Modul.

var fileServer = require('./fileServer');
var http = require('http');
http.createServer(function(req, res) {
   var file = __dirname + req.url;
   if(req.url === '/') {
       // serve index.html on root 
       file = __dirname + 'index.html'
   }
   // serve all other files echoed by index.html e.g. style.css
   // callback is optional
   fileServer(file, req, res, callback);

})
module.exports = function(file, req, res, callback) {
    var fs = require('fs')
        , ext = require('path').extname(file)
        , type = ''
        , fileExtensions = {
            'html':'text/html',
            'css':'text/css',
            'js':'text/javascript',
            'json':'application/json',
            'png':'image/png',
            'jpg':'image/jpg',
            'wav':'audio/wav'
        }
    console.log('req    '+req.url)
    for(var i in fileExtensions) {
       if(ext === i) {    
          type = fileExtensions[i]
          break
       }
    }
    fs.exists(file, function(exists) {
       if(exists) {
          res.writeHead(200, { 'Content-Type': type })
          fs.createReadStream(file).pipe(res)
          console.log('served  '+req.url)
          if(callback !== undefined) callback()
       } else {
          console.log(file,'file dne')
         }  
    })
}

Verwenden Sie EJS anstelle von Jade

npm install ejs

app.js.

app.engine('html', require('ejs').renderFile);
app.set('view engine', 'html');

./routes/index.js

exports.index = function(req, res){
res.render('index', { title: 'ejs' });};

Dies ist eine ziemlich alte Frage ... aber wenn Ihr Anwendungsfall hier darin besteht, einfach eine bestimmte HTML-Seite ad hoc an den Browser zu senden, würde ich Folgendes verwenden:

var http = require('http')
,       fs = require('fs');

var server = http.createServer(function(req, res){
  var stream = fs.createReadStream('test.html');
  stream.pipe(res);
});
server.listen(7000);

Wir können das HTML-Dokument mit Connect Frame Work laden. Ich habe mein HTML-Dokument und die zugehörigen Bilder im öffentlichen Ordner meines Projekts abgelegt, in dem die folgenden Code- und Knotenmodule vorhanden sind.

//server.js
var http=require('http');
var connect=require('connect');

var app = connect()
  .use(connect.logger('dev'))
  .use(connect.static('public'))
  .use(function(req, res){
   res.end('hello world\n');
 })

http.createServer(app).listen(3000);

Ich habe die readFile () -Methode von fs ausprobiert, aber die Bilder können nicht geladen werden. Deshalb habe ich das Connect-Framework verwendet.

https://gist.github.com/xgqfrms-GitHub/7697d5975bdffe8d474ac19ef906e906

Hier sind meine einfachen Demo-Codes für statische HTML-Hostdateien mithilfe des Express-Servers!

hoffe es hilft dir!

// simple express server for HTML pages!
// ES6 style

const express = require('express');
const fs = require('fs');
const hostname = '127.0.0.1';
const port = 3000;
const app = express();

let cache = [];// Array is OK!
cache[0] = fs.readFileSync( __dirname + '/index.html');
cache[1] = fs.readFileSync( __dirname + '/views/testview.html');

app.get('/', (req, res) => {
    res.setHeader('Content-Type', 'text/html');
    res.send( cache[0] );
});

app.get('/test', (req, res) => {
    res.setHeader('Content-Type', 'text/html');
    res.send( cache[1] );
});

app.listen(port, () => {
    console.log(`
        Server is running at http://${hostname}:${port}/ 
        Server hostname ${hostname} is listening on port ${port}!
    `);
});