it-swarm.com.de

Grundlegende HTML-Ansicht rendern?

Ich habe eine grundlegende node.js-App, die ich mithilfe des Express-Frameworks auf den Weg bringen möchte. Ich habe einen views Ordner, in dem ich eine index.html Datei habe. Beim Laden des Webbrowsers erhalte ich jedoch die folgende Fehlermeldung.

Fehler: Modul 'html' kann nicht gefunden werden

Unten ist mein Code.

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

app.use(express.staticProvider(__dirname + '/public'));

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

app.listen(8080, '127.0.0.1')

Was vermisse ich hier?

269
aherrick

Sie können Jade eine einfache HTML-Seite hinzufügen lassen:

in views/index.jade

include plain.html

in views/plain.html

<!DOCTYPE html>
...

und app.js können immer noch nur jade rendern:

res.render(index)
290
Andrew Homeyer

Viele dieser Antworten sind veraltet.

Unter Verwendung von Express 3.0.0 und 3.1.0 funktioniert Folgendes:

app.set('views', __dirname + '/views');
app.engine('html', require('ejs').renderFile);

In den Kommentaren unten finden Sie alternative Syntax und Einschränkungen für Express 3.4+:

app.set('view engine', 'ejs');

Dann können Sie etwas tun wie:

app.get('/about', function (req, res)
{
    res.render('about.html');
});

Dies setzt voraus, dass Sie Ihre Ansichten im Unterordner views haben und das Knotenmodul ejs installiert haben. Wenn nicht, führen Sie Folgendes auf einer Node Konsole aus:

npm install ejs --save
220
Drew Noakes

Aus dem Express.js-Handbuch: Rendering anzeigen

Anzeigen von Dateinamen haben die Form _Express.ENGINE_, wobei ENGINE der Name des Moduls ist, das benötigt wird. Beispielsweise weist die Ansicht _layout.ejs_ das Ansichtssystem an, require('ejs'), wobei das Modul geladen wird muss die Methode exports.render(str, options) exportieren, um mit Express übereinzustimmen, jedoch kann app.register() verwendet werden, um Engines Dateierweiterungen zuzuordnen, sodass beispielsweise _foo.html_ von Jade gerendert werden kann.

Entweder erstellen Sie Ihren eigenen einfachen Renderer oder Sie verwenden einfach Jade:

_ app.register('.html', require('jade'));
_

Mehr about _app.register_.

Beachten Sie, dass diese Methode in Express 3 in app.engine umbenannt wird

71
Ivo Wetzel

versuche dies. Für mich geht das.

app.configure(function(){

  .....

  // disable layout
  app.set("view options", {layout: false});

  // make a custom html template
  app.register('.html', {
    compile: function(str, options){
      return function(locals){
        return str;
      };
    }
  });
});

....

app.get('/', function(req, res){
  res.render("index.html");
});
45
spectrum

Sie können die HTML-Datei auch lesen und senden:

app.get('/', (req, res) => {
    fs.readFile(__dirname + '/public/index.html', 'utf8', (err, text) => {
        res.send(text);
    });
});
44
keegan3d
app.get('/', function (req, res) {
res.sendfile(__dirname + '/public/index.html');
});
20
nod

Wenn Sie [email protected]~3.0.0 verwenden, ändern Sie die folgende Zeile aus Ihrem Beispiel:

app.use(express.staticProvider(__dirname + '/public'));

zu so etwas:

app.set("view options", {layout: false});
app.use(express.static(__dirname + '/public'));

Ich habe es wie auf Express-API-Seite beschrieben gemacht und es funktioniert wie Charme. Mit diesem Setup müssen Sie keinen zusätzlichen Code schreiben, sodass die Verwendung für Ihre Mikroproduktion oder Tests einfach ist.

Vollständiger Code unten aufgeführt:

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

app.set("view options", {layout: false});
app.use(express.static(__dirname + '/public'));

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

app.listen(8080, '127.0.0.1')
18
Mark Karwowski

Ich hatte auch das gleiche Problem in express 3.X und node 0.6.16. Die oben angegebene Lösung funktioniert nicht mit der neuesten Version express 3.x. Sie haben die Methode app.register entfernt und die Methode app.engine hinzugefügt. Wenn Sie die obige Lösung ausprobiert haben, kann der folgende Fehler auftreten.

node.js:201
        throw e; // process.nextTick error, or 'error' event on first tick
              ^
TypeError: Object function app(req, res){ app.handle(req, res); } has no method 'register'
    at Function.<anonymous> (/home/user1/ArunKumar/firstExpress/app.js:37:5)
    at Function.configure (/home/user1/ArunKumar/firstExpress/node_modules/express/lib/application.js:399:61)
    at Object.<anonymous> (/home/user1/ArunKumar/firstExpress/app.js:22:5)
    at Module._compile (module.js:441:26)
    at Object..js (module.js:459:10)
    at Module.load (module.js:348:31)
    at Function._load (module.js:308:12)
    at Array.0 (module.js:479:10)
    at EventEmitter._tickCallback (node.js:192:40)

So beseitigen Sie die Fehlermeldung. Fügen Sie die folgende Zeile zu Ihrem app.configure function hinzu

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

Hinweis: Sie müssen die ejs Template Engine installieren

npm install -g ejs

Beispiel:

app.configure(function(){

  .....

  // disable layout
  app.set("view options", {layout: false});

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

....

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

Anmerkung: Die einfachste Lösung ist die Verwendung von ejs template als View Engine. Dort können Sie rohes HTML in * .ejs-Ansichtsdateien schreiben.

14
Jak

Ordnerstruktur:

.
├── index.html
├── node_modules
│   ├──{...}
└── server.js

server.js

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

app.use(express.static('./'));

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

app.listen(8882, '127.0.0.1')

index.html

<!DOCTYPE html>
<html>
<body>

<div> hello world </div>

</body>
</html>

Ausgabe:

hallo Welt

7
KARTHIKEYAN.A

Wenn Sie das Verzeichnis views nicht verwenden müssen, verschieben Sie einfach HTML-Dateien in das Verzeichnis public.

fügen Sie dann diese Zeile in app.configure anstelle von '/ views' hinzu.

 server.use (express.static (__ dirname + '/public'));
7
spectrum

Versuchen Sie Folgendes, um eine HTML-Seite in Node zu rendern:

app.set('views', __dirname + '/views');

app.engine('html', require('ejs').renderFile);
  • Sie müssen das ejs -Modul über npm wie folgt installieren:

       npm install ejs --save
    
5
Trojan

Für mein Projekt habe ich diese Struktur erstellt:

index.js
css/
    reset.css
html/
    index.html

Dieser Code dient index.html für / Anforderungen und reset.css für /css/reset.css Anforderungen. Einfach genug und das Beste daran ist, dass automatisch Cache-Header hinzugefügt werden.

var express = require('express'),
    server = express();

server.configure(function () {
    server.use('/css', express.static(__dirname + '/css'));
    server.use(express.static(__dirname + '/html'));
});

server.listen(1337);
4
Znarkus

Ich habe unter 2 Zeile hinzugefügt und es funktioniert für mich

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

Probieren Sie die Funktion res.sendFile () in Express-Routen aus.

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


app.get('/',function(req,res){
  res.sendFile(path.join(__dirname+'/index.html'));
  //__dirname : It will resolve to your project folder.
});

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

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

app.listen(3000);

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

Lesen Sie hier: http://codeforgeek.com/2015/01/render-html-file-expressjs/

3
Shaikh Shahid

Mit Express 4.0.0 müssen Sie nur zwei Zeilen in app.js auskommentieren:

/* app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade'); */ //or whatever the templating engine is.

Legen Sie dann Ihre statische Datei im Verzeichnis/public ab. Beispiel: /public/index.html

3
u84six

Ich wollte mich nicht auf ejs verlassen, um einfach eine HTML-Datei zu liefern, also habe ich einfach den winzigen Renderer selbst geschrieben:

const Promise = require( "bluebird" );
const fs      = Promise.promisifyAll( require( "fs" ) );

app.set( "view engine", "html" );
app.engine( ".html", ( filename, request, done ) => {
    fs.readFileAsync( filename, "utf-8" )
        .then( html => done( null, html ) )
        .catch( done );
} );
3
Der Hochstapler

1) Legen Sie am besten einen statischen Ordner fest. In Ihrer Hauptdatei (app.js | server.js | ???):

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

public/css/form.html
public/css/style.css

Dann hast du eine statische Datei aus dem "öffentlichen" Ordner:

http://YOUR_DOMAIN/form.html
http://YOUR_DOMAIN/css/style.css

2)

Sie können Ihren Dateicache erstellen.
Verwenden Sie die Methode fs.readFileSync

var cache = {};
cache["index.html"] = fs.readFileSync( __dirname + '/public/form.html');

app.get('/', function(req, res){    
    res.setHeader('Content-Type', 'text/html');
    res.send( cache["index.html"] );                                
};);
2
Tomáš
res.sendFile(__dirname + '/public/login.html');
2
himanshu yadav

Ich habe versucht, eine angular App mit einer Express-RESTful-API einzurichten, und bin mehrmals auf dieser Seite gelandet, obwohl dies nicht hilfreich war. Folgendes habe ich als funktionierend empfunden:

app.configure(function() {
    app.use(express.static(__dirname + '/public'));         // set the static files location
    app.use(express.logger('dev'));                         // log every request to the console
    app.use(express.bodyParser());                          // pull information from html in POST
    app.use(express.methodOverride());                      // simulate DELETE and PUT
    app.use(express.favicon(__dirname + '/public/img/favicon.ico'));
});

Im Callback für deine API-Routen siehst du dann so aus: res.jsonp(users);

Ihr clientseitiges Framework kann das Routing verarbeiten. Express dient zur Bereitstellung der API.

Meine Heimroute sieht so aus:

app.get('/*', function(req, res) {
    res.sendfile('./public/index.html'); // load the single view file (angular will handle the page changes on the front-end)
});
2
Connor Leech

Hier ist eine vollständige Datei-Demo des Express-Servers!

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

hoffe es wird dir helfen!

// 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}!
    `);
});
2
xgqfrms
app.get('/', function(req, res, next) {
    res.send('<h1>My Server</h1>')
});
1
ofir_aghai

Fügen Sie Ihrem Code die folgenden Zeilen hinzu

  1. Ersetzen Sie "jade" durch "ejs" und "X.Y.Z" (Version) durch "*" in der Datei package.json

      "dependencies": {
       "ejs": "*"
      }
    
  2. Fügen Sie dann in Ihrer app.js-Datei folgenden Code hinzu:

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

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

  3. Und denken Sie daran, alle .HTML-Dateien im Ansichtsordner zu behalten

Prost :)

1
Amulya Kashyap

In server.js bitte einbinden

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


app.get('/',function(req,res){
  res.sendFile(path.join(__dirname+'/index.html'));
  //__dirname : It will resolve to your project folder.
});
0

Ich wollte zulassen, dass Anfragen an "/" auf einer Express-Route verarbeitet werden, auf der sie zuvor von der Statics-Middleware verarbeitet wurden. Dies würde es mir ermöglichen, die reguläre Version von index.html oder eine Version zu rendern, die verkettetes und minimiertes JS und CSS geladen hat, abhängig von den Anwendungseinstellungen. Inspiriert von Andrew Homeyers Antwort , entschloss ich mich, meine HTML-Dateien - unverändert - in einen Ansichtsordner zu ziehen und Express so zu konfigurieren

   app.engine('html', swig.renderFile);
   app.set('view engine', 'html');
   app.set('views', __dirname + '/views');  

Und so einen Route Handler erstellt

 app.route('/')
        .get(function(req, res){
            if(config.useConcatendatedFiles){
                return res.render('index-dist');
            }
            res.render('index');       
        });

Das hat ganz gut geklappt.

0
K. Francis

Wenn Sie versuchen, eine HTML-Datei bereitzustellen, die BEREITS den gesamten Inhalt enthält, muss sie nicht gerendert, sondern nur bereitgestellt werden. Beim Rendern muss der Server aktualisiert oder Inhalte eingefügt werden, bevor die Seite an den Browser gesendet wird. Wie die anderen Antworten zeigen, sind zusätzliche Abhängigkeiten wie ejs erforderlich.

Wenn Sie den Browser einfach auf der Grundlage seiner Anforderung zu einer Datei weiterleiten möchten, sollten Sie res.sendFile () wie folgt verwenden:

const express = require('express');
const app = express();
var port = process.env.PORT || 3000; //Whichever port you want to run on
app.use(express.static('./folder_with_html')); //This ensures local references to cs and js files work

app.get('/', (req, res) => {
  res.sendFile(__dirname + '/folder_with_html/index.html');
});

app.listen(port, () => console.log("lifted app; listening on port " + port));

Auf diese Weise benötigen Sie neben Express keine weiteren Abhängigkeiten. Wenn Sie nur möchten, dass der Server Ihre bereits erstellten HTML-Dateien sendet, können Sie dies auf einfache Weise tun.

0
aleph_one

Für normales HTML benötigen Sie kein npm-Paket oder Middleware

benutze einfach folgendes:

app.get('/', function(req, res) {
    res.sendFile('index.html');
});
0
Shivam Chhetri