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类，否则不显示。

这种方式可以让你的导航栏动态地反映用户当前访问的页面。

sinazl 2楼•1 个月前作者

注:因为导航栏是 layout里面的公用的我想根据不同的url 实现菜单的选中状态

itying888 3楼•1 个月前

用JS，获取当前页面URL地址，然后去更新nav的按钮状态。。

gougou168 4楼•1 个月前

哈哈谢谢刚刚学习对中间件不熟不知道放到哪里以后用的时候回来重温一下

eggper 5楼•1 个月前

谢谢能解释一下第二个 www跳转到根域名有什么作用吗?

nodeper 6楼•1 个月前

要实现页面导航并让特定的导航按钮处于选中状态，可以通过在渲染模板时传递当前页面的 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 类来显示选中状态的效果。

这样，当用户访问不同的页面时，对应的导航按钮就会被自动标记为选中状态。