¿Cómo desarrollar una aplicación CRUD con Nuxt.js?

33min
Descripción general
En este tutorial, descubrirás cómo construir una aplicación CRUD (crear, leer, actualizar, eliminar) completamente operativa utilizando Nuxt.js. 
Usaremos Back4app como nuestro servicio backend para manejar el almacenamiento y la gestión de datos con facilidad. 
Esta guía cubre funciones CRUD esenciales, detallando cómo configurar un proyecto de Back4app, crear un modelo de datos versátil e integrar operaciones CRUD con tu aplicación Nuxt.js.
Inicialmente, configurarás un proyecto de Back4app llamado Basic-CRUD-App-Nuxt que ofrece un potente entorno de almacenamiento de datos NoSQL. 
Definirás tus estructuras de datos estableciendo clases y campos ya sea manualmente o a través del Agente AI inteligente de Back4app.
A continuación, gestionarás tu backend utilizando la Aplicación Administrativa de Back4app, una interfaz fácil de usar y de arrastrar y soltar para operaciones de datos eficientes. 
Finalmente, conectarás tu aplicación Nuxt.js a Back4app utilizando llamadas a la API REST para realizar operaciones CRUD seguras.
Al final de esta guía, habrás creado una aplicación Nuxt.js lista para producción capaz de manejar operaciones CRUD básicas junto con autenticación de usuario segura y gestión de datos.
Puntos principales
Aprende cómo construir una aplicación CRUD de Nuxt.js con un backend de alto rendimiento.
Entiende el proceso de diseñar un backend escalable y vincularlo a tu frontend de Nuxt.js.
Explora cómo la Aplicación Administrativa de Back4app simplifica operaciones de datos como crear, leer, actualizar y eliminar.
Obtén información sobre métodos de implementación, incluyendo la contenedorización con Docker para un despliegue de producción sin problemas.
﻿
Requisitos previos
Antes de comenzar, asegúrate de que tienes:
Una cuenta de Back4app con un proyecto recién configurado.
Si necesitas ayuda, consulta Introducción a Back4app.
Un entorno de desarrollo para Nuxt.js.
Asegúrate de tener Node.js instalado y configurar un IDE o editor de texto de tu elección.
Conocimientos básicos de Nuxt.js, Vue.js y REST APIs.
Consulta la documentación de Nuxt.js si necesitas un repaso.
﻿
Paso 1 – Inicialización del Proyecto
Configurando un Nuevo Proyecto en Back4app
Inicia sesión en tu cuenta de Back4app.
Selecciona la opción “Nueva Aplicación” desde tu panel de control.
Nombra tu proyecto: Basic-CRUD-App-Nuxt y sigue las instrucciones de configuración.
Crear Nuevo Proyecto
﻿
Después de que se cree el proyecto, aparecerá en tu panel de control, listo para una configuración adicional del backend.
﻿
Paso 2 – Creando el Modelo de Datos
Estableciendo tus Estructuras de Datos
Para esta aplicación CRUD, configurarás varias clases (o colecciones) dentro de tu proyecto de Back4app. A continuación se presentan ejemplos de clases clave y sus campos necesarios para la funcionalidad básica de CRUD.
1. Colección de Artículos
Esta colección almacena detalles sobre cada artículo.
Campo
Tipo
Descripción
_id
ObjectId
Identificador único generado por el sistema.
título
Cadena
Nombre del artículo.
descripción
Cadena
Descripción breve del artículo.
creadoEn
Fecha
Marca de tiempo que indica la creación del elemento.
actualizadoEn
Fecha
Marca de tiempo que indica la última actualización.
2. Colección de Usuarios
Esta colección gestiona los detalles del usuario y la información de autenticación.
Campo
Tipo
Descripción
_id
ObjectId
Identificador único generado automáticamente.
nombre de usuario
Cadena
Nombre de usuario único para el usuario.
correo electrónico
Cadena
La dirección de correo electrónico única del usuario.
hashDeContraseña
Cadena
Contraseña hash para una autenticación segura.
creadoEn
Fecha
Marca de tiempo de creación de la cuenta.
actualizadoEn
Fecha
Marca de tiempo para modificaciones de cuenta.
Puedes definir estas colecciones y campos manualmente en el panel de control de Back4app.
Crear Nueva Clase
﻿
Agregas campos eligiendo el tipo de dato apropiado, nombrando el campo, opcionalmente estableciendo un valor predeterminado y especificando si el campo es obligatorio.
Crear Columna
﻿
Utilizando el Agente AI de Back4app para la Generación de Esquemas
El Agente AI de Back4app es una herramienta útil dentro de tu panel que puede construir automáticamente tu esquema a partir de una descripción proporcionada. Esta función acelera el proceso de configuración y asegura que tu modelo de datos esté optimizado para operaciones CRUD.
Cómo Usar el Agente AI:
Abre el Agente de IA:
Accede desde la configuración de tu proyecto en el panel de control de Back4app.
Describe tu Esquema:
Proporciona un aviso detallado que describa las clases y campos que necesitas.
Revisa y Confirma:
El Agente de IA generará una propuesta de esquema. Revísala y confirma para aplicar los cambios.
Ejemplo de Aviso
Text
Create the following collections in my Back4app project:

1) Collection: Items
- Fields:
  - _id: ObjectId (auto-generated)
  - title: String
  - description: String
  - createdAt: Date (auto-generated)
  - updatedAt: Date (auto-updated)

2) Collection: Users
- Fields:
  - _id: ObjectId (auto-generated)
  - username: String (unique)
  - email: String (unique)
  - passwordHash: String
  - createdAt: Date (auto-generated)
  - updatedAt: Date (auto-updated)
Create the following collections in my Back4app project:

1) Collection: Items
- Fields:
  - _id: ObjectId (auto-generated)
  - title: String
  - description: String
  - createdAt: Date (auto-generated)
  - updatedAt: Date (auto-updated)

2) Collection: Users
- Fields:
  - _id: ObjectId (auto-generated)
  - username: String (unique)
  - email: String (unique)
  - passwordHash: String
  - createdAt: Date (auto-generated)
  - updatedAt: Date (auto-updated)
﻿
Esta función inteligente ahorra tiempo y asegura que la estructura de tus datos esté configurada de manera consistente para operaciones CRUD óptimas.
﻿
Paso 3 – Habilitando la Aplicación de Administración y Manejo de Operaciones CRUD
Descripción General de la Aplicación de Administración
La Aplicación de Administración de Back4app proporciona una interfaz sin código para la gestión fluida de datos en el backend. Sus características de arrastrar y soltar facilitan realizar operaciones CRUD como agregar, editar, ver y eliminar registros.
Activando la Aplicación de Administración
Ve al menú “Más” en tu panel de control de Back4app.
Elige “Aplicación de Administración” y haz clic en “Habilitar Aplicación de Administración.”
Configura tu cuenta de administrador creando credenciales iniciales. Este paso también creará roles del sistema como B4aAdminUser y configurará colecciones esenciales del sistema.
Habilitar Aplicación de Administración
﻿
Una vez habilitada, inicia sesión en la Aplicación de Administración para gestionar los datos de tu aplicación sin esfuerzo.
Panel de Administración de la Aplicación
﻿
Uso de la Aplicación de Administración para Operaciones CRUD
Dentro de la Aplicación de Administración, puedes:
Agregar Nuevas Entradas: Utiliza el botón “Agregar Registro” en una colección (como Artículos) para insertar datos.
Ver y Editar: Haz clic en cualquier registro para inspeccionar sus detalles o realizar modificaciones.
Eliminar Entradas: Elimina registros que ya no son necesarios.
Esta interfaz intuitiva simplifica la gestión de datos para tu aplicación.
﻿
Paso 4 – Conectando tu aplicación Nuxt.js a Back4app
Con tu backend en su lugar, la siguiente tarea es integrar tu aplicación Nuxt.js con Back4app.
Usando llamadas a la API REST
Dado que el SDK de Parse no se utiliza comúnmente con Nuxt.js, realizarás operaciones CRUD utilizando llamadas a la API REST.
Configurando Solicitudes de API en Nuxt.js
Instalar Axios:
Si aún no está instalado, agregue Axios a su proyecto de Nuxt.js:
Bash
npm install @nuxtjs/axios
npm install @nuxtjs/axios
﻿
Configurar el Módulo Axios:
En su nuxt.config.js, incluya el módulo Axios y configure la configuración básica:
Text
export default {
  modules: ['@nuxtjs/axios'],
  axios: {
    baseURL: 'https://parseapi.back4app.com'
  }
}
export default {
  modules: ['@nuxtjs/axios'],
  axios: {
    baseURL: 'https://parseapi.back4app.com'
  }
}
﻿
Realizando Operaciones CRUD:
Cree un servicio (por ejemplo, services/items.js) para manejar las llamadas a la API. A continuación se muestra un ejemplo de cómo podría obtener, crear, actualizar y eliminar elementos:
Text
// services/items.js
export default {
  async fetchItems() {
    try {
      const response = await this.$axios.$get('/classes/Items', {
        headers: {
          'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
          'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
        }
      });
      return response.results;
    } catch (error) {
      console.error('Error al obtener elementos:', error);
      return [];
    }
  },

  async addItem(title, description) {
    try {
      const response = await this.$axios.$post('/classes/Items', {
        title,
        description
      }, {
        headers: {
          'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
          'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
        }
      });
      return response;
    } catch (error) {
      console.error('Error al crear elemento:', error);
    }
  },

  async updateItem(objectId, newTitle, newDescription) {
    try {
      const response = await this.$axios.$put(`/classes/Items/${objectId}`, {
        title: newTitle,
        description: newDescription
      }, {
        headers: {
          'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
          'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
        }
      });
      return response;
    } catch (error) {
      console.error('Error al actualizar elemento:', error);
    }
  },

  async removeItem(objectId) {
    try {
      const response = await this.$axios.$delete(`/classes/Items/${objectId}`, {
        headers: {
          'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
          'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
        }
      });
      return response;
    } catch (error) {
      console.error('Error al eliminar elemento:', error);
    }
  }
}
// services/items.js
export default {
  async fetchItems() {
    try {
      const response = await this.$axios.$get('/classes/Items', {
        headers: {
          'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
          'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
        }
      });
      return response.results;
    } catch (error) {
      console.error('Error al obtener elementos:', error);
      return [];
    }
  },

  async addItem(title, description) {
    try {
      const response = await this.$axios.$post('/classes/Items', {
        title,
        description
      }, {
        headers: {
          'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
          'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
        }
      });
      return response;
    } catch (error) {
      console.error('Error al crear elemento:', error);
    }
  },

  async updateItem(objectId, newTitle, newDescription) {
    try {
      const response = await this.$axios.$put(`/classes/Items/${objectId}`, {
        title: newTitle,
        description: newDescription
      }, {
        headers: {
          'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
          'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
        }
      });
      return response;
    } catch (error) {
      console.error('Error al actualizar elemento:', error);
    }
  },

  async removeItem(objectId) {
    try {
      const response = await this.$axios.$delete(`/classes/Items/${objectId}`, {
        headers: {
          'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
          'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
        }
      });
      return response;
    } catch (error) {
      console.error('Error al eliminar elemento:', error);
    }
  }
}
﻿
Integra estos métodos de API dentro de tus páginas o componentes de Nuxt.js para habilitar la funcionalidad completa de CRUD.
﻿
Paso 5 – Mejorando la Seguridad
Implementación de Listas de Control de Acceso (ACLs)
Asegura tus datos configurando ACLs para objetos individuales. Por ejemplo, puedes restringir un elemento para que solo su creador pueda verlo o modificarlo:
Text
async function createPrivateItem(title, description, userId) {
  try {
    const acl = {
      "*": { "read": false, "write": false },
      [userId]: { "read": true, "write": true }
    };

    const response = await this.$axios.$post('/classes/Items', {
      title,
      description,
      ACL: acl
    }, {
      headers: {
        'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
        'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
      }
    });
    console.log('Private item created:', response);
  } catch (error) {
    console.error('Error creating private item:', error);
  }
}
async function createPrivateItem(title, description, userId) {
  try {
    const acl = {
      "*": { "read": false, "write": false },
      [userId]: { "read": true, "write": true }
    };

    const response = await this.$axios.$post('/classes/Items', {
      title,
      description,
      ACL: acl
    }, {
      headers: {
        'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
        'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
      }
    });
    console.log('Private item created:', response);
  } catch (error) {
    console.error('Error creating private item:', error);
  }
}
﻿
Configuración de Permisos a Nivel de Clase (CLPs)
En tu panel de Back4app, configura CLPs para hacer cumplir políticas de acceso predeterminadas, asegurando que solo los usuarios autenticados puedan interactuar con colecciones específicas.
﻿
Paso 6 – Implementación de la Autenticación de Usuarios
Configuración de Registro y Inicio de Sesión de Usuarios
Back4app aprovecha una colección de Usuarios incorporada para gestionar la autenticación. En tu aplicación de Nuxt.js, implementa el registro y el inicio de sesión utilizando llamadas a la API REST.
Ejemplo: Registro y Inicio de Sesión de Usuario
Text
export default {
  async registerUser(username, password, email) {
    try {
      const response = await this.$axios.$post('/users', {
        username,
        password,
        email
      }, {
        headers: {
          'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
          'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
        }
      });
      console.log('User registered:', response);
      return response;
    } catch (error) {
      console.error('Registration error:', error);
    }
  },

  async loginUser(username, password) {
    try {
      const response = await this.$axios.$get('/login', {
        params: { username, password },
        headers: {
          'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
          'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
        }
      });
      console.log('User logged in:', response);
      return response;
    } catch (error) {
      console.error('Login error:', error);
    }
  }
}
export default {
  async registerUser(username, password, email) {
    try {
      const response = await this.$axios.$post('/users', {
        username,
        password,
        email
      }, {
        headers: {
          'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
          'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
        }
      });
      console.log('User registered:', response);
      return response;
    } catch (error) {
      console.error('Registration error:', error);
    }
  },

  async loginUser(username, password) {
    try {
      const response = await this.$axios.$get('/login', {
        params: { username, password },
        headers: {
          'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
          'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
        }
      });
      console.log('User logged in:', response);
      return response;
    } catch (error) {
      console.error('Login error:', error);
    }
  }
}
﻿
Este enfoque admite la gestión de sesiones, recuperación de contraseñas y características adicionales de autenticación.
﻿
Paso 7 – Desplegando tu Aplicación Nuxt.js
Back4app simplifica el proceso de despliegue. Puedes desplegar tu aplicación Nuxt.js utilizando varios métodos, incluida la contenedorización con Docker.
7.1 Construyendo tu Proyecto Nuxt.js
Construir la Aplicación:
Ejecuta el siguiente comando para generar la construcción de producción:
Bash
npm run build
npm run build
﻿
Iniciar la Aplicación:
Prueba tu construcción de producción localmente usando:
Bash
npm run start
npm run start
﻿
7.2 Organizando la Estructura de tu Proyecto
Una estructura típica de proyecto Nuxt.js puede verse así:
Text
Basic-CRUD-App-Nuxt/
|-- assets/
|-- components/
|-- layouts/
|-- pages/
|-- plugins/
|-- services/
|   |-- items.js
|   |-- auth.js
|-- static/
|-- nuxt.config.js
|-- package.json
|-- Dockerfile
Basic-CRUD-App-Nuxt/
|-- assets/
|-- components/
|-- layouts/
|-- pages/
|-- plugins/
|-- services/
|   |-- items.js
|   |-- auth.js
|-- static/
|-- nuxt.config.js
|-- package.json
|-- Dockerfile
﻿
7.3 Dockerizando tu Aplicación Nuxt.js
Si prefieres la contenedorización, incluye un Dockerfile en la raíz de tu proyecto:
Dockerfile
# Use a Node.js image as the base
FROM node:16-alpine

# Set working directory
WORKDIR /app

# Copy package files and install dependencies
COPY package*.json ./
RUN npm install

# Copy the rest of the application
COPY . .

# Build the application
RUN npm run build

# Expose the port (adjust if necessary)
EXPOSE 3000

# Start the application
CMD ["npm", "run", "start"]
# Use a Node.js image as the base
FROM node:16-alpine

# Set working directory
WORKDIR /app

# Copy package files and install dependencies
COPY package*.json ./
RUN npm install

# Copy the rest of the application
COPY . .

# Build the application
RUN npm run build

# Expose the port (adjust if necessary)
EXPOSE 3000

# Start the application
CMD ["npm", "run", "start"]
﻿
7.4 Despliegue a través de Back4app Web Deployment
Conectar tu repositorio:
Asegúrate de que tu proyecto Nuxt.js esté alojado en GitHub.
Configurar el despliegue:
En tu panel de Back4app, navega a la Web Deployment sección, vincula tu repositorio (por ejemplo, Basic-CRUD-App-Nuxt), y selecciona la rama apropiada.
Establecer instrucciones de construcción:
Define el comando de construcción (como npm run build) y especifica el directorio de salida.
Desplegar:
Haz clic en Desplegar y sigue los registros hasta que tu aplicación esté en vivo.
﻿
Paso 8 – Conclusión y pasos futuros
¡Gran trabajo! Ahora has construido una aplicación CRUD de Nuxt.js integrada con Back4app. 
Creaste un proyecto llamado Basic-CRUD-App-Nuxt, diseñaste colecciones para Artículos y Usuarios, y gestionaste tus datos a través de la aplicación de administración de Back4app. 
Además, conectaste tu aplicación de Nuxt.js a través de llamadas a la API REST e implementaste medidas de seguridad sólidas.
¿Qué sigue:
Expansión de Funciones:
Considera agregar funcionalidades como filtros de búsqueda avanzados, vistas detalladas de artículos o actualizaciones en tiempo real.
Mejoras en el Backend:
Investiga sobre funciones en la nube, integraciones con APIs externas o permisos basados en roles.
Aprendizaje Adicional:
Explora la documentación de Back4app y guías adicionales para optimizar aún más tu aplicación.
¡Feliz codificación y disfruta construyendo con Nuxt.js y Back4app!
Campo	Tipo	Descripción
_id	ObjectId	Identificador único generado por el sistema.
título	Cadena	Nombre del artículo.
descripción	Cadena	Descripción breve del artículo.
creadoEn	Fecha	Marca de tiempo que indica la creación del elemento.
actualizadoEn	Fecha	Marca de tiempo que indica la última actualización.
Campo	Tipo	Descripción
_id	ObjectId	Identificador único generado automáticamente.
nombre de usuario	Cadena	Nombre de usuario único para el usuario.
correo electrónico	Cadena	La dirección de correo electrónico única del usuario.
hashDeContraseña	Cadena	Contraseña hash para una autenticación segura.
creadoEn	Fecha	Marca de tiempo de creación de la cuenta.
actualizadoEn	Fecha	Marca de tiempo para modificaciones de cuenta.
How to Create a CRUD App with Gatsby?
Cómo crear una aplicación CRUD con Svelte?