Nodejs 页面导航的问题
Nodejs 页面导航的问题
我用的是ejs-locals 模板引擎 我想知道我怎么做才可以实现 比如:跳到登陆页面可以让nav栏的登陆按钮成选中状态啊 或者说我想获得req.url怎么获取呢 谢谢各位
当然可以。在Node.js应用中使用EJS模板引擎时,你经常需要根据当前页面的URL来动态地改变导航栏(nav
)的状态,比如让当前页面对应的导航按钮处于选中状态。这通常通过服务器端逻辑将当前页面的URL传递给模板引擎,然后在客户端根据该信息来设置相应的样式。
示例代码
1. 后端代码 (Node.js)
首先,确保你在路由处理函数中将当前请求的URL传递给EJS模板:
const express = require('express');
const app = express();
app.engine('html', require('ejs').renderFile);
app.set('view engine', 'html');
app.get('/', function(req, res) {
res.render('index', { currentPage: '/' });
});
app.get('/login', function(req, res) {
res.render('index', { currentPage: '/login' });
});
app.listen(3000, () => console.log('Server running on port 3000'));
在这个例子中,我们使用Express框架,并在每个路由处理函数中将req.url
作为变量传递给模板,这样模板就可以知道当前页面的URL了。
2. 前端代码 (EJS模板)
接下来,在你的EJS模板文件(例如index.ejs
)中,你可以使用这个变量来动态设置导航栏的样式:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example Page</title>
<style>
.active {
color: red;
}
</style>
</head>
<body>
<nav>
<ul>
<li><a href="/" class="<%= currentPage === '/' ? 'active' : '' %>">Home</a></li>
<li><a href="/login" class="<%= currentPage === '/login' ? 'active' : '' %>">Login</a></li>
</ul>
</nav>
</body>
</html>
解释
- 在后端代码中,我们定义了两个路由,分别处理主页和登录页面的请求。每个路由都会渲染
index.ejs
模板,并传递当前页面的URL作为参数。 - 在前端EJS模板中,我们使用EJS表达式
<%= ... %>
来动态地添加active
类名到当前页面对应的链接上。如果当前页面的URL与链接的href属性匹配,则显示active
类,否则不显示。
这种方式可以让你的导航栏动态地反映用户当前访问的页面。
注:因为导航栏是 layout里面的 公用的 我想根据不同的url 实现菜单的选中状态
哈哈 谢谢 刚刚学习 对中间件不熟 不知道放到哪里 以后用的时候回来重温一下
谢谢 能解释一下 第二个 www跳转到根域名 有什么作用吗?
要实现页面导航并让特定的导航按钮处于选中状态,可以通过在渲染模板时传递当前页面的 URL 给视图层来实现。这样在前端可以动态地根据 req.url
来改变按钮的状态。
以下是一个简单的示例:
-
后端代码(Node.js + Express + EJS):
const express = require('express'); const app = express(); app.use(express.static('public')); app.engine('ejs', require('ejs-locals')); app.get('/', (req, res) => { res.render('index', { currentUrl: req.url, isLoginActive: req.url === '/login' }); }); app.get('/login', (req, res) => { res.render('login', { currentUrl: req.url, isLoginActive: true }); }); app.listen(3000, () => console.log('Server started on port 3000'));
-
前端代码(EJS模板):
<!-- index.ejs --> <!DOCTYPE html> <html> <head> <title>Home Page</title> </head> <body> <nav> <a href="/" class="<%= currentUrl === '/' ? 'active' : '' %>">Home</a> <a href="/login" class="<%= currentUrl === '/login' ? 'active' : '' %>">Login</a> </nav> <div id="content"> <!-- Your content here --> </div> </body> </html>
-
CSS样式(可选):
/* public/styles.css */ .active { font-weight: bold; color: red; }
解释
- 在Express路由处理函数中,我们把当前请求的URL (
req.url
) 和是否应该激活登录按钮 (isLoginActive
) 作为参数传递给EJS模板。 - 在EJS模板中,我们通过判断
currentUrl
是否等于/login
来决定给哪个导航链接添加active
类。 - 可以通过CSS样式定义
.active
类来显示选中状态的效果。
这样,当用户访问不同的页面时,对应的导航按钮就会被自动标记为选中状态。