我正在使用Node.js和Expressjs构建我的第一个Web应用程序。对于我的模板/视图引擎,我使用Express-Handlebars,但我遇到了一些问题。
我希望能够根据左侧菜单栏中选择的菜单动态更改红色区域中的内容。
我已经成功设置了渲染正确页面的路线,但是我可以添加另一个"子目录"和第一个一样? 例如:"域/管理员/ adminpanel /仪表板"显示红色区域中的用户仪表板和" domain / admins / adminpanel / posts"在红色区域显示其他内容?
我尝试使用把手部分,但我不太明白以我想要的方式使用它的目的。
不是发布10张图片,而是显示整个代码更容易: https://github.com/Jakobtottrup/OptekSemester2/tree/master/Web
Screenshot showing 'red area' 页面从这里呈现
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>