MVC, MVT e Template Engine - #12 Views no JS

03/07/2020

Nesse tutorial aprenderemos como implementar as views do nosso sistema MVC no Javascript. Para isso, utilizaremos o módulo Handlebars.

Views no MVC / Javascript

Para instalar o módulo Handlebars vamos rodar o comando abaixo no nosso terminal:

npm install express-handlebars

main.handlebars

Nós precisamos criar a pasta layouts dentro da pasta views e dentro dela criaremos o arquivo main.handlebars

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel='stylesheet' href='style.css'>
</head>
<body>
    {{{body}}}
</body>
</html>

produto.handlebars

Dentro de views criaremos o arquivo de exemplo.

<h1>Produtos</h1>
Esses são meus produtos

Controller.js

No nosso controller usaremos o método render pra renderizar nosso template engine:

const exphbs  = require('express-handlebars');

app.engine('handlebars', exphbs());
app.set('view engine', 'handlebars');
app.use(express.static('assets'));

app.get('/',async(req,res)=>{
    res.render('produto');
});

app.get('/sobrenos',(req,res)=>{
   res.render('sobrenos');
});

Por hoje é só! Sucesso nos códigos e na vida!

Receba as aulas da Webdesign em Foco em Seu Email

Posts Relacionados

MVC, MVT e Template Engine - #11 Models e Controllers no JS

Nesse tutorial seguiremos com o MVC no Javascript aprendendo a utilizar o nosso model e o controller do nosso sistema.

MVC, MVT e Template Engine - #13 MVT com Python - Views e Template

Nessa vídeoaula vamos verificar entender o padrão de arquitetura de software MVC (Model - View - Controller) muito comumente utilizado na linguagem Python.

MVC Completo

Neste curso aprenderemos como criar o padrão de projeto MVC completo, analisando desde sua estrutura até a programação.