注冊頁面不會呈現
[英]Register Page won't render
問題描述
我正在使用 NodeJS 制作一個簡單的驗證表單，問題是 register.ejs 不會呈現，我嘗試修改路徑，更改默認文件夾但它仍然無法正常工作，我是 Express 和 Node 的新手，所以一個詳細的解釋將不勝感激，或任何類型的解釋。 謝謝你
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}`));
索引.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>
注冊.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>
文件夾結構：
1 個解決方案
解決方案1
0 2021-03-07 12:29:13
解決了
我只需要查看 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}`));
redux withrouter無法正常工作。 它將呈現新頁面，但不會呈現新狀態/道具
[英]redux withrouter not working with react. It will render new page but won't render with new state/props
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.