Express.js登录页面报错：无法在视图目录找到login视图

错误信息 #

启动服务器访问登录页面时出现以下错误：

Error: Failed to lookup view "login" in views directory "C:\Users\Monthy Goreng\Documents\Microsoft Visual Studio Code Project\Javascript Project\Aplikasi Website Restoran\src\Tampilan"

报错栈：

at Function.render (C:\Users\Monthy Goreng\Documents\Microsoft Visual Studio Code Project\Javascript Project\Aplikasi Website Restoran\node_modules\express\lib\application.js:597:17)
at ServerResponse.render (C:\Users\Monthy Goreng\Documents\Microsoft Visual Studio Code Project\Javascript Project\Aplikasi Website Restoran\node_modules\express\lib\response.js:1039:7)
at _clear (C:\Users\Monthy Goreng\Documents\Microsoft Visual Studio Code Project\Javascript Project\Aplikasi Website Restoran\node_modules\req-flash\index.js:18:9)
at login (C:\Users\Monthy Goreng\Documents\Microsoft Visual Studio Code Project\Javascript Project\Aplikasi Website Restoran\Controllers\login-controller.js:14:13)
at Layer.handle [as handle_request] (C:\Users\Monthy Goreng\Documents\Microsoft Visual Studio Code Project\Javascript Project\Aplikasi Website Restoran\node_modules\express\lib\router\layer.js:95:5)
at next (C:\Users\Monthy Goreng\Documents\Microsoft Visual Studio Code Project\Javascript Project\Aplikasi Website Restoran\node_modules\express\lib\router\route.js:144:13)
at isLogout (C:\Users\Monthy Goreng\Documents\Microsoft Visual Studio Code Project\Javascript Project\Aplikasi Website Restoran\koneksi\verifikasi.js:14:13)
at Layer.handle [as handle_request] (C:\Users\Monthy Goreng\Documents\Microsoft Visual Studio Code Project\Javascript Project\Aplikasi Website Restoran\node_modules\express\lib\router\layer.js:95:5)
at next (C:\Users\Monthy Goreng\Documents\Microsoft Visual Studio Code Project\Javascript Project\Aplikasi Website Restoran\node_modules\express\lib\router\route.js:144:13)
at Route.dispatch (C:\Users\Monthy Goreng\Documents\Microsoft Visual Studio Code Project\Javascript Project\Aplikasi Website Restoran\node_modules\express\lib\router\route.js:114:3)

用户怀疑问题出在login.ejs、login-controller.js和login-route.js中，请求定位并解决错误。

相关代码 #

login.ejs #

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login</title>
    <!-- CSS -->
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">
    <!-- JS -->
    <script src="https://code.jquery.com/jquery-3.5.1.min.js" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

</head>
<body style="padding: 0px !important;">
    <div class="container h-100">
        <div class="row h-100 justify-content-center align-items-center">
            <form action="<%= url %>login/auth" method="POST" class="col-md-4 card">
                
                <h2>Login</h2>
                <div class="form-group">
                    <label>Username:</label>
                    <input type="text" name="username" class="form-control" placeholder="Masukan Username" required>
                </div>
                <div class="form-group">
                    <label>Password:</label>
                    <input type="password" name="password" class="form-control" placeholder="Masukan Password" required>
                </div>

                <button type="submit" class="btn btn-primary">Login</button>
                <a href="<%= url %>register" class="btn btn-success">Register</a>
                
                <%if (pesanFlash) { %>
                    <div class="alert alert-<%= colorFlash %> alert-dismissible fade show mt-3" role="alert">
                        <strong><%= statusFlash %></strong> 
                        <%= pesanFlash %>
                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                <% } %>

            </form>
        </div>  
    </div>
</body>
</html>

login-controller.js #

const config = require('../Koneksi/koneksi');

let mysql = require('mysql');
let pool  = mysql.createPool(config);

pool.on('error',(err)=> {
    console.error(err);
});

module.exports ={

    login(req,res){
        res.render("login",{
            url : 'http://localhost:5050/',

            colorFlash: req.flash('color'),
            statusFlash: req.flash('status'),
            pesanFlash: req.flash('message'),
        });
    },

    loginAuth(req,res){
        let username = req.body.username;
        let password = req.body.pass;
        if (username && password) {
            pool.getConnection(function(err, connection) {
                if (err) throw err;
                connection.query(
                    `SELECT * FROM table users WHERE username = ? AND password = SHA2(?,512)`
                , [username, password],function (error, results) {
                    if (error) throw error;  
                    if (results.length > 0) {


                        req.session.loggedin = true;
                        req.session.userid = results[0].id_user;
                        req.session.username = results[0].username;
                        res.redirect('/');
                    } else {

                        req.flash('color', 'danger');
                        req.flash('status', 'Oops..');
                        req.flash('message', 'Akun tidak ditemukan');
                        res.redirect('/login');
                    }
                });
                connection.release();
            })
        } else {
            res.redirect('/login');
            res.end();
        }
    },

'http://localhost:5050/login/logout'
    logout(req,res){

        req.session.destroy((err) => {
            if(err) {
                return console.log(err);
            }

            res.clearCookie('secretname');
            res.redirect('/login');
        });
    },
}

login-route.js #

const router = require('express').Router();
const loginController = require('../Controllers').login;
const verifikasiUser = require('../Koneksi/verifikasi');

router.get('/', verifikasiUser.isLogout, loginController.login);
router.get('/logout', loginController.logout);

router.post('/auth', loginController.loginAuth);

module.exports = router;

问题排查与修复 #

1. 视图文件路径问题（核心错误） #

错误提示明确找不到login视图，先检查：

• 确认login.ejs文件是否存在于目录C:\Users\Monthy Goreng\Documents\Microsoft Visual Studio Code Project\Javascript Project\Aplikasi Website Restoran\src\Tampilan下，文件名是否为login.ejs（注意大小写，Windows系统虽然不区分，但Express匹配时会严格对应）。
• 检查Express主配置文件（如app.js）中的视图设置，确保正确指定了视图引擎和目录：

const path = require('path');
// 设置EJS为视图引擎
app.set('view engine', 'ejs');
// 设置视图目录，用path模块处理路径避免Windows斜杠问题
app.set('views', path.join(__dirname, 'src/Tampilan'));

2. login-controller.js中的错误 #

• 多余代码导致语法错误：代码中有一行无效的字符串'http://localhost:5050/login/logout'，直接删除该行，否则会导致控制器模块加载失败。
• 密码字段获取错误：表单中密码字段的name是password，但代码中写的是let password = req.body.pass;，改为let password = req.body.password;才能正确获取前端传入的密码。
• SQL语法错误：查询语句中多了table关键字，正确写法应为SELECT * FROM users WHERE username = ? AND password = SHA2(?,512)。

修复后的login-controller.js关键部分：

loginAuth(req,res){
    let username = req.body.username;
    let password = req.body.password; // 修正字段名
    if (username && password) {
        pool.getConnection(function(err, connection) {
            if (err) throw err;
            connection.query(
                `SELECT * FROM users WHERE username = ? AND password = SHA2(?,512)` // 修正SQL语句
            , [username, password],function (error, results) {
                // ... 原有逻辑
            });
            connection.release();
        })
    } else {
        res.redirect('/login');
        res.end();
    }
},

// 删掉多余的'http://localhost:5050/login/logout'这行
logout(req,res){
    // ... 原有逻辑
},

3. login-route.js中的潜在问题 #

• 确认../Controllers目录下的index.js是否正确导出了login模块，如果没有，应直接引入控制器文件：

const loginController = require('../Controllers/login-controller');

总结 #

先优先解决视图路径问题，确保login.ejs在指定目录且Express配置正确；再修复控制器中的语法和逻辑错误，最后检查路由的模块引入是否正确。按此步骤排查后，登录页面应该能正常加载。

内容的提问来源于stack exchange，提问作者MonthyGoreng