我正在使用 Node.js 和 Expressjs 构建我的第一个 Web 应用程序。对于我的模板/视图引擎,我使用 Express-handlebars,但我有一些问题。
我希望能够根据左侧菜单栏中选择的菜单动态更改红色区域中的内容。
我已经成功设置了渲染正确页面的路由,但是我可以像第一个一样添加另一个“子目录”吗?例如:“domain/admins/adminpanel/dashboard”在红色区域显示用户仪表板,“domain/admins/adminpanel/posts”在红色区域显示其他内容?
我尝试过使用车把部分,但我不太明白以我想要的方式使用它的目的。
与其发布 10 张图片,不如只显示整个代码更容易。: https ://github.com/Jakobtottrup/OptekSemester2/tree/master/Web
屏幕截图显示“红色区域” 页面从此处呈现
router.get('/adminpanel', function(req, res){
res.render('admin-backend/adminsDashboard', {title: "Admin Panel", name:
"Brugers navn"});
});
这是构成页面的 HTML
<div class="container">
<div class="row">
<div class="col-md-3">
<ul class="nav nav-pills nav-stacked">
<li class="active"><a href="#"><i class="fa fa-crosshairs fa-fw"></i>{{ name }}</a></li>
<li><a href=""><i class="fa fa-edit fa-fw"></i>Posts</a></li>
<li><a href="create_seats"><i class="fa fa-th fa-fw"></i>Bordopstilling</a></li>
<li><a href="seating_groups"><i class="fa fa-users fa-fw"></i>Siddegrupper</a></li>
<li><a href="tournaments"><i class="fa fa-sitemap fa-fw"></i>Turneringer</a></li>
<li><a href="users"><i class="fa fa-user fa-fw"></i>Brugere</a></li>
<li><a href="sponsors"><i class="fa fa-tasks fa-fw"></i>Sponsors</a></li>
<li><a href="mails"><i class="fa fa-envelope fa-fw"></i>Mails</a></li>
<li><a href="events"><i class="fa fa-cogs fa-fw"></i>Dette LAN</a></li>
</ul>
</div>
<div class="col-md-9 well">
Panel content here
</div>
</div>