No desenvolvimento da web, exibir dados do servidor em páginas da web é crucial para criar experiências de usuário interativas e dinâmicas. É aqui Template Engine que Express.js entra em socorro. A Template Engine é uma ferramenta que permite criar modelos HTML dinâmicos injetando dados do servidor no código HTML.
Por que usar Template Engine ?
Template Engine ajudam a separar a marcação HTML dos dados provenientes do servidor. Isso permite que você gerencie o código HTML com mais facilidade sem precisar incorporar dados em cada linha de código. Em vez disso, você criará "espaços reservados" ou "tags" no código HTML, que serão Template Engine preenchidos posteriormente com dados do lado do servidor.
Usando Template Engine em Express.js
Express.js suporta vários template engine, como Pug(anteriormente conhecido como Jade) e EJS(JavaScript incorporado). Abaixo estão exemplos de uso de Pug e EJS em Express.js:
Usando Pug Template Engine
Instalar o Pug: Você precisa instalar o pug pacote via npm.
npm install pug --save
Configure Template Engine: No arquivo de configuração do seu aplicativo(por exemplo, app.js), defina Pug como o arquivo template engine.
app.set('view engine', 'pug');
Crie um modelo Pug: crie arquivos Pug no views diretório. Por exemplo, crie um index.pug arquivo:
doctype html
html
head
title My Express App
body
h1 Welcome to My Express App
p #{message}
Manipulação de rota e renderização de dados: Na manipulação de rota, você pode passar dados para o template engine arquivo res.render().
app.get('/',(req, res) => {
const message = 'Hello from Express!';
res.render('index', { message });
});
Usando EJS Template Engine
Instalar EJS: Instale o ejs pacote via npm.
npm install ejs --save
Configure Template Engine: Defina EJS como o template engine na configuração do seu aplicativo.
app.set('view engine', 'ejs');
Criar um Modelo EJS: Crie arquivos EJS no views diretório. Por exemplo, crie um index.ejs arquivo:
<!DOCTYPE html>
<html>
<head>
<title>My Express App</title>
</head>
<body>
<h1>Welcome to My Express App</h1>
<p><%= message %></p>
</body>
</html>
Manipulação de rota e renderização de dados: na manipulação de rota, passe os dados para o template engine arquivo res.render().
app.get('/',(req, res) => {
const message = 'Hello from Express!';
res.render('index', { message });
});
Conclusão
O uso Template Engine de in Express.js permite criar páginas da Web dinâmicas e exibir informações do servidor no navegador do usuário. Ao utilizar Pug, EJS ou outro template engine, você pode criar páginas da Web interativas e flexíveis que fornecem uma melhor experiência do usuário e otimizam o gerenciamento de código e dados HTML.