REST significa transferencia de estado representacional que básicamente proporciona una forma de mapear verbos HTTP como (GET, POST, PUT, DELETE) con acciones CRUD como (CREATE, READ, UPDATE, DELETE). Cada vez que hacemos clic en un enlace de la página web, básicamente estamos haciendo una transferencia de estado de una página a otra. Por ejemplo, cuando hacemos clic en la página de inicio del sitio web del blog, queremos obtener todos los blogs que están almacenados en la base de datos del servidor, que es básicamente una asignación de la solicitud HTTP GET con la solicitud READ de la base de datos.
Del mismo modo, hay más requests HTTP en las que interactuamos con la base de datos, como crear un blog, editar un blog, eliminar un blog y mucho más. Las rutas RESTfull son convenciones estándar de cómo implementar estos mapeos. No es necesario que no pueda implementar dicha funcionalidad sin rutas RESTfull, pero estas son las rutas más simples y estándar que siguen la mayoría de los desarrolladores. Vamos a entender cómo funcionan creando una aplicación de blog simple donde podemos eliminar, agregar, crear, editar y mostrar el blog.
Funcionalidad | Sendero | HTTP | Rendimiento esperado |
---|---|---|---|
Índice | /blogs | OBTENER | Listar todas las publicaciones del blog |
Nuevo | /blogs/nuevo | OBTENER | Mostrar un formulario para obtener información del blog |
Crear | /blogs | CORREO | Agregar blog a la base de datos y redirigir a la página de inicio |
Espectáculo | /blogs/:id | OBTENER | Mostrar un blog habiendo dado id |
Editar | /blogs/:id/editar | OBTENER | Mostrar formulario de edición para un blog |
Actualizar | /blogs/:id | PONER | Actualizar un blog en particular y redirigir al blog actualizado |
Destruir | /blogs/:id | ELIMINAR | Eliminar un blog en particular y redirigir a la página de inicio |
Vamos a usar node.js que servirá a la página web y MongoDB para almacenar los datos. El código completo está disponible en Github , que incluye cómo interactuar con la base de datos y configurar todas las dependencias. Solo para dar una pequeña idea sobre el esquema de datos a continuación, se muestra el esquema para nuestra publicación de blog.
Nota: el código completo está disponible en Github
var blogSchema = new mongoose.Schema({ title: String, image: String, body: String, created: {type: Date, default: Date.now} }); var Blog = mongoose.model("Blog", blogSchema);
Página de índice (GET): para la página de índice, queremos mostrar todos los blogs que están almacenados en la base de datos. Para hacerlo, primero obtendremos todos los datos de la base de datos usando la función find() de MongoDB y luego enviaremos el resultado a una página que mostrará esas publicaciones. Estamos encontrando todas las publicaciones de blog almacenadas en la base de datos que estamos recuperando y manejando usando la función interna y, si ocurre un error, estamos enviando a la consola ¡ERROR! mensaje y si todo funciona bien, estamos representando la página de índice donde estamos pasando todos los blogs como datos (blogs) que básicamente contienen toda la información del blog. Que es más utilizado por la página de índice para mostrar esos datos.
// Routes app.get("/blogs", function(req, res){ Blog.find({}, function(err, blogs){ if (err) { console.log("ERROR!"); } else { res.render("index.ejs", {blogs: blogs}); } }); });
Nombre de archivo: index.ejs
<% blogs.forEach(function(blog){ %> <img src="<%= blog.image %>"> <a href="/blogs/<%= blog._id %>"><%= blog.title %></a> <%= blog.created.toDateString() %>...</span> <%- blog.body.substring(0, 50) %> <a href="/blogs/<%= blog._id %>">Read More</a> <% }) %>
Nuevo blog (GET) y Create Blog (POST): queremos agregar un nuevo blog, por lo que necesitamos obtener el formulario que tomará la entrada del usuario. Por lo tanto, primero usaremos new.ejs para representar el formulario, luego completaremos toda la información y luego, queremos guardarla en la base de datos, lo que haremos mediante la realización de una solicitud POST. Observe que tenemos la misma ruta que la anterior, pero aquí solo se cambia el tipo de solicitud, que se manejará por separado. Estamos creando una nueva publicación de blog usando la función create() de MongoDB. Si no obtenemos ningún error, lo dirigiremos a la página de inicio donde el usuario puede ver que el blog se ha agregado y confirma que la operación se ejecuta con éxito.
// Render the new.ejs page that contains // the form for adding a blog app.get("/blogs/new", function (req, res) { res.render("new.ejs"); }); // Add data to database and redirect to // home page where we see the new page // with updation app.post("/blogs", function (req, res) { Blog.create(req.body.blog, function (err, newBlog) { if (err) { console.log("ERROR!"); } else { res.redirect("/blogs"); } }); });
Nombre de archivo: new.ejs
<form action="/blogs" method="POST"> <label>Title</label> <input type="text" name="blog[title]" placeholder="Title"> <label>Image</label> <input type="text" name="blog[image]" placeholder="Image"> <label>Blog Content</label> <textarea name="blog[body]"></textarea> <input type="submit"> </form>
Mostrar (GET): generalmente, la página de inicio del blog no muestra todos los blogs por completo, solo muestra unas pocas líneas iniciales y si un usuario quiere leerlo según su título y vista previa, queremos dirigirlo a una nueva página donde todo blog se muestra en nuestro caso vamos a redirigir al archivo HTML show.ejs. Para hacerlo, todos los blogs tienen una identificación única asociada y si queremos mostrar un blog en particular, simplemente obtendremos la identificación de ese blog y usaremos findById() para obtener datos y enviarlos al archivo HTML show.ejs donde los datos se mostrará.
// Routes app.get("/blogs/:id", function(req, res){ Blog.findById(req.params.id, function(err, foundBlog){ if (err) { console.log("ERROR!"); } else { res.render("show.ejs", {blog: foundBlog}); } }); });
Nombre de archivo: mostrar.ejs
<%= blog.title %> <img c src=" <%= blog.image %>"> <span><%= blog.created.toDateString() %></span> <p><%- blog.body %></p> <a href="/blogs/<%= blog._id %>/edit">Edit</a> <form action="/blogs/<%= blog._id %>?_method=DELETE" method="POST"> <button class="ui red inverted button"> Delete </button> </form>
Editar (OBTENER) y ACTUALIZAR (PUT): a veces queremos editar un blog, primero necesitamos una identificación única del blog después de enviar al usuario a una página diferente donde se muestra un formulario que se completa previamente con los datos anteriores y el usuario actualizará sus datos después de que el usuario envíe al blog actualizado. Para hacerlo, primero obtenga una solicitud para ir a la página edit.ejs y luego usaremos la solicitud PUT que usará la función findByIdAndUpdate() de MongoDB para actualizar los datos con los datos que ya estaban en la base de datos con la identificación dada.
app.get("/blogs/:id/edit", function(req, res){ Blog.findById(req.params.id, function(err, foundBlog){ if (err){ console.log("ERROR!"); } else { res.render("edit.ejs", {blog: foundBlog}); } }); }); app.put("/blogs/:id", function(req, res){ Blog.findByIdAndUpdate(req.params.id, req.body.blog, function(err,updatedBlog){ if (err) { console.log("ERROR!"); } else { res.redirect("/blogs/"+req.params.id); } }); });
Edit <%= blog.title %> <form action= "/blogs/<%= blog._id %>?_method=PUT" method="POST"> <label>Title</label> <input type="text" name="blog[title]" value="<%= blog.title %>"> <label>Image</label> <input type="text" name="blog[image]" value="<%= blog.image%>"> <label>Blog Content</label> <textarea name="blog[body]"> <%= blog.body%> </textarea> <input type="submit"> </form>
Destroy(DELETE): Por último, si queremos eliminar un blog específico, simplemente usaremos la ID del blog y usaremos la función findByIdAndRemove() de MongoDB para eliminar un blog específico de la base de datos.
app.delete("/blogs/:id", function(req, res){ Blog.findByIdAndRemove(req.params.id, function(err){ if (err) { res.redirect("/blogs"); } else { res.redirect("/blogs"); } }); });
Publicación traducida automáticamente
Artículo escrito por abhijeet_padghan y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA