express-handlebars Cambiar cabecera dinamicamente mediante peticiones al router
Publicado por Diego (1 intervención) el 09/08/2021 11:22:25
express-handlebars Cambiar cabecera dinamicamente mediante peticiones al router
Tengo express-handlebars versión ^5.3.2 y express versión ^4.17.1.
En la cabecera (un parcial que incluyo en la plantilla .hbs de express-handlebars) tengo el siguiente código (concretamente en una parte de la cabecera):
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<div class="areaUsuario">
{{#if registro }}
<p>El usuario quiere registrarse.</p>
{{> form_area_usuario}}
{{/if}}
{{#if inicioSesion}}
<p>El usuario quiere iniciar sesión.</p>
{{> form_area_usuario}}
{{/if}}
{{#if Usuario}}
<div class="bienvenidoCliente">
{{#if SexoUsuario}}
<p class="saludoBienvenido">¡Bienvenida, {{Usuario}}!</p>
{{else}}
<p class="saludoBienvenido">¡Bienvenido, {{Usuario}}!</p>
{{/if}}
</div>
{{else}}
<div class="bienvenidoInvitado">
<p>¡Bienvenid@, invitad@! Puedes <a href="#" id="enlaceIniciarSesion">Iniciar Sesión</a>.</p>
<p>¿Aún no estás registrad@?<a href="#" id="enlaceRegistro">¡Hazlo ahora!</a></p>
</div>
{{/if}}
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div class="registroInicioAreaUsuario">
<form action="/usuarios" id="form_areaUsuarios" class="form_areaUsuarios">
{{#if nuevoUsuario}}
<input type="text" name="nombreUsuario" id="nombreUsuario" placeholder="usuario">
{{/if}}
<input type="email" name="emailUsuario" id="emailUsuario" placeholder="correo@electronico.com">
<input type="password" name="contrasenaUsuario" id="contrasenaUsuario" placeholder="contraseña">
{{#if nuevoUsuario}}
<br>
<input type="password" name="contrasenaUsuario2" id="contrasenaUsuario2" placeholder="repite contraseña">
{{/if}}
<br>
<input type="reset" value="Borrar">
<input type="submit" data-eleccion="{{textoData}}" value="{{textoSubmit}}">
</form>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
const areaUsuario = document.querySelector(".areaUsuario");
const primerElementoAreaUsuario = areaUsuario.firstElementChild;
if(primerElementoAreaUsuario.className === "bienvenidoInvitado") {
const iniciarSesion = areaUsuario.querySelector("#enlaceIniciarSesion");
const registros = areaUsuario.querySelector("#enlaceRegistro");
iniciarSesion.addEventListener('click', e => {
e.preventDefault();
fetch('/', {
method: "POST",
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ inicioSesion: true })
})
.then(res => res.json())
.then(res => {
console.log("La respuesta del servidor es la siguiente:",res);
})
});
}En el router tengo así la ruta:
1
2
3
4
5
6
7
8
9
10
11
12
ruter.post('/', (req, res) => {
const inicioSesion = req.body.inicioSesion;
const registro = req.body.registro;
let jsonBase = { estilo: 'inicio' }
if(typeof inicioSesion != "undefined") {
jsonBase.inicioSesion = true
} else if(typeof registro != "undefined") {
jsonBase.nuevoUsuario = true
}res.render('inicio', jsonBase)
})
¡Gracias!
Valora esta pregunta
0