Express.jsページ全体をリロードすることを避ける

現在、私はビルドしようとしているサイトのソリューションがありません。ページはそれほど大きくはありませんが、私は、ナビゲーションバーに新しいタブを開いているときに、完全なサイトがリロードされないようにしたいと考えています。私はテンプレートエンジンとしてexpress.jsと口ひげを使用しています。私の目標は、コンテンツだけがリロードされ、Navbarを含むサイト全体ではないということです。Express.jsページ全体をリロードすることを避ける

ここでAjaxを使用する必要はありますか？と

私の構造はこれを行うには正しいですか？あなたが確認するためにしようとしている場合

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

出典

2017-09-07 soileh

あなたはそれがリロードされません何を意味するのですか？タイムアウトエラーを返しますか？ – turmuka

'キャッシング 'を参照してください。 https://evanhahn.com/express-dot-static-deep-dive/ –

あなたのコンテンツをキャッシュする必要があります – hjm

：のみページのコンテンツ部分を再読み込みするビューのトリックがあるかどうか私はわからない、この一般的な構造を持っているServer.jsファイルで

あなたのウェブページはリロードせず、スイッチのタブとあなたはウェブページがそれほど大きくない。 1つの.htmlファイル内にすべての情報を含めることをお勧めします。各ページにターゲティング可能なIDを持つdivが含まれている場合は、単に選択したコンテンツを表示/非表示にしてください。あなたはpage.jsとjqueryをチェックアウトして、このプロセスをもっと簡単にすることができます。

これは、これを実装する方法の簡単なデモは次のとおりです。

注：あなたは、NPMの初期化とNPM私のページにする必要があります

の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：

申し訳ありませんが、グローバルにスコープされたIFFEこれはコピー貼り付けです。

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

あなたは（このコンテンツのほとんどはリッピングされた）、私が建てアプリをチェックアウトすることができ、より良いデモをたい場合https://github.com/loganabsher/portfolio-2.0

出典

2017-09-07 17:08:04 gatsby

答えに例を挙げてください。コードの例[ツアー]（https://stackoverflow.com/tour）に参加してください。 – UmarZaii

もう少し詳しく読んだ後に、私が思ったこともありがとう。もう一つのことはわかりません。サイトが拡大して大きくなったら、すべてを1つのhtmlファイルに保存し、hide showで処理するか、他のよりスマートなテクニックであることが理にかなっています。たとえばajaxです。 – soileh

私はそれが一般的に1つのメインのHTMLページを持っているが、それは明らかに何をしようとしているかによって異なります。静的なWebページや実際のWebアプリケーションを作成しようとしていますか？ – gatsby

Express.jsページ全体をリロードすることを避ける

答えて

関連する問題