Express.js 避免重新加载整个页面

Question

目前我没有针对我正在尝试构建的站点的解决方案。该页面不是那么大，但我想实现在导航栏中打开新选项卡时不会重新加载完整站点。我使用 express.js 和 mustache 作为模板引擎。我的目标是，只有内容会重新加载，而不是包括导航栏在内的整个站点。

我必须在这里使用 Ajax 吗？和

我的结构是否正确？

在 Server.js 文件中，我有这样的一般结构我不确定视图是否有只重新加载页面内容部分的技巧：

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

Answer 1

如果您试图确保您的网页在切换标签页时不会重新加载并且您的网页不是那么大。我建议将所有信息包含在一个 .html 文件中，将每个 "page" 包含在具有可定位 ID 的 div 中，然后简单地 hide/show 选择的内容。您可能想查看 page.js 和 jquery，它们使这个过程更容易。

这是如何实现的快速演示：

注意：您将需要 npm init 和 npm i page

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

Express.js 避免重新加载整个页面

Express.js Avoid reload the whole page

javascript

jquery

node.js

mustache

express