我正在使用 NodeJS 处理一个简单的验证表单,问题是 register.ejs 无法呈现,我尝试修改路径、更改默认文件夹但它仍然不起作用,我是 Express 新手和节点所以详细的解释将不胜感激,或任何类型的解释。谢谢
server.js:
const express = require('express');
const bodyParser = require('body-parser');
const { check, validationResult } = require('express-validator');
let path = require('path');
const app = express();
const port = 5000;
app.set('view engine', 'ejs');
app.set('views', 'client');
app.use(express.static('client'))
app.get('', (req, res) => {
res.render('index')
});
app.get('/register', (req, res) => {
res.render('register')
})
app.listen(port, () => console.log(`Listening on port ${port}`));
index.ejs:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="/styles/style.css" type="text/css">
<link rel="stylesheet" href="/styles/userinfo.css" type="text/css">
<title>Main page</title>
</head>
<body>
<nav>
<div class="logo">
<h1>Logo</h1>
</div>
<ul class="list-items">
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">About</a>
</li>
<li>
<a href="./courses/courses.html">Courses</a>
</li>
<li>
<a href="#">Projects</a>
</li>
<li>
<a href="./register/register">Register</a>
</li>
<div class="button">
<button>Try Pro for Free!</button>
</div>
</ul>
<div class="icons">
<div class="bell-notif">
<span class="badge"></span>
<i class="fa fa-bell"></i>
</div>
</div>
<div class="hamburger-menu">
<div class="line line1"></div>
<div class="line line2"></div>
<div class="line line3"></div>
</div>
</nav>
<div>
<section class="user-info">
<div class="user">
<img
alt="user-image"
class="user-image"
/>
<button class="edit-btn">Edit</button>
<span class="username">
</span>
<span class="user-status">Premium Member</span>
</div>
<div class="streak">
<h3 class="streak-days"></h3>
<p class="streak-text"></p>
</div>
</section>
</div>
<script src="./scripts/main.js"></script>
<script src="./scripts/userinfo.js"></script>
</body>
</html>
register.ejs:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="../styles/register.css" type="text/css" />
<link rel="stylesheet" href="../styles/style.css" type="text/css" />
<title>Register</title>
</head>
<body>
<nav>
<div class="logo">
<h1>Logo</h1>
</div>
<ul class="list-items">
<!--class={!open ? "list-items" : "list-items active"}-->
<li>
<a href="../index.html">Home</a>
</li>
<li>
<a href="#">About</a>
</li>
<li>
<a href="../courses/courses.html">Courses</a>
</li>
<li>
<a href="#">Projects</a>
</li>
<li>
<a href="./register/register.ejs">Register</a>
</li>
<div class="button">
<button>Try Pro for Free!</button>
</div>
</ul>
<div class="icons">
<div class="bell-notif">
<span class="badge"></span>
<i class="fa fa-bell bell"></i>
</div>
</div>
<div class="hamburger-menu">
<div class="line line1"></div>
<div class="line line2"></div>
<div class="line line3"></div>
</div>
</nav>
<div class="login-container">
<form class="form">
<h1 class="login-heading">Register to support us</h1>
<br />
<div class="inputfield">
<input type="text" placeholder="Username" class="username-field" />
<p class="error error-username">{Error here}</p>
</div>
<div class="inputfield">
<input type="text" placeholder="Email" class="email-field" />
</div>
<p class="error error-email">{Error here}</p>
<div class="inputfield">
<input type="password" placeholder="Password" class="password-field" />
<p class="error error-password">{Error here}</p>
</div>
<br />
<div class="submit-button">
<input type="submit" value="Log in" />
<br />
<br />
<span> Don't have an account? <a href="#">Register now!</a> </span>
<br />
<span>Or log in with:</span>
</div>
<br />
<br />
<div class="login-icons">
<i class="fa fa-google icon google"></i>
<i class="fa fa-github icon github"></i>
<i class="fa fa-linkedin icon linked-in"></i>
<i class="fa fa-twitter icon twitter"></i>
<i class="fa fa-facebook icon facebook"></i>
</div>
<br />
<br />
<span class="password-forgot">
Forgot your password? <br />
<a href="#">Click here</a>
</span>
</form>
</div>
<script src="../scripts/register_validation.js"></script>
<script src="../scripts/main.js"></script>
</body>
</html>
文件夹结构:
答案 0 :(得分:0)
已解决
我只需要看看超链接在 index.ejs 中指向的地址 并添加我忘记添加的斜杠
server.js:
const express = require('express');
const bodyParser = require('body-parser');
const { check, validationResult } = require('express-validator');
let path = require('path');
const app = express();
const port = 5000;
app.set('view engine', 'ejs');
app.set('views', 'client');
app.use(express.static('client'))
app.get('', (req, res) => {
res.render('index')
});
app.get('/register/register', (req, res) => {
res.render('./register/register')
})
app.listen(port, () => console.log(`Listening on port ${port}`));