nodejs에서 html을 동적으로 수정하는 방법-프런트엔드 Q&A-php.cn

nodejs에서 html을 동적으로 수정하는 방법

PHPz

풀어 주다： 2023-04-26 09:56:19

원래의

773명이 탐색했습니다.

웹 애플리케이션이 성숙하고 발전함에 따라 점점 더 많은 개발자가 Node.js를 사용하여 백엔드 애플리케이션을 구축하기 시작하고 있습니다. Node.js는 확장 가능한 고성능 웹 애플리케이션을 구축하기 위한 오픈 소스 서버측 JavaScript 환경입니다. HTML을 생성할 수 있는 템플릿 엔진을 포함하여 몇 가지 매우 유용한 모듈과 라이브러리를 제공합니다.

이 기사에서는 Node.js를 사용하여 HTML을 동적으로 수정하는 방법을 살펴보겠습니다. 먼저 일반적으로 사용되는 몇 가지 템플릿 엔진을 소개한 다음 이를 Node.js와 함께 사용하는 방법에 대해 논의하겠습니다. 마지막으로 이러한 기술을 더 잘 이해하고 실습하는 데 도움이 되는 몇 가지 실제 사례를 보여 드리겠습니다.

일반적으로 사용되는 템플릿 엔진

템플릿 엔진을 사용하기 전에 다양한 템플릿 엔진의 차이점과 장단점을 이해해야 합니다. 다음은 일반적으로 사용되는 템플릿 엔진입니다.

EJS: EJS는 JavaScript 구문을 사용하여 HTML 코드에 동적 데이터를 삽입하는 데 도움이 되는 JavaScript 기반 템플릿 엔진입니다. 주요 장점은 배우고 사용하기 쉽고 클라이언트 측 및 서버 측 렌더링에도 사용할 수 있다는 것입니다.
Handlebars: Handlebars는 핸들바 구문을 사용하여 HTML 코드에 동적 데이터를 삽입할 수 있는 또 다른 JavaScript 기반 템플릿 엔진입니다. 주요 장점은 클라이언트측 렌더링과 서버측 렌더링 모두에 사용할 수 있고 성능이 매우 뛰어나므로 뛰어난 호환성입니다.
Jade: Jade는 들여쓰기와 공백을 사용하여 HTML 코드에 동적 데이터를 삽입하는 데 도움이 되는 문자 기반 템플릿 엔진입니다. 장점은 간결한 구문과 쉬운 유지 관리입니다.

Node.js와 함께 템플릿 엔진 사용

이제 다양한 템플릿 엔진을 이해했으므로 이를 사용하여 HTML을 동적으로 수정할 수 있습니다. Node.js에서 템플릿 엔진을 사용하는 몇 가지 단계는 다음과 같습니다.

템플릿 엔진 설치: 먼저 선택한 템플릿 엔진을 설치해야 합니다. 이 예에서는 EJS를 템플릿 엔진으로 사용합니다. EJS를 설치하려면 다음 명령을 실행합니다.

npm install ejs --save

로그인 후 복사

Express 애플리케이션 구성: 애플리케이션을 생성하기 위해 Node.js용 Express 프레임워크를 사용합니다. Express를 사용하려면 Express를 설치한 다음 애플리케이션에서 설정해야 합니다. 샘플 코드는 다음과 같습니다.

const express = require('express');
const app = express();

app.set('views', './views');
app.set('view engine', 'ejs');

app.get('/users', (req, res) => {
  const users = [
    { name: 'Alice', email: 'alice@example.com' },
    { name: 'Bob', email: 'bob@example.com' },
    { name: 'Charlie', email: 'charlie@example.com' },
  ];
  res.render('users', { users });
});

app.listen(3000, () => {
  console.log('listening on port 3000');
});

로그인 후 복사

이 애플리케이션에서는 애플리케이션의 뷰 디렉터리와 뷰 엔진을 설정하고 "users"라는 뷰를 렌더링하는 간단한 경로 핸들러를 제공하며, 이름이 지정된 배열이 포함된 뷰에 개체를 전달합니다. "사용자".

뷰 파일 생성: 다음으로 “users.ejs”라는 뷰 파일을 생성해야 합니다. 이 파일에는 동적 데이터와 HTML 코드가 포함됩니다. 다음은 샘플 코드입니다.

<!doctype html>
<html>
  <head>
    <title>Users</title>
  </head>
  <body>
    <h1>Users</h1>
    <ul>
      <% users.forEach(user => { %>
        <li><%= user.name %> - <%= user.email %></li>
      <% }); %>
    </ul>
  </body>
</html>

로그인 후 복사

이 뷰 파일에서는 EJS 템플릿 엔진의 구문을 사용하여 동적 데이터를 삽입합니다. forEach 루프를 사용하여 사용자 배열을 반복하고 HTML 코드의 <% %> 태그를 사용하여 JavaScript 코드를 실행했습니다. 또한 <%= %> 태그를 사용하여 사용자 데이터를 삽입합니다.

애플리케이션 실행: 마지막으로 애플리케이션을 실행해야 합니다. 애플리케이션을 실행하려면 다음 명령을 실행하세요.

node app.js

로그인 후 복사

그런 다음 브라우저를 열고 http://localhost:3000/users를 방문하세요. 이름과 이메일 주소가 포함된 세 명의 사용자가 포함된 페이지를 볼 수 있습니다.

요약

이 기사에서는 Node.js와 템플릿 엔진을 사용하여 HTML을 동적으로 수정하는 방법을 살펴보았습니다. 우리는 일반적으로 사용되는 몇 가지 템플릿 엔진을 소개하고 EJS를 사용하여 이를 결합하는 방법을 보여주었습니다. 이러한 기술을 사용하면 웹 애플리케이션에서 동적 HTML을 쉽게 생성하고 강력한 사용자 경험을 제공할 수 있습니다.

위 내용은 nodejs에서 html을 동적으로 수정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!