Question

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

我必须在这里使用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文件中包含所有信息，让每个“页面”包含一个具有可定位ID的div，然后只需隐藏/显示所选内容。您可能想查看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>

脚本/控制器/ 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避免重新加载整个页面

1 个答案: