Node.js에서 다중 페이지 점프를 구현하는 방법
- PHPz원래의
- 2023-04-06 08:53:16918검색
프런트 엔드 개발의 급속한 발전으로 최신 웹 애플리케이션은 더 이상 단일 페이지 애플리케이션(SPA)이 아닙니다. 대신 많은 페이지와 구성 요소를 포함하여 더욱 복잡해집니다. 이러한 웹 애플리케이션을 지원하려면 여러 페이지의 탐색 및 응답성을 지원할 수 있는 유연하고 강력한 웹 프레임워크가 필요합니다. Node.js는 이를 위해 Express.js, Koa.js 등과 같은 뛰어난 프레임워크를 많이 제공합니다. 이 기사에서는 Node.js 프레임워크를 사용하여 다중 페이지 이동 기능을 구현하는 방법을 알아봅니다.
- 새 Node.js 프로젝트 만들기
먼저 새 Node.js 프로젝트를 만들어야 합니다. 기존 프로젝트가 이미 있는 경우 이 단계를 건너뛸 수 있습니다. 명령줄에 다음 명령을 입력합니다.
mkdir myproject cd myproject npm init
이 명령을 실행하면 프로젝트 이름, 버전 번호, 설명 및 기타 정보를 입력하라는 일련의 프롬프트가 나타납니다. 완료되면 프로젝트 정보를 저장하는 파일인 package.json 파일을 얻게 됩니다. package.json 파일에는 우리가 설치한 모든 종속성이 표시됩니다.
- Express.js 설치
앞서 언급했듯이 Express.js는 웹 애플리케이션을 생성하는 빠르고 유연한 방법을 제공하는 일반적으로 사용되는 Node.js 웹 애플리케이션 프레임워크입니다. Express.js를 사용하여 다중 페이지 이동 기능을 구현하겠습니다. Express.js 설치는 간단합니다. 다음 명령을 입력하기만 하면 됩니다:
npm install express --save
이 명령은 Express.js를 설치하고 프로젝트 종속성에 추가합니다.
- 페이지 만들기
이제 다중 페이지 이동 기능을 테스트하기 위해 간단한 페이지를 만들어야 합니다. 프로젝트 루트 디렉터리에 "index.html"이라는 파일을 만들고 다음 콘텐츠를 추가합니다.
<!DOCTYPE html> <html> <head> <title>Express.js Multiple Pages</title> </head> <body> <h1>Hello World!</h1> <p>Welcome to my Express.js app.</p> </body> </html>
제목과 텍스트만 있는 매우 간단한 페이지입니다. 다음 단계에서 이 페이지를 사용하겠습니다.
- Create Express.js 애플리케이션
프로젝트 루트 디렉터리에서 애플리케이션을 작성할 "app.js"라는 파일을 만듭니다.
먼저 필수 Express.js 모듈을 가져와야 합니다.
const express = require('express')
const app = express()
다음으로 뷰 엔진을 지정해야 합니다. 뷰 엔진은 서버 측에서 HTML 페이지를 렌더링하는 데 도움이 됩니다. 뷰 엔진으로 EJS(Embedded JavaScript)를 사용하겠습니다. EJS를 사용하기 전에 EJS를 설치해야 합니다. EJS는 다음 명령을 사용하여 설치할 수 있습니다.
npm install ejs --save
완료되면 app.js 상단에 다음 코드를 추가합니다.
app.set('view engine', 'ejs')
이제 Express.js 애플리케이션에 스타일시트 및 스크립트와 같은 정적 파일을 처리하는 방법을 알려야 합니다. . 이를 위해 Express.js에 내장된 미들웨어를 사용하겠습니다. app.js 파일 상단에 다음 코드를 추가하세요.
app.use(express.static('public'))
이 코드는 Express.js에 공용 폴더를 정적 리소스 폴더로 처리하도록 지시합니다. 여기에 저장된 모든 파일은 HTTP 서버를 통해 액세스할 수 있습니다.
이제 첫 번째 경로를 만들어야 합니다. 라우팅은 우리가 특정 URL을 방문할 때 어떤 일이 일어날지 결정합니다. 사용자가 루트 URL을 방문할 때 서버 측에서 index.html 페이지를 렌더링하는 경로를 생성하겠습니다.
app.js에 다음 코드를 추가하세요.
app.get('/', (req, res) => {
res.render('index')
})
이 코드는 사용자가 루트 URL을 방문할 때 서버 측에서 "index"라는 뷰를 렌더링하는 GET 경로를 생성하도록 Express.js에 지시합니다.
- 페이지 추가하기
이제 첫 페이지와 첫 번째 경로가 완성되었습니다. 다음으로 더 많은 페이지와 경로를 추가하겠습니다.
애플리케이션에 대한 정보를 포함할 "about.html"이라는 파일을 만듭니다. 다음을 추가하세요.
<!DOCTYPE html> <html> <head> <title>About</title> </head> <body> <h1>About Us</h1> <p>We are a team of Node.js developers.</p> </body> </html>
그런 다음 app.js에 다음 코드를 추가하세요.
app.get('/about', (req, res) => {
res.render('about')
})
이 코드는 Express.js에 이름 "about" 뷰를 렌더링하는 GET 경로를 생성하도록 지시합니다.
더 많은 페이지를 추가할 수도 있습니다. 각 페이지에 대한 HTML 파일을 만들고 각 페이지에 대한 경로를 만들기만 하면 됩니다.
- 다른 페이지에 대한 링크
여러 페이지와 경로를 만들었으므로 이제 사용자가 다른 페이지로 이동할 수 있도록 링크를 추가해야 합니다. index.html에서 텍스트 앞에 다음 코드를 추가합니다.
<a href="/about">About Us</a>
이 링크를 클릭하면 회사 소개 페이지로 이동합니다. 계속해서 추가 페이지를 추가하세요.
이제 다중 페이지 이동 기능을 구현했습니다. 사용자가 링크를 클릭하면 다른 페이지로 이동하고 애플리케이션은 HTML 페이지를 서버 측에 렌더링합니다.
요약
이 기사에서는 Node.js 프레임워크(특히 Express.js)를 사용하여 다중 페이지 이동 기능을 구현하는 방법을 배웠습니다. 우리는 여러 페이지와 경로를 만들고 사용자 탐색을 위한 링크를 제공했습니다. 이는 매우 기본적인 구현이지만 다중 페이지 애플리케이션을 빠르게 구축하는 데 도움이 될 수 있습니다. Node.js 프레임워크를 사용하여 웹 애플리케이션을 개발하는 방법을 더 잘 이해하려면 이 코드와 다른 코드를 사용해 보세요.
위 내용은 Node.js에서 다중 페이지 점프를 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!