ejs 文件中未定义变量

Question

我在一个项目上遇到了一个小问题，我使用 ejs 作为模板引擎并使用 expressjs 作为服务器框架，所以当我验证用户数据正确并且我传递一个带有错误的 const 时，问题就来了验证数据时可能会发生，例如：（密码长度，存在电子邮件...等），（我使用 mongoose 作为 ODM）。

获取路径如下：

router.get("/login-register", (req, res) => {
    res.render("login-register");
});

这里是 post 路线的代码：

router.post("/login-register", async (req, res) => {
const userRegisterFetched = usersSchm(req.body);

// Save the user data from a html form and declare a empty const where im going to put the errors
await userRegisterFetched.save();
const errorToClient = [];

// If the password lenght arent coincide with the if statement throw an error
if(userRegisterFetched.password.length <= 0) {
    errorToClient.push("The password cannot be empty");
    } else if(userRegisterFetched.password.length < 8) {
        errorToClient.push("The password must have 8 characters at least!");
    };

// If the passwords dont coincide it throw an error
if(userRegisterFetched.repeat_password !== userRegisterFetched.password) {
    errorToClient.push("The password dont coincide");
    } else if(userRegisterFetched.password !== userRegisterFetched.repeat_password) {
        errorToClient.push("The password dont coincide");
    };

下一行是当我在数据验证后将 const 传递给 .ejs 文件时，但是在 .ejs 文件之后 return 未定义 var

if(errorToClient.length > 0) {
    res.render("login-register", { errorToClient });
    } else {
        res.send("OK")
    };

稍后，我使用 forEach 语句显示保存在数组 const

中的错误

<% errorToClient.forEach((errorToClient) => {%>
    <div class="alert alert-warning">
        <h3><%= errorToClient %></h3>
    </div>
    <%}
)%>

当我访问路线“/login-register”时，我得到了这个：

ReferenceError: E:\JavaScript\web_foor\src\views\pages\login-register.ejs:2
    1| <%- include ("../partials/main-header") %>

 >> 2| <% errorToClient.forEach((errorToClient) => {%>

    3|         <div class="alert alert-warning">

    4|             <h3><%= errorToClient %></h3>

    5|         </div>

errorToClient is not defined
    at eval ("E:\JavaScript\web_foor\src\views\pages\login-register.ejs":13:8)
    at login-register (E:\JavaScript\web_foor\node_modules\ejs\lib\ejs.js:692:17)
    at tryHandleCache (E:\JavaScript\web_foor\node_modules\ejs\lib\ejs.js:272:36)
    at View.exports.renderFile [as engine] (E:\JavaScript\web_foor\node_modules\ejs\lib\ejs.js:489:10)
    at View.render (E:\JavaScript\web_foor\node_modules\express\lib\view.js:135:8)
    at tryRender (E:\JavaScript\web_foor\node_modules\express\lib\application.js:640:10)
    at Function.render (E:\JavaScript\web_foor\node_modules\express\lib\application.js:592:3)
    at ServerResponse.render (E:\JavaScript\web_foor\node_modules\express\lib\response.js:1017:7)
    at E:\JavaScript\web_foor\src\routes\/index.routes.js:25:9
    at Layer.handle [as handle_request] (E:\JavaScript\web_foor\node_modules\express\lib\router\layer.js:95:5)

提前致谢:)

Answer 1

当你访问“/login-register”路由时，请求命中：

router.get("/login-register", (req, res) => {
    res.render("login-register");
});

并且没有定义 errorToClient。您可以通过 express-session 模块使用 req.session 和 res.locals 对象编写自己的中间件来显示错误，或者您可以使用 express-flash or connect-flash。我更喜欢 connect-flash.

安装 connect-flash 后，您只需在 app.js 文件中添加以下两行即可在您的应用程序中使用它：

var flash = require('connect-flash');
 
app.use(flash());

然后在你的路由处理函数中使用它，发生错误后只需重定向：

    if(userRegisterFetched.password.length <= 0) {
        req.flash("errorToClient","The password cannot be empty");
        return res.redirect("/login-register");
    } else if(userRegisterFetched.password.length < 8) {
        req.flash("errorToClient","The password must have 8 characters at least!");
        return res.redirect("/login-register");
    } else {
        res.send("ok");
    }

也像这样更改您的获取路线：

router.get("/login-register", (req, res) => {
    let message = req.flash('errorToClient');
    if (message.length > 0) {
        message = message;
    } else {
        message = null;
    }
    res.render("login-register", {errorToClient: message});
});

在你的ejs中：

<% if(errorToClient) { %>
   <% errorToClient.forEach((errorToClient) => {%>
      <div class="alert alert-warning">
        <h3><%= errorToClient %></h3>
      </div>
   <% }) %>
<% } %>

您也可以通过只打印最新的错误来跳过 ejs 中的 for 循环。只需更改“/login-register”路由处理程序中的这一行：

if (message.length > 0) {
    message = message[0];
}

然后在 ejs 中将错误块更改为：

<% if(errorToClient) { %>
   <div class="alert alert-warning">
      <h3><%= errorToClient %></h3>
   </div>
<% } %>

Answer 2

我以前遇到过这个问题，我用connect-flash模块解决了。

检查 npmjs.com 了解更多信息： https://www.npmjs.com/package/connect-flash

ejs 文件中未定义变量

variable is undefined on ejs file

javascript

node.js

express

ejs

template-engine