webentwicklung-frage-antwort-db.com.de

Rohes HTML rendern

Ich möchte rohe .html-Seiten mit Express 3 wie folgt rendern:

server.get('/', function(req, res) {
    res.render('login.html');
}

So habe ich den Server so konfiguriert, dass er rohe HTML-Seiten rendert (inspiriert von dieser veralteten Frage ):

server
    .set('view options', {layout: false})
    .set('views', './../')
    .engine('html', function(str, options) {
        return function(locals) {
             return str;
        };
    });

Leider hängt die Seite bei dieser Konfiguration und wird nie richtig gerendert. Was habe ich falsch gemacht? Wie kann ich rohes HTLM mit Express 3 ohne ausgefallene Rendering-Engines wie Jade und EJS rendern?

26
Randomblue

Wenn Sie nicht tatsächlich Daten in Vorlagen einfügen müssen, ist die einfachste Lösung in express die Verwendung des statischen Dateiservers (express.static()).

Wenn Sie dennoch die Routen manuell mit den Seiten verbinden möchten (z. B. Ihre Beispielzuordnung '/' zu 'login.html'), können Sie res.sendFile() versuchen, Ihre HTML-Dokumente zu senden:

http://expressjs.com/api.html#res.sendfile

20
hunterloftis

Ich denke, Sie versuchen zu sagen: Wie kann ich statische HTML-Dateien bereitstellen, richtig?

Lassen Sie uns darauf eingehen.

Zuerst etwas Code aus meinem eigenen Projekt:

app.configure(function() {
    app.use(express.static(__dirname + '/public'));
});

Was bedeutet das, dass sich in meinem App-Ordner ein Ordner namens public befindet. Alle meine statischen Inhalte wie css, js und sogar HTML-Seiten liegen hier.

Um statische HTML-Seiten tatsächlich zu senden, fügen Sie dies einfach in Ihre App-Datei ein

app.get('/', function(req, res) {
  res.sendFile(__dirname + '/public/layout.html');
});

Wenn Sie also eine Domain namens xyz.com haben; Immer wenn jemand dorthin geht, wird ihnen layout.html in ihren Browsern zur Verfügung gestellt.

Bearbeiten

Wenn Sie Express 4 verwenden, ist die Situation etwas anders .. Die Routen und Middleware werden genau in derselben Reihenfolge ausgeführt, in der sie platziert werden.

Eine gute Technik ist der Ort, an dem der statische Datei-Serving-Code direkt hinter allen Standardrouten platziert wird.

// All standard routes are above here
app.post('/posts', handler.POST.getPosts);

// Serve static files
app.use(express.static('./public'));

Dies ist sehr wichtig, da dadurch möglicherweise Engpässe in Ihrem Code beseitigt werden. Sehen Sie sich diese stackoverflow answer an (die erste, bei der er über Optimierung spricht)

Die andere wichtige Änderung für Express 4.0 ist, dass Sie keine app.configure () verwenden müssen.

46
shash7

Hast du es mit dem Modul fs probiert? 

server.get('/', function(req, res) {
    fs.readFile('index.html', function(err, page) {
        res.writeHead(200, {'Content-Type': 'text/html'});
        res.write(page);
        res.end();
    });
}
18
sheldonk

wie das Dokument sagt: 'Express erwartet: (Pfad, Optionen, Rückruf)' Formatfunktion in app.engin (...).

so können Sie Ihren Code wie folgt schreiben (zur Vereinfachung, aber es funktioniert):

server
.set('view options', {layout: false})
.set('views', './../')
.engine('html', function(path, options, cb) {
    fs.readFile(path, 'utf-8', cb);
});

natürlich sollten Sie, genau wie 2 # & 3 # gesagt, express.static () für die statische Dateiübertragung verwenden. und der obige Code ist nicht für die Produktion geeignet

7
tztxf

Der Fehler, den Sie begangen haben, war der Versuch, das Express-2.x-Code-Snippet zum Rendern von HTML-Code in Express 3.0 zu verwenden. Ab Express 3.0 wird nur der Dateipfad anstelle des Dateiinhalts an das Ansichtsmodul übergeben.

Zur Lösung kommen,

eine einfache View Engine erstellen

var fs = require('fs'); 

function rawHtmlViewEngine(filename, options, callback) {
    fs.readFile(filename, 'utf8', function(err, str){
        if(err) return callback(err);

        /*
         * if required, you could write your own 
         * custom view file processing logic here
         */

        callback(null, str);
    }); 
}

benutze es so

server.engine('html', rawHtmlViewEngine)
server.set('views', './folder');
server.set('view engine', 'html');


Referenz

Offizieller Express 2.x nach 3.x Migrationsleitfaden

Siehe Abschnitt "Integration der Template-Engine" in dieser Url https://github.com/visionmedia/express/wiki/Migrating-from-2.x-to-3.x

6
Jay Kumar

Nach einer Neuinstallation der neuesten Version von Express 

express the_app_name

Erstellt ein Hauptverzeichnis, das app.js enthält. 

Es gibt eine Zeile in app.js, die lautet:

  app.use(express.static(path.join(__dirname, 'public')));

Ein Ordner mit dem Namen public ist der Ort, an dem der Zauber passiert ...

Das Routing wird dann von einer auf folgende Weise modellierten Funktion ausgeführt:

app.get('/', function(req,res) {
      res.sendfile('public/name_of_static_file.extension');
    });

* Example: * Ein index.html innerhalb des Öffentlichen Ordners wird bedient, wenn die folgende Zeile aufgerufen wird:

   app.get('/', function(req,res) {
  res.sendfile('public/index.html');
});

So weit wie Assets gehen: Stellen Sie sicher, dass die CSS- und Javascript-Dateien aus dem Ordner relativ zum Ordner public aufgerufen werden.

Eine Vanilla Express-Installation enthält Stylesheets, Javascripts und Bilder zum Starten von Ordnern. Stellen Sie daher sicher, dass die Skripte und CSS-Blätter die korrekten Pfade in index.html haben:

Beispiele:

<link href="stylesheets/bootstrap.css" rel="stylesheet">

oder

<script src="javascripts/jquery.js"></script>
2
FredTheWebGuy

Sie können HTML-Seiten mit folgendem Code in Express darstellen: -

var app = express();

app.engine('html', ejs.__express);

Und während des Renderns können Sie folgenden Code verwenden: -

response.render('templates.html',{title:"my home page"});
0
Meet Mehta
app.get('/', function(req, res) {
  returnHtml(res, 'index');
});

function returnHtml(res, name) {
  res.sendFile(__dirname + '/' + name + '.html');
}

Und setzen Sie Ihre index.html auf die Hauptseite, natürlich können Sie beispielsweise einen/views-Ordner erstellen und die returnHtml () - Funktion erweitern. 

0
Robert

Nach Jahren ist eine neue Antwort hier.

Eigentlich dieser Ansatz wie skypecakess Antwort;

var fs = require('fs');

app.get('/', function(req, res, next) {
    var html = fs.readFileSync('./html/login.html', 'utf8')
    res.send(html)
})

Das ist alles...

Wenn EJS oder Jade verwendet wird, kann der folgende Code verwendet werden:

var fs = require('fs');

app.get('/', function(req, res, next) {
    var html = fs.readFileSync('./html/login.html', 'utf8')
    res.render('login', { html: html })
})

Die views/login.ejs-Datei enthält nur folgenden Code:

<%- locals.html %>
0
efkan

Sie können die Datei mit res.sendFile () ..__ senden. Sie können alle HTML-Dateien im Ordner "views" behalten und den Pfad dazu in der Optionsvariablen angeben.

app.get('/', (req, res)=>{
    var options = {  root: __dirname + '/../views/' };
      var fileName = 'index.html';
      res.sendFile(fileName, options);
});
0
Shivam Sharma

Ich wollte das tun, weil ich einen Boilerplate-NodeJS-Server erstelle, den ich nicht an eine View-Engine gebunden haben möchte. Zu diesem Zweck ist es hilfreich, eine Platzhalter-Rendering-Engine zu haben, die einfach den Inhalt der (html) -Datei zurückgibt.

Folgendes habe ich mir ausgedacht:

//htmlrenderer.js

'use strict';

var fs = require('fs'); // for reading files from the file system

exports.renderHtml = function (filePath, options, callback) { // define the template engine
    fs.readFile(filePath, function (err, content) {
        if (err) return callback(new Error(err));
        var rendered = content.toString();
        // Do any processing here...
        return callback(null, rendered);
    });
};

Um es zu benutzen:

app.engine('html', htmlRenderer.renderHtml);
app.set('view engine', 'html');

Quelle: http://expressjs.com/de/advanced/developing-template-engines.html

Kommentare und konstruktives Feedback sind willkommen!

0
stone