Nodejs 页面导航的问题

发布于 1周前 作者 sinazl 来自 nodejs/Nestjs

Nodejs 页面导航的问题

我用的是ejs-locals 模板引擎 我想知道我怎么做才可以实现 比如:跳到登陆页面可以让nav栏的登陆按钮成选中状态啊 或者说我想获得req.url怎么获取呢 谢谢各位

6 回复

当然可以。在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 实现菜单的选中状态

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

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

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

要实现页面导航并让特定的导航按钮处于选中状态,可以通过在渲染模板时传递当前页面的 URL 给视图层来实现。这样在前端可以动态地根据 req.url 来改变按钮的状态。

以下是一个简单的示例:

  1. 后端代码(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'));
  2. 前端代码(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>
  3. CSS样式(可选):

    /* public/styles.css */
    .active {
        font-weight: bold;
        color: red;
    }

解释

  • 在Express路由处理函数中,我们把当前请求的URL (req.url) 和是否应该激活登录按钮 (isLoginActive) 作为参数传递给EJS模板。
  • 在EJS模板中,我们通过判断 currentUrl 是否等于 /login 来决定给哪个导航链接添加 active 类。
  • 可以通过CSS样式定义 .active 类来显示选中状态的效果。

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

回到顶部
AI 助手
你好,我是IT营的 AI 助手
您可以尝试点击下方的快捷入口开启体验!