Tutorial completo de Express: Parte 2

El front-end es un producto para el usuario. No importa cuán complejo y bien diseñado tenga el back-end, si su front-end carece de las expectativas del usuario, en algún momento fallará. En el tutorial anterior hemos configurado el express .

En este tutorial voy a explicar cómo usar EJS para crear plantillas para sus aplicaciones web avanzadas. Para aquellos que están confundidos con HTML y EJS. EJS analiza HTML completo sin ningún problema, por lo que también proporciona algunas características interesantes que explicaré a continuación.

La belleza de EJS es que puede usar una plantilla para realizar múltiples operaciones. Por ejemplo, si creo en un archivo EJS y configuro el título, el encabezado, la ID de div, etc., proveniente del servidor. Puedo configurarlo varias veces dependiendo de la llamada de rutas.

Pasando datos a Ver:

Mire el código a continuación. Este código es solo por ejemplo. No es código de trabajo. Digamos que desde Express he pasado estos datos.

aplicación. get ( ‘/’ , function ( req , res ) {
         

          res.
render ( ‘index’ , { title : “Home page” } ) ;

} ) ;

En index.ejs, simplemente puedo hacer esto para acceder a la variable de título .

< html >
< head >
< title > <% = title %> < / title >
< / head >
< / html >

De esta manera, puede pasar cualquier dato importante del servidor y acceder aquí. Esta es una de las características más interesantes de EJS.

Parciales EJS: división del código en varias partes

Puede dividir el código EJS en varios archivos tal como lo hacemos en PHP o Rails. Puede incluir esos archivos parciales usando

<% incluyen FILENAME%>
< html >
  < head >
     <% include ( ‘header.ejs’ ) %>
  < / head >
  < body >
      <% include ( ‘body.ejs’ ) %>
  < / body >
< / html >

Aquí está el código parcial de header.ejs.

< título >

Hola mundo


<
/ título >

<
script src = “jquery.js” > < / script >

<
script >

… Su
código JavaScript va aquí.

<
/ script >

Aquí está el código parcial de body.ejs.

  < Div ID = “entrada” >

      <
entrada tipo = “TEXT” nombre = “nombre_usuario” valor = “” > < br >

      <
entrada tipo = “contraseña” nombre = “” contraseña valor = “” > < br >

      <
entrada type = “button” name = “login” value = “Login” >

    <
/ div >

Filtros EJS:

Ejs proporciona “filtros” que ayudan a modificar datos sin escribir JavaScript. Al usar el filtro, puede realizar varias operaciones en los datos. Operaciones como:

  • Poner en mayúscula la letra.
  • Letra Downcase.
  • clasificar.
  • Talla.
  • largo.

Puede ver la lista completa de filtros aquí.

En el siguiente tutorial voy a explicar cómo manejar el enrutador de las aplicaciones web Express.

Esta publicación es parte de la serie de tutoriales Express Complete.

Parte 1: Configuración de Express.
Parte 2: creación de plantillas mediante EJS.
Parte 3: Manejo de rutas.
Parte 4: Sesión de manejo.
Parte 5: Finalización de la aplicación.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *