웹 개발에서 서버의 데이터를 웹 페이지에 표시하는 것은 대화형 및 동적인 사용자 경험을 만드는 데 중요합니다. 이것은 구조하러 오는 Template Engine 곳 입니다. Express.js A Template Engine 는 서버의 데이터를 HTML 코드에 주입하여 동적 HTML 템플릿을 만들 수 있는 도구입니다.
왜 사용합니까 Template Engine ?
Template Engine 서버에서 오는 데이터와 HTML 마크업을 분리하는 데 도움이 됩니다. 이렇게 하면 각 코드 줄에 데이터를 삽입하지 않고도 HTML 코드를 보다 쉽게 관리할 수 있습니다. 대신 HTML 코드 내에 "자리 표시자" 또는 "태그"를 만들면 Template Engine 나중에 서버 측 데이터로 채워집니다.
Template Engine 에서 사용 Express.js
Express.js template engine Pug(구 Jade) 및 EJS(Embedded JavaScript)와 같은 다양한. 다음은 Pug 및 EJS를 사용하는 예입니다 Express.js.
퍼그 사용 Template Engine
Pug 설치: npm을 통해 패키지를 설치해야 합니다 pug.
npm install pug --save
구성 Template Engine: 애플리케이션의 구성 파일(예: app.js)에서 Pug를 template engine.
app.set('view engine', 'pug');
Pug 템플릿 만들기: 디렉터리에 Pug 파일을 만듭니다 views. 예를 들어 다음과 같이 파일을 만듭니다 index.pug.
doctype html
html
head
title My Express App
body
h1 Welcome to My Express App
p #{message}
template engine 경로 처리 및 데이터 렌더링: 경로 처리에서 using 에 데이터를 전달할 수 있습니다 res.render().
app.get('/',(req, res) => {
const message = 'Hello from Express!';
res.render('index', { message });
});
EJS 사용 Template Engine
EJS 설치: ejs npm을 통해 패키지를 설치합니다.
npm install ejs --save
구성 Template Engine: template engine 애플리케이션 구성에서 EJS를 로 정의합니다.
app.set('view engine', 'ejs');
EJS 템플릿 만들기: 디렉터리에 EJS 파일을 만듭니다 views. 예를 들어 다음과 같이 파일을 만듭니다 index.ejs.
<!DOCTYPE html>
<html>
<head>
<title>My Express App</title>
</head>
<body>
<h1>Welcome to My Express App</h1>
<p><%= message %></p>
</body>
</html>
경로 처리 및 데이터 렌더링: 경로 처리에서 using 에 데이터를 전달 template engine 합니다 res.render().
app.get('/',(req, res) => {
const message = 'Hello from Express!';
res.render('index', { message });
});
결론
Template Engine in을 사용하면 Express.js 동적 웹 페이지를 만들고 서버의 정보를 사용자의 브라우저에 표시할 수 있습니다. Pug, EJS 또는 기타를 활용하여 template engine 더 나은 사용자 경험을 제공하고 HTML 코드 및 데이터 관리를 최적화하는 유연한 대화형 웹 페이지를 구축할 수 있습니다.