Website ohne Seitenaktualisierung mit nodeJs

Question

Ich versuche eine Website mit node.js zu erstellen. Ich möchte, dass der Inhalt ohne Seitenaktualisierung geladen wird. Ich bin mit der AJAX-Methode vertraut. Aber hat jemand eine Idee, wie man dasselbe mit NodeJs erreicht?

Hier ist, was ich zur Zeit mache (ich glaube nicht, es ist der einzige Weg):

Platz eine Middleware zwischen dem aller Anforderung GET (Wie auf jedem Refresh Aktion wird es sein, GET-Anfrage). Hier senden Sie alle grundlegenden Komponenten der Website (ich nenne es die Hauptphase). Alle grundlegenden Layout, Stylesheets wird geladen.

Wenn die Anforderung vollständig abgeschlossen ist, wird vom Client eine XHR-Anforderung basierend auf der aktuellen Adresse ausgelöst. Die Anfrage gibt den HTML-Code zurück, der benötigt, um als Inhalt angezeigt zu werden.

Wenn XHR abgeschlossen ist, setzen Sie den abgerufenen HTML-Code auf "Hauptinhalt" iFrame.

Kann mir jemand sagen, gibt es eine andere Möglichkeit, das Gleiche zu tun?

Vielen Dank.

Answer 1

Ich hatte viel Glück ist Gulp, mit dem Plugin Schluck-Connect. Ich baue eine API mit Node.js und Express.Js, aber immer noch auf Gulp für meine gesamte Automatisierung, egal welche Art von Projekt.

http://gulpjs.com/

Gulp Mit öffnet viele Türen Ihre Workflow-Automatisierung zu verbessern, wie Code minifying, Komprimieren von Bildern, Kopieren/Einfügen von Dateien usw.

Hoffnung, die Sie mit ihm so viel Glück haben wie ich.

Hier ist, wie es für Ihren Server aussehen würde.

// Add requiements 
var gulp  = require ('gulp'), 
    connect  = require ('gulp-connect'); 


var jsSources; 


//Setup path variables 

jsSources = [ 
        'builds/development/components/scripts/*.js' 
       ]; 


//Javascript Files 
gulp.task('js', function(){ 
    gulp.src(jsSources) 
     .pipe(connect.reload()) 
}); 

// Watch all sources file directorys and run tasks if changes happen. 
gulp.task('watch', function(){ 
    gulp.watch(jsSources, ['js']); 

}); 


// Start a server for project. 
gulp.task('connect', function(){ 
    connect.server({ 
    root : '', 
    livereload : true, 
    fallback: 'builds/development/index.html' 
    }); 
}); 


// Run all tasks above by using default command "Gulp". 
gulp.task('default', ['watch', 'connect']); 

Sobald dies ist Setup Sie würde nur CD in Ihrem termincal und geben Gulp

Answer 2

Diese Arten von Websites einzelne ausgelagertem Website aufgerufen werden ... Sie eine Seite ohne die Seite zu aktualisieren laden.

Sie können dies erreichen, indem Sie die Funktionen ajax und history.pushState() verwenden.

Zuerst laden Sie die Seite, indem Sie eine Anfrage mit Ajax an den Server senden.

Wenn der Server eine HTML-Seite bei Antwort sendet, laden Sie diese Seite auf ein Div-Element.

Gleichzeitig ändern Sie auch den Browserverlauf mit der Funktion history.pushState().

So scheint die Seite ohne Aktualisierung geändert werden.