Utilizzo di HTML in Express invece di Jade


103

Come posso sbarazzarmi di Jade mentre uso Express con Node.JS? Voglio usare solo html semplice. In altri articoli ho visto che le persone consigliavano app.register () che ora è deprecato nell'ultima versione.

Risposte:


78

Puoi farlo in questo modo:

  1. Installa ejs:

    npm install ejs
  2. Imposta il tuo motore di modelli in app.js come ejs

    // app.js
    app.engine('html', require('ejs').renderFile);
    app.set('view engine', 'html');
  3. Ora nel tuo file di rotta puoi assegnare le variabili del modello

    // ./routes/index.js
    exports.index = function(req, res){
    res.render('index', { title: 'ejs' });};
  4. Quindi puoi creare la tua vista html nella directory / views.


2
Ho appena iniziato a utilizzare node.js. La soluzione non mi è chiara. Ho un piccolo sito html. Ho bisogno di node.js per l'invio di e-mail tramite il mio sito utilizzando nodemailer. Ho installato tutto il necessario. Tuttavia, ho idea di cosa dovrebbe andare nel file app.js per far funzionare il mio sito web usando Express
user2457956

4
Come stampare la variabile titlenel file html?
Master Yoda,

3
Se qualcuno si sta ancora chiedendo come stampare la variabile, come ha chiesto @MasterYoda, puoi stamparla in questo modo sull'html: <% = title%>
Lucas Meine

62

Jade accetta anche input html.
Basta aggiungere un punto alla fine della riga per iniziare a inviare html puro.
Se questo fa il trucco per te, prova:

doctype html              
html. // THAT DOT
    <body>     
        <div>Hello, yes this is dog</div>
    </body>

PS: non c'è bisogno di chiudere l'HTML: è fatto automaticamente da Jade.


7
Doctype 5 è ora deprecato. Usa "doctype html" come prima riga.
snorkelzebra


18

A partire da express 3 puoi semplicemente usare response.sendFile

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

Dal riferimento api espresso ufficiale :

res.sendfile(path, [options], [fn]])

Trasferisci il file nel percorso indicato.

Imposta automaticamente il campo dell'intestazione della risposta del tipo di contenuto in base all'estensione del nome del file. La richiamata fn(err)viene richiamata quando il trasferimento è completo o quando si verifica un errore.

avvertimento

res.sendFilefornisce la cache lato client tramite le intestazioni della cache http ma non memorizza nella cache il contenuto dei file sul lato server. Il codice sopra colpirà il disco ad ogni richiesta .


2
Credo che l'OP voglia ancora utilizzare una sorta di template, solo con la normale sintassi HTML. sendfilenon consente di eseguire alcun modello poiché invia solo byte da un file. Inoltre, consiglierei di non utilizzare in sendfilequesto modo perché significa che colpirai il disco ogni volta che arriva una richiesta: un enorme collo di bottiglia. Per le pagine ad alto traffico, dovresti davvero fare il caching in memoria.
josh3736

1
@ josh3736 se hai ragione sull'intenzione dell'OP, la domanda dovrebbe essere migliorata. Hai ragione sul colpire il disco su ogni richiesta, migliorerò la mia risposta per avvertire di questo fatto. Considera di migliorare il tuo per avvertire di quanto segue: se implementi un motore personalizzato devi implementare anche la funzione di cattura (se lo desideri), non è gestita da Express.
laconbass

17

A mio parere, utilizzare qualcosa di grande come ejs solo per leggere file html è un po 'pesante. Ho appena scritto il mio motore di template per i file html che è straordinariamente semplice. Il file ha questo aspetto:

var fs = require('fs');
module.exports = function(path, options, fn){
    var cacheLocation = path + ':html';
    if(typeof module.exports.cache[cacheLocation] === "string"){
        return fn(null, module.exports.cache[cacheLocation]);
    }
    fs.readFile(path, 'utf8', function(err, data){
        if(err) { return fn(err); }
        return fn(null, module.exports.cache[cacheLocation] = data);
    });
}
module.exports.cache = {};

Ho chiamato il mio htmlEngine e il modo in cui lo usi è semplicemente dicendo:

app.engine('html', require('./htmlEngine'));
app.set('view engine', 'html');

11

app.register()non è stato svalutato, è stato semplicemente rinominato in app.engine()quanto Express 3 cambia il modo in cui vengono gestiti i motori dei modelli .

La compatibilità del motore di modelli Express 2.x richiedeva l'esportazione del seguente modulo:

exports.compile = function(templateString, options) {
    return a Function;
};

I motori di modelli Express 3.x dovrebbero esportare quanto segue:

exports.__express = function(filename, options, callback) {
  callback(err, string);
};

Se un motore di modelli non espone questo metodo, non sei sfortunato, il app.engine()metodo ti consente di mappare qualsiasi funzione su un'estensione. Supponiamo di avere una libreria markdown e di voler eseguire il rendering di file .md, ma questa libreria non supporta Express, la tua app.engine()chiamata potrebbe essere simile a questa:

var markdown = require('some-markdown-library');
var fs = require('fs');

app.engine('md', function(path, options, fn){
  fs.readFile(path, 'utf8', function(err, str){
    if (err) return fn(err);
    str = markdown.parse(str).toString();
    fn(null, str);
  });
});

Se stai cercando un motore di modelli che ti consenta di utilizzare HTML "semplice", ti consiglio doT perché è estremamente veloce .

Ovviamente, tieni presente che il modello di visualizzazione Express 3 lascia la memorizzazione nella cache della vista a te (o al tuo motore di modelli). In un ambiente di produzione, probabilmente si desidera memorizzare nella cache le visualizzazioni in modo da non eseguire l'I / O del disco a ogni richiesta.


Per favore dai un'occhiata alla mia risposta, la tua spiega perfettamente come registrare i template engine ma c'è un modo molto più semplice per trasferire file html semplici.
laconbass

@ josh3736: Il tuo collegamento ipertestuale "estremamente veloce" funziona in Firefox 41, ma non riesce a eseguire i test in Chromium versione 45.0.2454.101 Ubuntu 14.04 (64 bit). Mi chiedo perché.
Lonnie Best


4

Per fare in modo che il motore di rendering accetti html invece di jade puoi seguire i seguenti passaggi;

  1. Installa consolidate e swig nella tua directory.

     npm install consolidate
     npm install swig
  2. aggiungi le seguenti righe al tuo file app.js

    var cons = require('consolidate');
    
    // view engine setup
    app.engine('html', cons.swig)
    app.set('views', path.join(__dirname, 'views'));
    app.set('view engine', html');
  3. aggiungi i tuoi modelli di visualizzazione come .html nella cartella "visualizzazioni". Riavvia il server del nodo e avvia l'app nel browser.

Sebbene questo renderà html senza alcun problema, ti consiglio di usare JADE imparandolo. Jade è un fantastico motore di modelli e apprenderlo ti aiuterà a ottenere una migliore progettazione e scalabilità.


1
L'unico grosso problema con Jade è il rientro. Se sbagli, il codice non verrà compilato. Inoltre, mi chiedo perché Jade oltre al fatto che l'unica cosa che fa è restringere il codice ...
zapper

4

prima controlla la versione di compatibilità del motore del modello utilizzando la riga sottostante

express -h

quindi non devi usare nessuna vista dall'elenco. seleziona nessuna vista

express --no-view myapp

ora puoi usare tutti i tuoi html, css, js e immagini nella cartella pubblica.


3

Bene, sembra che tu voglia servire file statici. E c'è una pagina per questo http://expressjs.com/en/starter/static-files.html

Bizzarro che nessuno si colleghi alla documentazione.


"Bizzarro che nessuno stia collegando alla documentazione" Sono d'accordo che sia una cosa banale utilizzare un linguaggio di visualizzazione diverso in Express.
pixel 67

1

Considerando che hai i tuoi percorsi già definiti o sai come farlo.

app.get('*', function(req, res){
    res.sendfile('path/to/your/html/file.html');
});

NOTA: questo percorso deve essere posizionato dopo tutti gli altri poiché * accetta tutto.


1

poiché Jade supporta HTML, se vuoi solo avere .html ext, puoi farlo

// app.js
app.engine('html', require('jade').renderFile);
app.set('view engine', 'html');

quindi devi solo cambiare il file nelle viste da jade a html.


Non devi mettere un "punto" o un punto prima del markup html?
Gus Crawford,


-10

Se vuoi usare semplice html in nodeJS, senza usare jade .. o altro:

var html = '<div>'
    + 'hello'
  + '</div>';

Personalmente sto bene con quello.

Il vantaggio è la semplicità durante il controllo. Puoi usare alcuni trucchi, come '<p>' + (name || '') + '</p>', ternario .. ecc

Se vuoi un codice rientrato nel browser, puoi fare:

+ 'ok \
  my friend \
  sldkfjlsdkjf';

e usa \ t o \ n a piacimento. Ma preferisco senza, in più è più veloce.


Mi piacerebbe essere in grado di utilizzare i file HTML in Express (rispetto al normale Node.JS)
Sanchit Gupta

ooooohh scusa (sono francese: p), quindi puoi usare il fsmodulo. fs.readFile(htmlfile, 'utf8', function (err, file) {
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.