Creación de su primera aplicación Nuxt: una librería CRUD

Aprenda a crear una aplicación Nuxt.


CRUD – Crear, leer, actualizar, eliminar

Supongo que ya conoce los fundamentos de Vue JS y / o está un poco familiarizado con el marco. Nuxt JS es un marco robusto, construido sobre Vue JS. Es esencialmente lo mismo que Vue JS. Entonces por qué, Nuxt?

Para la mayoría de las personas, la decisión de usar Nuxt JS suele ser por sus capacidades de SSR.

¿Qué es SSR??

SSR es una abreviatura para la representación del lado del servidor.

Por lo general, para la mayoría de las aplicaciones de página única (SPA), los archivos renderizados se inyectan automáticamente en el DOM después de que la página se ha cargado. Por lo tanto, los robots, los rastreadores de SEO encontrarán una página vacía en la carga de la página. Sin embargo, para SSR, debido a su capacidad de pre-renderizar aplicaciones en el servidor antes de la página, los rastreadores SEO pueden indexar fácilmente esa página. Además, posiblemente hace que la aplicación sea aún más eficiente que un SPA normal.

Nuxt JS ofrece a los desarrolladores la capacidad de crear aplicaciones SSR con facilidad. Las aplicaciones regulares de Vue JS SPA también se pueden configurar para usar SSR, pero el proceso es algo engorroso y Nuxt JS proporciona un contenedor para manejar toda esa configuración. Además del SSR, Nuxt también proporciona una manera fácil de configurar su proyecto VueJS con más eficiencia.

Aunque Nuxt JS sigue siendo Vue JS, tiene algunas diferencias fundamentales en la estructura de su arquitectura de carpetas.

El objetivo de este artículo es que puedas construir una aplicación con Nuxt; por lo tanto, no vamos a profundizar en la arquitectura de carpetas de Nuxt, sin embargo, explicaré rápidamente algunos de los importantes que podríamos necesitar aquí.

Páginas

La carpeta de páginas es una de las diferencias fundamentales de Vue SPA normal. Representa la carpeta Vistas en la arquitectura Vue normal, más, en Nuxt, los archivos creados en la carpeta Páginas se aprovisionan automáticamente como una ruta. Es decir, cuando crea un archivo index.vue en la carpeta de páginas, que se convierte automáticamente en su ruta raíz, es decir, localhost: 3000 /.

Además, cuando crea cualquier otro nombre de archivo.vue, se convierte en una ruta: la creación de about.vue le permite acceder a localhost: 3000 / about.

También puede crear una carpeta dentro de la carpeta Páginas. Si crea una carpeta llamada “contacto” y dentro de esa carpeta, tiene email.vue, entonces puede acceder a localhost: 3000 / contact / email. Es así de simple. De esta manera, no necesita crear manualmente un archivo router.js como lo haría normalmente con Vue JS para crear sus rutas.

Componentes

Sigue siendo más o menos lo mismo que con Vue JS, los componentes creados no se aprovisionan automáticamente como rutas.

Estático

La carpeta estática reemplaza la carpeta pública en las aplicaciones regulares de Vue JS, funciona prácticamente igual. Los archivos aquí no se compilan; se sirven de la misma manera que se almacenan.

Puede leer todo sobre la arquitectura y la estructura en el Página de documentación de Nuxt JS.

Ahora, construyamos algo interesante …

Crear una aplicación de librería

Crearemos una aplicación de librería, donde un usuario puede agregar libros que ha leído a una categoría particular que le gusta. Se verá así.

Entonces, tendremos un diseño simple como el anterior, solo 3 columnas que contienen las diferentes secciones de los libros. Leí recientemente libros, libros favoritos y sí, el mejor de los mejores libros (lo confesaré, no sabía cómo llamar a esa sección, ��)

Entonces, el objetivo aquí es poder agregar el título, autor y descripción de un libro a una tarjeta en cualquiera de las secciones, editar libros ya agregados y eliminar un libro existente. No utilizaremos ninguna base de datos, por lo que todo sucede en el estado.

Primero, instalamos Nuxt:

npm install create-nuxt-app

Segundo, después de instalar Nuxt, ahora puede crear el proyecto con el comando,

create-nuxt-app bookStore

Elijo nombrar mi aplicación “bookStore”; puedes nombrar tu algo más genial ^ _ ^

Luego, veamos las indicaciones restantes, ingrese una descripción,

Nombre del autor, escriba un nombre o presione Entrar para conservar los valores predeterminados

Seleccione un administrador de paquetes, con el que se sienta cómodo, ambos están bien

Seleccione un marco de IU. Para este proyecto, usaré Vuetify, y nuevamente, cualquier marco de UI con el que se sienta cómodo funcionará bien.

Seleccione un marco de servidor personalizado; no necesitamos ninguno, no seleccionaré ninguno

Módulos adicionales, seleccione lo que desee o seleccione ambos, no los usaríamos para esta aplicación.

El revestimiento es importante. Vamos con ESLint.

Si bien las pruebas son importantes, no las veremos hoy, así que ninguna

Modo de renderizado, sí, SSR es.

Nota: Elegir SSR no significa que no obtengamos el beneficio de tener un SPA, la aplicación sigue siendo un SPA pero con SSR. La otra opción significa simplemente SPA y sin SSR.

Presiona enter y sigue adelante,

Y nuestro proyecto está creando,

Después de la creación, ahora podemos ir al directorio y ejecutar

hilado dev

si está utilizando npm como administrador de paquetes, use,

npm run dev

Por defecto, la aplicación se ejecuta en localhost: 3000. Visite el enlace en su navegador y debería ver una página predeterminada de Nuxt.

Ahora comencemos por crear los componentes que necesitamos. Tendremos tarjetas que muestren la información de cada libro, y tendremos un modal que contiene un formulario para ingresar la información del nuevo libro o editar las existentes..

Para crear un componente, simplemente cree un nuevo archivo en la carpeta de componentes. Aquí está el código para el componente de mi tarjeta.

// BookCard.vue

{{Titulo del libro}}
{{bookAuthor}}
{{descripción del libro}}

exportación predeterminada {
accesorios: ["Titulo del libro", "bookAuthor", "descripción del libro"]
};

Una explicación rápida de lo que se hizo arriba. La imagen está codificada; No nos preocuparemos por eso por ahora. El título del libro, el autor del libro y la descripción del libro se transmiten a este componente desde la página principal como accesorios. Si no está familiarizado con los accesorios, imagínelos ya que los puntos de entrada a través de este componente se pueden completar con datos.

Ahora al siguiente componente, el modal.

//BookModal.vue

Agregar libros

Añadir

Ahora, ese es el marcado para el modal; necesitamos crear los modelos v como propiedades de datos; por lo tanto, agregaremos una etiqueta de script debajo de la etiqueta.

exportación predeterminada {
datos () {
regreso {
categoría: "",
título: "",
autor: "",
descripción: "",
};
},
}

Además, hay un menú desplegable “Seleccionar una categoría” que espera datos de “categorías”. Agregaremos eso a los datos.

exportación predeterminada {
datos () {
regreso {
abierto: falso,
categoría: "",
título: "",
autor: "",
descripción: "",
categorías: ["Libros leídos recientemente", "Libros favoritos", "Mejor de lo mejor"]
};
},
}

Ahora, necesitamos una forma de alternar nuestra apertura y cierre modal, por ahora, solo tendremos una propiedad de datos “abierta” como se indicó anteriormente. Lo veremos de cerca a continuación.

Creemos rápidamente nuestra página de vista donde tendremos tres cuadrículas / columnas, una para cada sección del libro. Llamemos a la página index.vue, vea el código a continuación.

//index.vue

Libros leídos recientemente

Libros favoritos

Mejor de lo mejor

Ahora que tenemos nuestras cuadrículas, necesitamos agregar nuestro componente de tarjeta a cada cuadrícula, por cada libro agregado. Por lo tanto, importaremos nuestro componente BookCard.vue.

Libros leídos recientemente

Editar
Eliminar

Libros favoritos

Editar
Eliminar

Mejor de lo mejor

Editar
Eliminar

Ahora, hemos importado el componente BookCard y hemos vinculado sus accesorios a los resultados del bucle; Esto garantiza que por cada entrada agregada a cualquiera de las secciones, se cree una tarjeta para ello. Además, en cada tarjeta, incluiremos botones para editar o eliminar una tarjeta.

Ahora, necesitamos importar la tarjeta desde el script y definir las matrices que tendrán registros para cada una de las categorías..

importar BookCard desde "@ / components / BookCard";

exportación predeterminada {
componentes: {
BookCard,
},
datos () {
regreso {
libros recientes: [],
favouriteBooks: [],
mejor de lo mejor: []
};
},
};

A continuación, debemos tener un botón en el encabezado que abrirá el modal cada vez que necesitemos agregar libros. Haremos esto en el archivo “default.vue”. Agregaremos el botón al encabezado predeterminado de la barra de la aplicación.

Agregar libros

A continuación, necesitamos crear el método openModal en la sección de script. En las aplicaciones regulares de Vue JS, hay un bus de eventos que le permite comunicarse con otro componente e incluso pasar datos, en Nuxt JS, todavía hay un bus de eventos y aún puede crearlo de la misma manera. Por lo tanto, utilizaremos un bus de eventos para pasar datos, abrir un modal en la página index.vue (que aún no hemos importado) desde el archivo layout / default.vue.

Veamos como se hace.

Para crear un bus de eventos global, abra un archivo en el directorio raíz del proyecto, asígnele el nombre eventBus.js y pegue el código a continuación..

importar Vue desde ‘vue’

export const eventBus = new Vue ()

Si, eso es todo. Ahora podemos usarlo.

importar {eventBus} desde "@ / eventBus";
métodos: {
openModal () {
eventBus. $ emit ("abrir-agregar-libro-modal");
}
}

A continuación, volveremos a nuestro componente BookModal y escucharemos cuando eventBus emita “open-add-book-modal”. Agregaremos esto a la sección de script.

importar {eventBus} desde "@ / eventBus";

creado() {
eventBus. $ on ("abrir-agregar-libro-modal", this.open = true);
},

Ahora, podemos abrir y cerrar nuestro modal, pero todavía no agrega ningún libro. Agreguemos un método a nuestro Modal para que guarde lo que se agrega al estado (recuerde que no estamos utilizando ninguna base de datos o almacenamiento local). Agregamos esto al lado de ‘created ()’

métodos: {
saveBook () {
let cardData = {
título: this.title,
autor: this.author,
descripción: this.description,
category: this.category
};
eventBus. $ emit ("guardar libro", cardData);
this.open = false;
}
}

A continuación, necesitamos una forma de volver a llenar el modal cuando estamos editando datos de cualquiera de las tarjetas. Así que hagamos algunos ajustes al “creado ()”

creado() {
eventBus. $ on ("abrir-agregar-libro-modal", datos => {
if (datos) {
this.category = data.category;
this.title = data.title;
this.author = data.author;
this.description = data.description;
}
this.open = true;
});
},

Ahora, el BookModal se ve así en su conjunto,

//BookModal.vue

Agregar libros

Añadir

importar {eventBus} desde "@ / eventBus";
exportación predeterminada {
datos () {
regreso {
abierto: falso,
categoría: "",
título: "",
autor: "",
descripción: "",
categorías: ["Libros leídos recientemente", "Libros favoritos", "Mejor de lo mejor"]
};
},
creado() {
eventBus. $ on ("abrir-agregar-libro-modal", datos => {
if (datos) {
this.category = data.category;
this.title = data.title;
this.author = data.author;
this.description = data.description;
}
this.open = true;
});
},
métodos: {
saveBook () {
let cardData = {
título: this.title,
autor: this.author,
descripción: this.description,
category: this.category
};
eventBus. $ emit ("guardar libro", cardData);
this.open = false;
}
}
};

A continuación, ahora podemos volver a la página index.vue para importar el componente BookModal. Agregaremos esto a la sección de script.

importar BookCard desde "@ / components / BookCard";
importar BookModal desde "@ / components / BookModal";
importar {eventBus} desde "@ / eventBus";

exportación predeterminada {
componentes: {
BookCard,
BookModal
},
datos () {
regreso {
libros recientes: [],
favouriteBooks: [],
mejor de lo mejor: []
};
},

Además, en el cuerpo, agregaremos,

Necesitamos métodos para editar y eliminar una tarjeta. En la plantilla anterior, ya pasé los métodos de edición y eliminación a los botones como se muestra a continuación, del mismo modo, pasé los argumentos necesarios para cada método.

Editar Borrar

Vamos a crear los métodos..

métodos: {
eliminar (categoría, índice) {
si (categoría === "Libros leídos recientemente") {
this.recentBooks.splice (índice, 1);
}
si (categoría === "Libros favoritos") {
this.favouriteBooks.splice (índice, 1);
}
si (categoría === "Mejor de lo mejor") {
this.bestOfTheBest.splice (índice, 1);
}
},
editar (elemento, índice) {
if (item.category === "Libros leídos recientemente") {
eventBus. $ emit ("abrir-agregar-libro-modal", articulo);
this.recentBooks.splice (índice, 1);
}
if (item.category === "Libros favoritos") {
eventBus. $ emit ("abrir-agregar-libro-modal", articulo);
this.favouriteBooks.splice (índice, 1);
}
if (item.category === "Mejor de lo mejor") {
eventBus. $ emit ("abrir-agregar-libro-modal", articulo);
this.bestOfTheBest.splice (índice, 1);
}
}
}

Recuerde, el BookModal está emitiendo, y un evento llamado save-book, necesitamos un oyente para ese evento aquí.

creado() {
eventBus. $ on ("guardar libro", cardData => {
if (cardData.category === "Libros leídos recientemente") {
this.recentBooks.push (cardData);
}
if (cardData.category === "Libros favoritos") {
this.favouriteBooks.push (cardData);
}
if (cardData.category === "Mejor de lo mejor") {
this.bestOfTheBest.push (cardData);
}
});
},

Ahora, en una mirada completa, nuestra página index.vue se ve así

Libros leídos recientemente

Ver

Editar
Eliminar

Libros favoritos

Editar
Eliminar

Mejor de lo mejor

Editar
Eliminar

importar BookCard desde "@ / components / BookCard";
importar BookModal desde "@ / components / BookModal";
importar {eventBus} desde "@ / eventBus";

exportación predeterminada {
componentes: {
BookCard,
BookModal
},
datos () {
regreso {
libros recientes: [],
favouriteBooks: [],
mejor de lo mejor: []
};
},
creado() {
eventBus. $ on ("guardar libro", cardData => {
if (cardData.category === "Libros leídos recientemente") {
this.recentBooks.push (cardData);
this.recentBooks.sort ((a, b) => b – a);
}
if (cardData.category === "Libros favoritos") {
this.favouriteBooks.push (cardData);
this.favouriteBooks.sort ((a, b) => b – a);
}
if (cardData.category === "Mejor de lo mejor") {
this.bestOfTheBest.push (cardData);
this.bestOfTheBest.sort ((a, b) => b – a);
}
});
},
métodos: {
eliminar (categoría, índice) {
si (categoría === "Libros leídos recientemente") {
this.recentBooks.splice (índice, 1);
}
si (categoría === "Libros favoritos") {
this.favouriteBooks.splice (índice, 1);
}
si (categoría === "Mejor de lo mejor") {
this.bestOfTheBest.splice (índice, 1);
}
},
editar (elemento, índice) {
if (item.category === "Libros leídos recientemente") {
eventBus. $ emit ("abrir-agregar-libro-modal", articulo);
this.recentBooks.splice (índice, 1);
}
if (item.category === "Libros favoritos") {
eventBus. $ emit ("abrir-agregar-libro-modal", articulo);
this.favouriteBooks.splice (índice, 1);
}
if (item.category === "Mejor de lo mejor") {
eventBus. $ emit ("abrir-agregar-libro-modal", articulo);
this.bestOfTheBest.splice (índice, 1);
}
}
}
};

¡Si llegaste tan lejos, gran trabajo! Usted es maravilloso!

Como se mencionó anteriormente, cada archivo .vue creado en la carpeta de páginas se aprovisiona automáticamente como una ruta, del mismo modo, para cada carpeta creada dentro de la carpeta de páginas. Esto no solo es válido para páginas estáticas, y las páginas dinámicas también se pueden crear de esta manera!

Veamos como.

Con nuestro proyecto actual, supongamos que queremos agregar una página dinámica para todas las tarjetas de libros con un botón de vista para ver más detalles sobre un libro.

Agreguemos rápidamente un botón de vista y usemos para visitar la página. Si, reemplaza y funciona.

Ver

A continuación, creamos una carpeta dinámica con el prefijo del nombre con un guión bajo. es decir, _title y dentro de esa carpeta, tendremos un archivo index.vue que se procesará cuando visitemos esa ruta.

Solo para demostración, solo accederemos a la propiedad params dentro del archivo.

// _title / index.vue

{{$ route.params.title}}

Ahora, cuando hacemos clic en ver, se abre otra página donde podemos ver el título que hemos pasado por la ruta. Esto se puede desarrollar para hacer lo que queramos en lo que respecta a las páginas dinámicas..

Eso es todo por esta lección!

El código completo para esto se puede encontrar en este repositorio. Eres bienvenido a contribuir al código. Si está interesado en dominar el marco, le sugeriría esto Curso Udemy.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map