Express.js Évitez recharger toute la page

actuellement je n'ai pas de solution pour un site que j'essaie de construire. La page n'est pas très grande mais je veux réaliser que le site complet ne se recharge pas quand j'ouvre un nouvel onglet dans la barre de navigation. J'utilise express.js et moustache comme moteur de template. Mon but est que seul le contenu soit rechargé et non l'ensemble du site y compris la Navbar.Express.js Évitez recharger toute la page

Dois-je utiliser Ajax ici? et

Ma structure est-elle correcte pour cela?

Sur le fichier Server.js j'ai cette structure générale, je ne sais pas s'il y a un truc avec vue seulement recharger la partie du contenu d'une page:

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

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

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

Source

2017-09-07 soileh

que voulez-vous dire qu'il ne se recharge pas? il renvoie une erreur de délai d'attente? – turmuka

Voir 'mise en cache '. https://evanhahn.com/express-dot-static-deep-dive/ –

vous devez mettre en cache votre contenu – hjm

Si vous essayez de vous assurer votre page Web ne se recharge pas tout en basculant les onglets et votre page Web n'est pas très grande. Je recommande de contenir toutes vos informations dans un fichier .html, avoir chaque "page" contenue par un div avec un identifiant cible, puis simplement masquer/afficher le contenu qui est sélectionné. Vous pourriez vouloir vérifier page.js et jquery ils rendent ce processus beaucoup plus facile.

Ceci est une démonstration rapide de la façon de mettre en œuvre cette:

Note: vous devez NPM et initialisationNPM page i

index.html:

<html> 
<head> 
    <title></title> 
</head> 
<body> 
    <div id="title-area"> 
    <h1>--your title--</h1> 
    <nav> 
    <ul> 
    <li><a href="/">Home</a></li> 
    <li><a href="/anotherpage">Another Page</a></li> 
    </ul> 
    </nav> 
    </div> 
    <div id="home"> 
    --home content-- 
    </div> 
    <div id="another-page"> 
    --other page content-- 
    </div> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
    <script src="vendors/scripts/page.js"></script> 
    <script src="scripts/controllers/routes.js"></script> 
</body> 
</html>

scripts/controllers/routes.js:

désolé pour la portée globale de l'IFFE fonctions, ceci est copié collé.

'use strict'; 
(function(module){ 
const homeController = {}; 
homeController.init = function(){ 
    $('#another-page').hide(); 
    $('title').html('Home'); 
    $('#home').fadeIn('slow'); 
} 
module.homeController = homeController; 
})(window); 

(function(module){ 
const anotherpageController = {}; 
anotherpageController.init = function(){ 
    $('#home').hide(); 
    $('title').html('anotherpage'); 
    $('#another-page').fadeIn('slow'); 
} 
module.anotherpageController = anotherpageController; 
})(window); 

page('/', homeController.init); 
page('/anotherpage', anotherpageController.init); 

page();

si vous souhaitez une meilleure démo, vous pouvez vérifier l'application que je construit (où la plupart de ce contenu a été rippé) https://github.com/loganabsher/portfolio-2.0

Source

2017-09-07 17:08:04 gatsby

S'il vous plaît fournir un exemple à votre réponse. Exemple avec des codes. Faites un [tour] (https://stackoverflow.com/tour). – UmarZaii

Ok merci c'est ce que je pensais aussi après avoir lu un peu plus. Une chose de plus je ne suis pas sûr. Si le site grandit et devient plus gros, il est toujours logique de garder tout dans un fichier html et de les gérer avec hide show ou sont les autres techniques plus intelligentes. Par exemple ajax. – soileh

Je dirais qu'il est généralement standard d'avoir une page html principale, mais cela dépend évidemment de ce que vous essayez de faire. Essayez-vous de créer une page Web statique ou une application Web? – gatsby

Express.js Évitez recharger toute la page

Répondre

Questions connexes