Artículos individuales

Este paso es opcional, sólo por diversión. Se asume que has terminado con éxito el tutorial.

Podemos hacer nuestro CMS todavía mejor, haciendo posible que se puedan ver los artículos de forma individual. Vamos a ver cómo podemos hacerlo.

Paso 1 - parámetros URL.

No queremos tener que escribir un handler por cada URL en nuestra aplicación. Los parámetros URL de express nos permiten especificar secciones dinámicas en la URL - un espacio para los ID de los artículos del blog o un usuario, por ejemplo. Puedes pensar en ellas como los argumentos de una función que son pasados al servidor.

Los parámetros URL de Express usan : para las partes dinámicas de la URL:

  • /users/:userId - identifica URLs como /users/123, /users/node-girls

  • /users/:userId/posts/:postId - identifica URLs como /users/node-girls/posts/node-is-best

Vamos a añadir otro handler para mostrar artículos individuales del blog.

server.js
app.get('/posts/:postId', function (req, res) {    res.send('post id: ' + req.params.postId);});

¿Qué piensas que vas a ver cuando visites http://localhost:3000/posts/abc123 en tu navegador?

Paso 2 - Leyendo del archivo y mandando el artículo específico

Igual que en /create-post, necesitas leer tu archivo JSON. Prueba y envía el contenido del artículo al navegador con:res.send(postContentHere)

Paso 3 - Renderizando una plantilla

Ahora mismo estamos mandando texto plano, pero probablemente quieras mostrar tu artículo con HTML y CSS. Pa hacerlo, podemos usar el sistema de plantillas incorporado en Express. Puedes usar cualquier lenguaje de plantillas que quieras (pug/jade, ejs, o handlebars), pero vamos a usar mustache (que es muy similar a handlebars) en este ejemplo.

Ejecuta npm install --save mustache-express, después comprueba la documentación para mustache-express y plantillas de Express. Necesitas crear un archivo de plantilla en views/post.mustache como este:

views/post.mustache
<!DOCTYPE html>
<html>
  <head>
      <title>Blog Post</title>
  </head>
  <body>
      <h1>yay blog post!</h1>
          <article>
            {{ post }}
          </article>
  </body>
</html>

Si te has quedado atascado, mira el ejemplo de solución :)

Todavía más desafíos:

  • Añade títulos a tus posts

  • Añade un índice

  • Renderiza los post con Markdown

PreviousMás ideasNextGlosario

Last updated