One place for hosting & domains

      Cómo usar EJS para crear una plantilla de su aplicación Node


      Introducción

      Cuando se crean aplicaciones Node rápidas en el momento, a veces es necesario una forma fácil y rápida de crear plantillas de nuestra aplicación.

      Jade llega como el motor de visualización para Express por defecto, pero la sintaxis de Jade puede ser demasiado compleja para muchos casos de uso. EJS es una alternativa que hace bien el trabajo y es fácil de configurar. Veamos cómo podemos crear una aplicación sencilla y usar EJS para incluir las partes repetibles de nuestro sitio (parciales) y pasar los datos a nuestras vistas.

      Configurar la aplicación demo

      Crearemos dos páginas para nuestra aplicación: una página con ancho completo y la otra con una barra lateral.

      Obtenga el código: puede encontrar un repositorio de git del código de demostración completo en GitHub aquí.

      Estructura del archivo

      Aquí están todos los archivos que necesitaremos para nuestra aplicación. Crearemos nuestra plantilla dentro de la carpeta de vistas y el resto son prácticas de Node bastante estándares.

      - views
      ----- partials
      ---------- footer.ejs
      ---------- head.ejs
      ---------- header.ejs
      ----- pages
      ---------- index.ejs
      ---------- about.ejs
      - package.json
      - server.js
      

      package.json albergará la información de nuestra aplicación de Node y las dependencias que necesitamos (express y EJS). server.jso albergará los ajustes de nuestro servidor Express, configuración. Definiremos nuestras rutas para nuestras páginas aquí.

      Configuración de Node

      Vamos a entrar en nuestro archivo package.json y configurar nuestro proyecto ahí.

      package.json

      {
        "name": "node-ejs",
        "main": "server.js",
        "dependencies": {
          "ejs": "^3.1.5",
          "express": "^4.17.1"
        }
      }
      

      Todo lo que necesitaremos es Express y EJS. Ahora tenemos que instalar las dependencias que acabamos de definir. Ejecute:

      Con todas nuestras dependencias instaladas, ahora configuraremos nuestra aplicación para que utilice EJS y fijaremos nuestras rutas para las dos páginas que necesitamos: la página “Índice” (ancho completo) y la página “Acerca de” (barra lateral). Haremos todo esto dentro de nuestro archivo server.js.

      server.js

      // load the things we need
      var express = require('express');
      var app = express();
      
      // set the view engine to ejs
      app.set('view engine', 'ejs');
      
      // use res.render to load up an ejs view file
      
      // index page
      app.get("https://www.digitalocean.com/", function(req, res) {
          res.render('pages/index');
      });
      
      // about page
      app.get('/about', function(req, res) {
          res.render('pages/about');
      });
      
      app.listen(8080);
      console.log('8080 is the magic port');
      

      Aquí definimos nuestra aplicación y la configuramos para que se muestre en el puerto 8080. También debemos configurar EJS como el motor de visualización de nuestra aplicación Express usando app.set('view engine', 'ejs');. Observe cómo enviamos una vista al usuario usando res.render(). Es importante tener en cuenta que res.render() buscará en una carpeta de vistas la vista. Solo tenemos que definir pages/index, ya que la ruta completa es views/pages/index.

      Iniciar nuestro servidor

      Inicie el servidor usando:

      Ahora podemos ver nuestra aplicación en el navegador en http://localhost:8080 y http://localhost:8080/about. Nuestra aplicación está configurada y tenemos que definir nuestros archivos de vista y ver cómo EJS funciona ahí.

      Cree los parciales de EJS

      Igual que muchas aplicaciones que creamos, hay mucho código que se reutiliza. A esos códigos los llamamos parciales y definen tres archivos que usaremos en todo nuestro sitio: head.ejs, header.ejs y footer.ejs. Vamos a crear esos archivos ahora.

      views/partials/head.ejs

      <meta charset="UTF-8">
      <title>EJS Is Fun</title>
      
      <!-- CSS (load bootstrap from a CDN) -->
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.min.css">
      <style>
          body { padding-top:50px; }
      </style>
      

      views/partials/header.ejs

      <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <a class="navbar-brand" href="https://www.digitalocean.com/">EJS Is Fun</a>
        <ul class="navbar-nav mr-auto">
          <li class="nav-item">
            <a class="nav-link" href="https://www.digitalocean.com/">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="http://www.digitalocean.com/about">About</a>
          </li>
        </ul>
      </nav>
      

      views/partials/footer.ejs

      <p class="text-center text-muted">© Copyright 2020 The Awesome People</p>
      

      Añada los parciales de EJS a Vistas

      Ahora tenemos nuestros parciales definidos. Lo único que debemos hacer es incluirlos en nuestras vistas. Ahora veremos index.ejs y about.ejs y usaremos la sintaxis include para añadir los parciales.

      Sintaxis para incluir un parcial de EJS

      Utilice <%- include('RELATIVE/PATH/TO/FILE') %> para integrar un parcial de EJS en otro archivo.

      • El guion <%- en vez de solo <% para indicar a EJS que renderice HTML sin formato.
      • La ruta al parcial es relativa al archivo actual.

      views/pages/index.ejs

      <!DOCTYPE html>
      <html lang="en">
      <head>
          <%- include('../partials/head'); %>
      </head>
      <body class="container">
      
      <header>
          <%- include('../partials/header'); %>
      </header>
      
      <main>
          <div class="jumbotron">
              <h1>This is great</h1>
              <p>Welcome to templating using EJS</p>
          </div>
      </main>
      
      <footer>
          <%- include('../partials/footer'); %>
      </footer>
      
      </body>
      </html>
      

      Ahora podemos ver nuestra vista definida en el navegador en http://localhost:8080. node-ejs-templating-index

      Para la página de acerca de, también añadimos una barra lateral de bootstrap para demostrar cómo pueden estructurarse los parciales para que se reutilicen en diferentes plantillas y páginas.

      views/pages/about.ejs

      <!DOCTYPE html>
      <html lang="en">
      <head>
          <%- include('../partials/head'); %>
      </head>
      <body class="container">
      
      <header>
          <%- include('../partials/header'); %>
      </header>
      
      <main>
      <div class="row">
          <div class="col-sm-8">
              <div class="jumbotron">
                  <h1>This is great</h1>
                  <p>Welcome to templating using EJS</p>
              </div>
          </div>
      
          <div class="col-sm-4">
              <div class="well">
                  <h3>Look I'm A Sidebar!</h3>
              </div>
          </div>
      
      </div>
      </main>
      
      <footer>
          <%- include('../partials/footer'); %>
      </footer>
      
      </body>
      </html>
      

      Si visitamos http://localhost:8080/about, podemos ver nuestra página de acerca de con una barra lateral node-ejs-templating-about

      Ahora podemos empezar a usar EJS para pasar datos desde nuestra aplicación Node a nuestras vistas.

      Pasar datos a Vistas y Parciales

      Vamos a definir algunas variables básicas y una lista para pasar a nuestra página de inicio. Vuelva a su archivo server.js y añada lo siguiente dentro de su ruta app.get("https://www.digitalocean.com/")

      server.js

      // index page
      app.get("https://www.digitalocean.com/", function(req, res) {
          var mascots = [
              { name: 'Sammy', organization: "DigitalOcean", birth_year: 2012},
              { name: 'Tux', organization: "Linux", birth_year: 1996},
              { name: 'Moby Dock', organization: "Docker", birth_year: 2013}
          ];
          var tagline = "No programming concept is complete without a cute animal mascot.";
      
          res.render('pages/index', {
              mascots: mascots,
              tagline: tagline
          });
      });
      

      Hemos creado una lista llamada mascots y una cadena sencilla llamada tagline. Vamos a entrar en nuestro archivo index.ejs para usarlas.

      Renderizar una variable única en EJS

      Para hacer eco de una variable, acabamos de usar <%= tagline %>. Vamos a añadir esto a nuestro archivo index.ejs:

      views/pages/index.ejs

      ...
      <h2>Variable</h2>
      <p><%= tagline %></p>
      ...
      

      Hacer bucle sobre los datos en EJS

      Para hacer bucle sobre nuestros datos usaremos .forEach. Vamos a añadir esto a nuestro archivo:

      views/pages/index.ejs

      ...
      <ul>
          <% mascots.forEach(function(mascot) { %>
              <li>
                  <strong><%= mascot.name %></strong>
                  representing <%= mascot.organization %>, born <%= mascot.birth_year %>
              </li>
          <% }); %>
      </ul>
      ...
      

      Ahora podemos ver en nuestro navegador la nueva información que hemos añadido.

      node-ejs-templating-rendered

      Pasar datos a un parcial en EJS

      El parcial EJS tiene acceso a todos los mismos datos que la vista principal. Pero tenga cuidado: si hace referencia a una variable en un parcial, debe definirse en cada vista que utilice el parcial o arrojará un error.

      También puede definir y pasar variables a un parcial EJS en la sintaxis include, de esta forma:

      views/pages/about.ejs

      ...
      <header>
          <%- include('../partials/header', {variant:'compact'}); %>
      </header>
      ...
      

      Pero de nuevo, debe tener cuidado y no asumir que una variable ha sido definida.

      Si desea referenciar una variable en un parcial que puede no definirse siempre, y darle un valor predeterminado, puede hacerlo de esta forma:

      views/partials/header.ejs

      ...
      <em>Variant: <%= typeof variant != 'undefined' ? variant : 'default' %></em>
      ...
      

      En la línea anterior, el código EJS se renderiza el valor de variant, si está definido, y de default si no lo está.

      Conclusión

      EJS nos permite generar aplicaciones rápidas cuando no necesitamos algo demasiado complejo. Al usar parciales y tener la capacidad de pasar variables fácilmente a nuestras vistas, podemos crear algunas aplicaciones geniales rápidamente.

      Para obtener más información sobre EJS, consulte los documentos oficiales aquí.



      Source link

      Cómo usar .map() para iterar elementos de matriz en JavaScript


      Introducción

      Desde el método clásico forloop al método forEach(), se utilizan varias técnicas y métodos para iterar a través de conjuntos de datos en JavaScript. Uno de los métodos más populares es el método .map(). ,map() crea una matriz a partir de la invocación de una función específica sobre cada elemento de la matriz principal. .map() es un método sin mutación que crea una nueva matriz en vez de los métodos con mutación, que solo realizan cambios a la matriz que invoca.

      Este método puede tener muchos usos cuando se trabaja con matrices. En este tutorial, verá cuatro usos notales de .map() en JavaScript: invocar una función de elementos de matriz, convertir cadenas a matrices, renderizar listas en bibliotecas y cambiar el formato de los objetos de una matriz.

      Requisitos previos

      Este tutorial no requiere codificación, pero si está interesado en seguir los ejemplos, puede usar el Node.js REPL o las herramientas del desarrollador del navegador.

      Paso 1: Invocar una función en cada elemento en una matriz

      .map() acepta una función de invocación como uno de sus argumentos, y un parámetro importante de esa función es el valor actual del elemento que procesa la función. Este es un parámetro requerido. Con este parámetro, puede modificar cada elemento en una matriz y crear una nueva función.

      Aquí tiene un ejemplo:

      const sweetArray = [2, 3, 4, 5, 35]
      const sweeterArray = sweetArray.map(sweetItem => {
          return sweetItem * 2
      })
      
      console.log(sweeterArray)
      

      Este resultado se registra en la consola:

      Output

      [ 4, 6, 8, 10, 70 ]

      Esto se puede simplificar algo más para que esté más limpio con:

      // create a function to use
      const makeSweeter = sweetItem => sweetItem * 2;
      
      // we have an array
      const sweetArray = [2, 3, 4, 5, 35];
      
      // call the function we made. more readable
      const sweeterArray = sweetArray.map(makeSweeter);
      
      console.log(sweeterArray);
      

      Este resultado se registra en la consola:

      Output

      [ 4, 6, 8, 10, 70 ]

      Tener un código como sweetArray.map(makeSweeter) hace que su código sea un poco más legible..

      Paso 2: Convertir una cadena en una matriz

      .map() se conoce como que pertenece al prototipo de matriz. En este paso, lo usará para convertir una cadena a una matriz. No está desarrollando el método para trabajar para cadenas aquí. En vez de eso usará el método especial .call().

      Todo en JavaScript es un objeto, y los métodos son funciones asociadas con estos objetos. .call() permite usar el contexto de un objeto sobre otro. Por tanto, estaría copiando el contexto de .map() en una matriz sobre una cadena.

      Es posible pasar argumentos a .call() del contexto que se va a utilizar y los parámetros de los argumentos de la función original.

      Aquí tiene un ejemplo:

      const name = "Sammy"
      const map = Array.prototype.map
      
      const newName = map.call(name, eachLetter => {
          return `${eachLetter}a`
      })
      
      console.log(newName)
      

      Este resultado se registra en la consola:

      Output

      • [ "Sa", "aa", "ma", "ma", "ya" ]

      Aquí utilizó el contexto de .map() de una cadena y pasó un argumento de la función que .map() espera.

      Esto funciona como el método .split() de una cadena, solo que cada carácter individual de la cadena puede modificarse antes de ser devuelto en una matriz.

      Paso 3: Renderizar listas en bibliotecas JavaScript

      Las bibliotecas JavaScript como React utilizan .map() para renderizar elementos en una lista. Esto requiere sintaxis JSX ya que el método .map() está envuelto en la sintaxis JSX.

      Aquí tiene un ejemplo de un componente de React:

      import React from "react";
      import ReactDOM from "react-dom";
      
      const names = ["whale", "squid", "turtle", "coral", "starfish"];
      
      const NamesList = () => (
        <div>
          <ul>{names.map(name => <li key={name}> {name} </li>)}</ul>
        </div>
      );
      
      const rootElement = document.getElementById("root");
      ReactDOM.render(<NamesList />, rootElement);
      

      Este es un componente sin estado en React, que renderiza un div con una lista. Los elementos individuales de la lista se renderizan usando .map() para iterar sobre la matriz de nombres creada inicialmente. Este componente se renderiza usando ReactDOM en el elemento DOM con Id de root.

      Paso 4: Reformatear los objetos de la matriz

      .map() puede usarse para iterar en objetos en una matriz y, de forma similar a las matrices tradicionales, modificar el contenido de cada objeto individual y devolver una nueva matriz. Esta modificación se realiza según lo que se devuelve en la función de callback.

      Aquí tiene un ejemplo:

      const myUsers = [
          { name: 'shark', likes: 'ocean' },
          { name: 'turtle', likes: 'pond' },
          { name: 'otter', likes: 'fish biscuits' }
      ]
      
      const usersByLikes = myUsers.map(item => {
          const container = {};
      
          container[item.name] = item.likes;
          container.age = item.name.length * 10;
      
          return container;
      })
      
      console.log(usersByLikes);
      

      Este resultado se registra en la consola:

      Output

      [ {shark: "ocean", age: 50}, {turtle: "pond", age: 60}, {otter: "fish biscuits", age: 50} ]

      Aquí ha modificado cada objeto en la matriz usando la notación paréntesis y punto. Este caso de uso puede emplearse para procesar o condensar los datos recibidos antes de guardarlos o analizarlos en una aplicación frontend.

      Conclusión

      En este tutorial hemos visto cuatro usos del método .map() en JavaScript. En combinación con otros métodos, la funcionalidad de .map() puede ampliarse. Para obtener más información, consulte el artículo Cómo usar métodos de matriz en métodos de iteración de JavaScript.



      Source link

      Como usar o .map() para realizar iterações em itens de matrizes em JavaScript


      Introdução

      Desde o método forloop clássico, até o forEach(), diversas técnicas e métodos são usados para realizar iterações em conjuntos de dados em JavaScript. Um dos métodos mais populares é o método .map(). O .map() cria uma matriz depois de chamar uma função específica em cada item na matriz mãe. O .map() é um método de não mutação que, ao contrário dos métodos de mutação, cria uma nova matriz ao invés de alterar a original.

      Esse método pode ser usado de diversas maneiras ao se trabalhar com matrizes. Neste tutorial, vamos analisar quatro usos dignos de atenção do .map() em JavaScript: chamar uma função de elementos de matriz, converter strings em matrizes, renderizar listas em bibliotecas do JavaScript e reformatar objetos de matriz.

      Pré-requisitos

      Este tutorial não exige nenhuma programação, mas se estiver interessado em acompanhar os exemplos, use o Node.js REPL ou ferramentas de desenvolvedor de um navegador.

      Passo 1 — Chamando uma função em cada item em uma matriz

      O .map() aceita uma função de retorno de chamada como um de seus argumentos, e um parâmetro importante dessa função é o valor atual do item que está sendo processado pela função. Esse parâmetro é necessário. Com esse parâmetro, é possível modificar cada item em uma matriz e criar uma nova função.

      Vejamos um exemplo:

      const sweetArray = [2, 3, 4, 5, 35]
      const sweeterArray = sweetArray.map(sweetItem => {
          return sweetItem * 2
      })
      
      console.log(sweeterArray)
      

      Este é o resultado que é registrado no console:

      Output

      [ 4, 6, 8, 10, 70 ]

      Ele pode ser simplificado para torná-lo mais organizado:

      // create a function to use
      const makeSweeter = sweetItem => sweetItem * 2;
      
      // we have an array
      const sweetArray = [2, 3, 4, 5, 35];
      
      // call the function we made. more readable
      const sweeterArray = sweetArray.map(makeSweeter);
      
      console.log(sweeterArray);
      

      O mesmo resultado é registrado no console:

      Output

      [ 4, 6, 8, 10, 70 ]

      Possuir código como sweetArray.map(makeSweeter) torna seu código um pouco mais legível.

      Passo 2 — Convertendo uma string em uma matriz

      O .map() é conhecido por pertencer ao protótipo da matriz. Neste passo, você irá usá-lo para converter uma string em uma matriz. Você não está desenvolvendo o método para trabalhar com strings aqui. Em vez disso, você irá usar o método especial .call().

      Tudo no JavaScript é um objeto, e os métodos são funções ligadas a esses objetos. O .call() permite que você use o contexto de um objeto em outro. Portanto, o contexto do .map() em uma matriz estaria sendo copiado para uma string.

      O .call() pode representar argumentos passados do contexto a ser usado e parâmetros para os argumentos da função original.

      Vejamos um exemplo:

      const name = "Sammy"
      const map = Array.prototype.map
      
      const newName = map.call(name, eachLetter => {
          return `${eachLetter}a`
      })
      
      console.log(newName)
      

      Este é o resultado que é registrado no console:

      Output

      • [ "Sa", "aa", "ma", "ma", "ya" ]

      Aqui, você usou o contexto do .map() em uma string e passou um argumento da função que o .map() espera.

      Isso funciona de maneira semelhante ao método .split() de uma string, com a diferença que cada caractere da string pode ser modificado antes de ser retornado a uma matriz.

      Passo 3 — Renderizando listas em bibliotecas do JavaScript

      Bibliotecas do JavaScript como o React utilizam o .map() para renderizar itens em uma lista. No entanto, isso exige a sintaxe JSX, uma vez que o método .map() consiste de sintaxe JSX.

      Aqui está um exemplo de um componente do React:

      import React from "react";
      import ReactDOM from "react-dom";
      
      const names = ["whale", "squid", "turtle", "coral", "starfish"];
      
      const NamesList = () => (
        <div>
          <ul>{names.map(name => <li key={name}> {name} </li>)}</ul>
        </div>
      );
      
      const rootElement = document.getElementById("root");
      ReactDOM.render(<NamesList />, rootElement);
      

      Esse é um componente sem estado no React, que renderiza um div com uma lista. Os itens individuais da lista são renderizados usando o .map() para iterar na matriz de nomes inicialmente criada. Esse componente é renderizado usando o ReactDOM no elemento DOM com Id de root.

      Passo 4 — Reformatando objetos de matriz

      O .map() pode ser usado para iterar em objetos de uma matriz e, de maneira semelhante às matrizes tradicionais, modificar individualmente o conteúdo de cada objeto e retornar uma nova matriz. Essa modificação é feita com base no que é retornado na função de retorno de chamada.

      Vejamos um exemplo:

      const myUsers = [
          { name: 'shark', likes: 'ocean' },
          { name: 'turtle', likes: 'pond' },
          { name: 'otter', likes: 'fish biscuits' }
      ]
      
      const usersByLikes = myUsers.map(item => {
          const container = {};
      
          container[item.name] = item.likes;
          container.age = item.name.length * 10;
      
          return container;
      })
      
      console.log(usersByLikes);
      

      Este é o resultado que é registrado no console:

      Output

      [ {shark: "ocean", age: 50}, {turtle: "pond", age: 60}, {otter: "fish biscuits", age: 50} ]

      Aqui, você modificou cada objeto na matriz usando a notação de chaves e pontos. Esse caso de uso pode ser empregado para processar ou condensar dados recebidos antes de serem salvos ou analisados por um aplicativo frontend.

      Conclusão

      Nesse tutorial, analisamos quatro usos do método .map() em JavaScript. Em combinação com outros métodos, a funcionalidade do .map() pode ser estendida. Para mais informações, consulte nosso artigo Como usar métodos de matriz em JavaScript: métodos de iteração.



      Source link