nodejs 로그인 페이지 점프 페이지 점프-프런트엔드 Q&A-php.cn

nodejs 로그인 페이지 점프 페이지 점프

王林

풀어 주다： 2023-05-25 12:38:41

원래의

517명이 탐색했습니다.

웹 개발에서 사용자 로그인은 매우 중요한 링크입니다. 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!