web-dev-qa-db-fra.com

Rendre le HTML brut

Je souhaite rendre des pages .html brutes à l'aide d'Express 3, comme suit:

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

Voici comment j'ai configuré le serveur pour qu'il rende les pages HTML brutes (inspiré de cette question obsolète ):

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

Malheureusement, avec cette configuration, la page se bloque et n'est jamais restituée correctement. Qu'est ce que j'ai mal fait? Comment puis-je générer un rendu HTLM brut avec Express 3 sans utiliser de moteurs de rendu sophistiqués tels que Jade et EJS?

javascriptnode.jsexpress
26
Randomblue

Si vous n'avez pas réellement besoin d'injecter des données dans des modèles, la solution la plus simple dans express consiste à utiliser le serveur de fichiers statique (express.static()).

Cependant, si vous souhaitez toujours relier manuellement les itinéraires aux pages (par exemple, votre mappage "/" avec "login.html"), vous pouvez essayer res.sendFile() pour envoyer vos documents html par dessus:

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

20
hunterloftis

Ce que je pense que vous essayez de dire est: Comment puis-je servir des fichiers HTML statiques, non?

Allons-y.

Tout d'abord, du code de mon propre projet:

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

Cela signifie qu'il existe un dossier nommé public dans mon dossier d'application. Tous mes contenus statiques tels que css, js et même les pages html se trouvent ici.

Pour envoyer des pages HTML statiques, ajoutez simplement ceci dans votre fichier d'application.

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

Donc, si vous avez un domaine appelé xyz.com; chaque fois que quelqu'un y ira, ils seront servis layout.html dans leur navigateur.

Modifier

Si vous utilisez Express 4, les choses sont un peu différentes ... Les routes et le middleware sont exécutés exactement dans le même ordre où ils ont été placés.

Une bonne technique consiste à placer le fichier statique servant le code juste après tous les itinéraires standard .

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

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

Ceci est très important car cela supprime potentiellement un goulot d'étranglement dans votre code. Jetez un oeil à cette réponse de stackoverflow (le premier où il parle d'optimisation)

L'autre changement majeur pour Express 4.0 est qu'il n'est pas nécessaire d'utiliser app.configure ().

46
shash7

Avez-vous essayé d'utiliser le module fs? 

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

comme le dit le document: "Express s'attend à ce que: (chemin, options, rappel)" fonctionne dans app.engin (...).

afin que vous puissiez écrire votre code comme ci-dessous (pour simplifier, mais cela fonctionne):

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

bien sûr, tout comme 2 # & 3 #, vous devez utiliser express.static () pour le transfert de fichier statique; et le code ci-dessus ne convient pas pour la production

7
tztxf

Premièrement, l’erreur que vous avez commise a été d’utiliser le fragment de code express 2.x pour rendre du code HTML brut dans Express 3.0. À partir de l’expédition 3.0, seul le chemin du fichier sera transmis au moteur de visualisation au lieu du contenu du fichier.

Venir à la solution,

créer un moteur de vue simple

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

utilise comme ça

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


Référence

Guide de migration officiel Express 2.x vers 3.x

Voir la section "Intégration du moteur de modèle" dans cette URL https://github.com/visionmedia/express/wiki/Migrating-from-2.x-to-3.x

6
Jay Kumar

Après une nouvelle installation de la dernière version d'Express 

express the_app_name

Crée un répertoire squelette comprenant app.js . 

Il y a une ligne dans app.js qui se lit comme suit:

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

Donc, un dossier nommé public est l'endroit où la magie opère ...

Le routage est ensuite effectué par une fonction modélisée de la manière suivante:

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

*Exemple: * Un index.html à l'intérieur du dossier public est servi lorsqu'il est appelé par la ligne:

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

En ce qui concerne les actifs: Assurez-vous que les fichiers css et javascript sont appelés à partir du dossier relatif au dossier public .

Une installation de Vanilla Express aura stylesheets , javascripts et images pour le démarrage des dossiers. Assurez-vous donc que les scripts et les feuilles CSS ont les bons chemins dans index.html :

Exemples:

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

ou

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

Vous pouvez rendre les pages .html dans express en utilisant le code suivant: -

var app = express();

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

Et pendant le rendu, vous pouvez utiliser le code suivant: -

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

Et placez votre index.html sur votre page racine, vous pouvez bien sûr créer un dossier/views par exemple et étendre la fonction returnHtml () 

0
Robert

Après des années, une nouvelle réponse est ici.

En fait, cette approche ressemble à la réponse skypecakess;

var fs = require('fs');

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

C'est tout...

De plus, si EJS ou Jade sera utilisé, le code ci-dessous pourrait être utilisé:

var fs = require('fs');

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

Et le fichier views/login.ejs contient uniquement le code suivant:

<%- locals.html %>
0
efkan

Vous pouvez envoyer un fichier en utilisant res.sendFile () . Vous pouvez conserver tous les fichiers HTML dans le dossier views et en définir le chemin dans la variable options.

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

Je voulais faire cela parce que je crée un serveur standard NodeJS que je ne veux pas lié à un moteur de vue. À cette fin, il est utile de disposer d'un moteur de rendu à espace réservé qui renvoie simplement le contenu du fichier (html).

Voici ce que je suis venu avec:

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

Pour l'utiliser:

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

Source: http://expressjs.com/fr/advanced/developing-template-engines.html

Les commentaires et les commentaires constructifs sont les bienvenus!

0
stone