Nodejs 如何用res.locals代替flash

Nodejs 如何用res.locals代替flash

express3.0支持flash了，说是用res.locals代替flash。我也是这引入flash中间件，但是不好用。 我想实现一个注册页面，在密码不一致的时候返回错误提示。我在注册页面的post路由里添加

if(pwd!=repwd){
    res.locals.pwd_unsame=true;
    res.redirect("/reg");
}

并且在reg.ejs中这样写

<span id="password_err" class="text-error"><%if(pwd_unsame){%>密码不一致<%}%></span>

但是在首次访问/reg是，由于还没有设定 res.locals.pwd_unsame，所以会得到“pwd_unsame is not defined”的提示。

请问到底如何用res.locals代替flash？


8 回复

Node.js 如何用 res.locals 代替 flash

背景

在 Express 3.0 中，res.locals 用于在渲染视图时传递局部变量。虽然它不像 flash 那样直接存储临时消息，但可以通过设置 res.locals 来达到类似的效果。

示例

假设你有一个简单的注册表单，当用户输入的密码与确认密码不一致时，希望在页面上显示错误提示信息。

1. 设置路由

首先，在你的 Express 应用中设置一个处理注册表单提交的 POST 路由：

const express = require('express');
const app = express();

app.set('view engine', 'ejs');

app.get('/reg', (req, res) => {
    res.render('register'); // 渲染注册页面
});

app.post('/reg', (req, res) => {
    const { pwd, repwd } = req.body;

    if (pwd !== repwd) {
        // 如果密码不一致，将错误信息设置到 res.locals
        res.locals.error = "密码不一致";
        return res.redirect('/reg');
    }

    // 如果密码一致，继续处理其他逻辑
    // ...
});

app.listen(3000, () => {
    console.log('Server is running on port 3000');
});

2. 在视图中使用 res.locals

在 register.ejs 文件中，你可以通过检查 res.locals.error 是否存在来决定是否显示错误信息：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
</head>
<body>
    <h1>注册</h1>
    <form action="/reg" method="POST">
        <label for="pwd">密码:</label>
        <input type="password" id="pwd" name="pwd">
        <br>
        <label for="repwd">确认密码:</label>
        <input type="password" id="repwd" name="repwd">
        <br>
        <button type="submit">注册</button>
    </form>

    <% if (locals.error) { %>
        <span id="password_err" class="text-error"><%= locals.error %></span>
    <% } %>
</body>
</html>

解释

  • 设置 res.locals: 当检测到密码不一致时，我们将错误信息存储在 res.locals.error 中。这样，无论何时渲染 register.ejs，都可以访问这个变量。

  • 在视图中使用: 在 EJS 模板中，我们使用 <%= locals.error %> 来输出 res.locals.error 的值。如果 error 存在，则显示错误信息；否则，不会显示任何内容。

这种方式比使用 flash 更简单，因为它不需要额外的中间件，并且可以更灵活地控制传递给视图的数据。


express3.0不支持flash了

res.redirect这。。。

同问

用session保存错误信息了在付给res.locals.error

我是用return res.render(“reg”);代替了res.redirect("/reg");

这个我试试，谢谢

使用 res.locals 来替代 flash 可以通过设置本地变量来传递数据到视图。res.locals 是一个对象，它在每一次请求处理期间都会被重置，因此可以在处理过程中设置一些临时数据，并在渲染视图时使用这些数据。

根据你的描述，你需要在用户尝试注册时检查密码是否一致，并在密码不一致时将错误信息传递给视图。你可以按照以下步骤来实现：

  1. 在 POST 路由中检查密码是否一致。
  2. 如果密码不一致，设置 res.locals 中的相应属性。
  3. 将请求重定向回注册页面。
  4. 在视图文件中使用 res.locals 设置的属性来显示错误信息。

下面是具体的代码示例：

后端代码（Express 路由）

const express = require('express');
const app = express();

app.set('view engine', 'ejs'); // 设置视图引擎为 EJS

app.get('/reg', (req, res) => {
    res.render('register'); // 渲染注册页面
});

app.post('/register', (req, res) => {
    const { pwd, repwd } = req.body;

    if (pwd !== repwd) {
        res.locals.pwd_unsame = true; // 设置本地变量
        res.redirect('/reg'); // 重定向回注册页面
    } else {
        // 密码一致，进行注册逻辑
        res.send('注册成功！');
    }
});

app.listen(3000, () => {
    console.log('服务器运行在 http://localhost:3000');
});

视图文件（register.ejs）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
</head>
<body>
    <form action="/register" method="POST">
        <label for="pwd">密码:</label>
        <input type="password" id="pwd" name="pwd">
        <br>
        <label for="repwd">确认密码:</label>
        <input type="password" id="repwd" name="repwd">
        <br>
        <button type="submit">注册</button>
    </form>

    <span id="password_err" class="text-error">
        <% if (locals.pwd_unsame) { %>
            密码不一致
        <% } %>
    </span>
</body>
</html>

在这个示例中，我们通过 res.locals.pwd_unsame 来传递密码不一致的信息，并在视图文件中使用 <% if (locals.pwd_unsame) { %> ... <% } %> 来条件渲染错误信息。这样可以避免在首次访问 /reg 页面时出现 pwd_unsame is not defined 的问题。

回到顶部