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

王林
풀어 주다: 2023-05-25 12:38:41
원래의
481명이 탐색했습니다.

웹 개발에서 사용자 로그인은 매우 중요한 링크입니다. Node.js에서는 일부 프레임워크와 라이브러리를 사용하여 로그인 페이지로 이동할 수 있습니다. 이 기사에서는 Express.js를 사용하여 로그인 페이지로 이동하는 방법을 소개합니다.

  1. Express.js 설치

먼저 Express.js를 설치하고 명령줄을 통해 다음 명령을 입력해야 합니다.

npm install express --save
로그인 후 복사

이 명령은 Express.js를 프로젝트에 설치하고 패키지에 저장합니다. .

  1. 로그인 페이지 만들기

프로젝트 디렉터리에 새 ejs 파일을 만들고 이름을 login.ejs로 지정합니다. 이 파일은 로그인 페이지로 사용됩니다. login.ejs에서는 아래와 같이 몇 가지 HTML 양식 요소를 추가할 수 있습니다.

    登录页面 

欢迎登录

로그인 후 복사

위 코드에서는 기본 HTML 페이지와 사용자 이름과 비밀번호가 포함된 양식을 만들었습니다. 사용자가 양식을 제출하면 "/login" 경로가 트리거되어 사용자가 제출한 요청을 처리합니다.

  1. 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')은 사용자가 양식을 제출하면 로그인 요청이 처리된다는 의미입니다.

  1. 로그인 요청 처리

이제 로그인 요청을 처리하는 코드를 작성해야 합니다. 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')와 같은 문을 사용할 수 있습니다.

  1. 대시보드 페이지 만들기

마지막으로 새 ejs 파일을 만들고 이름을 Dashboard.ejs로 지정한 다음 사용자 인터페이스에 렌더링해야 합니다. 아래와 같이 Dashboard.ejs 페이지에 일부 HTML 요소를 추가할 수 있습니다.

    欢迎访问Dashboard 

欢迎访问Dashboard

로그인 후 복사

이제 Node.js 로그인 페이지 점프 기능이 완성되었습니다. 사용자가 성공적으로 로그인하면 대시보드 페이지로 리디렉션됩니다.

요약

이 글에서는 Express.js를 사용하여 Node.js 로그인 페이지 점프 기능을 구현하는 방법을 소개합니다. 기본 로그인 페이지와 로그인 요청을 처리하는 경로를 만들었습니다. 사용자가 성공적으로 로그인하면 대시보드 페이지로 리디렉션됩니다. 웹 개발에 Node.js와 Express.js를 사용하면 효율적인 웹 애플리케이션을 빠르게 구축하고 쾌적한 사용자 경험을 제공할 수 있습니다.

위 내용은 nodejs 로그인 페이지 점프 페이지 점프의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!