nodejs 로그인 페이지 점프 페이지 점프
- 王林원래의
- 2023-05-25 12:38:41556검색
웹 개발에서 사용자 로그인은 매우 중요한 링크입니다. Node.js에서는 일부 프레임워크와 라이브러리를 사용하여 로그인 페이지로 이동할 수 있습니다. 이 기사에서는 Express.js를 사용하여 로그인 페이지로 이동하는 방법을 소개합니다.
- Express.js 설치
먼저 Express.js를 설치하고 명령줄을 통해 다음 명령을 입력해야 합니다.
npm install express --save
이 명령은 Express.js를 프로젝트에 설치하고 패키지에 저장합니다. .
- 로그인 페이지 만들기
프로젝트 디렉터리에 새 ejs 파일을 만들고 이름을 login.ejs로 지정합니다. 이 파일은 로그인 페이지로 사용됩니다. login.ejs에서는 아래와 같이 몇 가지 HTML 양식 요소를 추가할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>登录页面</title>
</head>
<body>
<h1>欢迎登录</h1>
<form action="/login" method="post">
<input type="text" name="username" placeholder="请输入用户名">
<input type="password" name="password" placeholder="请输入密码">
<input type="submit" value="登录">
</form>
</body>
</html>위 코드에서는 기본 HTML 페이지와 사용자 이름과 비밀번호가 포함된 양식을 만들었습니다. 사용자가 양식을 제출하면 "/login" 경로가 트리거되어 사용자가 제출한 요청을 처리합니다.
- Express 애플리케이션 만들기
다음으로 Express 애플리케이션을 만들어야 합니다. 다음 내용으로 app.js라는 프로젝트 디렉터리에 새 파일을 만듭니다.
const express = require('express');
const app = express();
app.set('view engine', 'ejs');
app.use(express.static(__dirname + '/public'));
app.get('/', (req, res) => {
res.render('login');
});
app.post('/login', (req, res) => {
// 处理用户提交的请求
});
app.listen(3000, () => {
console.log('程序已启动！');
});위 코드에서는 Express 애플리케이션을 만들고 뷰 엔진과 공용 폴더의 경로를 설정했습니다. app.get('/')은 사용자가 루트 경로에 액세스하면 login.ejs 페이지가 렌더링된다는 것을 의미합니다. app.post('/login')은 사용자가 양식을 제출하면 로그인 요청이 처리된다는 의미입니다.
- 로그인 요청 처리
이제 로그인 요청을 처리하는 코드를 작성해야 합니다. app.post('/login') 경로에서 사용자가 제출한 사용자 이름과 비밀번호를 얻을 수 있습니다.
app.post('/login', (req, res) => {
const username = req.body.username;
const password = req.body.password;
// 处理用户名和密码
});다음으로 사용자 이름과 비밀번호를 기반으로 일부 처리를 수행할 수 있습니다. 확인에 성공하면 다른 페이지로 리디렉션할 수 있습니다:
app.post('/login', (req, res) => {
const username = req.body.username;
const password = req.body.password;
if (username === 'admin' && password === '123456) {
res.redirect('/dashboard');
} else {
res.render('login', {message: '用户名或密码不正确'});
}
});위 코드에서 사용자 이름과 비밀번호 확인에 성공하면 대시보드 페이지로 리디렉션되고, 그렇지 않으면 로그인 페이지가 다시 렌더링되고 오류가 발생합니다. 메시지가 표시됩니다. 다른 페이지로 리디렉션하려면 res.redirect('/') 또는 res.redirect('/dashboard')와 같은 문을 사용할 수 있습니다.
- 대시보드 페이지 만들기
마지막으로 새 ejs 파일을 만들고 이름을 Dashboard.ejs로 지정한 다음 사용자 인터페이스에 렌더링해야 합니다. 아래와 같이 Dashboard.ejs 페이지에 일부 HTML 요소를 추가할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>欢迎访问Dashboard</title>
</head>
<body>
<h1>欢迎访问Dashboard</h1>
</body>
</html>이제 Node.js 로그인 페이지 점프 기능이 완성되었습니다. 사용자가 성공적으로 로그인하면 대시보드 페이지로 리디렉션됩니다.
요약
이 글에서는 Express.js를 사용하여 Node.js 로그인 페이지 점프 기능을 구현하는 방법을 소개합니다. 기본 로그인 페이지와 로그인 요청을 처리하는 경로를 만들었습니다. 사용자가 성공적으로 로그인하면 대시보드 페이지로 리디렉션됩니다. 웹 개발에 Node.js와 Express.js를 사용하면 효율적인 웹 애플리케이션을 빠르게 구축하고 쾌적한 사용자 경험을 제공할 수 있습니다.
위 내용은 nodejs 로그인 페이지 점프 페이지 점프의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!