Scribd
Cargar
27 vistas6 páginas

CRUD en Java 21 con Spring Boot y jQuery

Este tutorial enseña a desarrollar una aplicación CRUD utilizando Java 21 con Spring Boot, Hibernate y jQuery, con MySQL como base de datos. Se detallan los prerrequisitos, la creación de la base de datos, la configuración del proyecto, y la implementación del backend y frontend. Al final, se instruye sobre cómo ejecutar el proyecto y se sugiere repetir el proceso con una tabla de permisos.

Cargado por

Genaro Ayala
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
27 vistas6 páginas

CRUD en Java 21 con Spring Boot y jQuery

Este tutorial enseña a desarrollar una aplicación CRUD utilizando Java 21 con Spring Boot, Hibernate y jQuery, con MySQL como base de datos. Se detallan los prerrequisitos, la creación de la base de datos, la configuración del proyecto, y la implementación del backend y frontend. Al final, se instruye sobre cómo ejecutar el proyecto y se sugiere repetir el proceso con una tabla de permisos.

Cargado por

Genaro Ayala
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd

Tutorial: CRUD en Java 21 con Spring Boot, Hibernate y jQuery

1. Introducción

En este tutorial, aprenderás a desarrollar una aplicación CRUD u lizando:

 Backend: Java 21 con Spring Boot y Hibernate.

 Base de datos: MySQL.

 Frontend: HTML, jQuery y JavaScript.

2. Prerrequisitos

Antes de comenzar, asegúrate de tener instalados:

 JDK 21

 Spring Boot

 MySQL

 Maven

 Eclipse

3. Creación de la base de datos

Ejecuta el siguiente script en MySQL para crear la tabla demo:

4. Configuración del proyecto Spring Boot

Crea un nuevo proyecto Spring Boot en Spring Ini alizr con las siguientes dependencias:

 Spring Web

 Spring Data JPA

 MySQL Driver
Configuración en applica [Link] es:

5. Creación de la en dad Hibernate

Crea la clase [Link] en el paquete [Link]:


6. Creación del repositorio JPA

Crea la interfaz [Link] en [Link]:

7. Creación del controlador REST

Crea [Link] en [Link]:


8. Creación del frontend con jQuery

Crea un archivo [Link]:

<!DOCTYPE html>

<html lang="es">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, ini al-scale=1.0">

< tle>CRUD Usuarios</ tle>

<script src="h ps://[Link]/[Link]"></script>

</head>

<body>

<h2>Usuarios</h2>

<input type="text" id="nombre" placeholder="Nombre">

<input type="text" id="email" placeholder="Email">

<bu on onclick="crearUsuario()">Crear</bu on>

<ul id="listaUsuarios"></ul>

<script>

func on cargarUsuarios() {

$.get("h p://localhost:8080/usuarios", func on(data) {

let lista = "";

[Link](usuario => {

lista += `<li>${[Link]} - ${[Link]} <bu on


onclick="eliminarUsuario(${[Link]})">Eliminar</bu on></li>`;

});

$("#listaUsuarios").html(lista);

});
}

func on crearUsuario() {

let usuario = {

nombre: $("#nombre").val(),

email: $("#email").val()

};

$.post("h p://localhost:8080/usuarios", [Link](usuario), func on() {

cargarUsuarios();

}, "json");

func on eliminarUsuario(id) {

$.ajax({

url: `h p://localhost:8080/usuarios/${id}`,

type: "DELETE",

success: func on() {

cargarUsuarios();

});

$(document).ready(func on() {

cargarUsuarios();

});

</script>

</body>

</html>
9. Ejecución del Proyecto

1. Inicia MySQL.

2. Ejecuta mvn spring-boot:run en la terminal.

3. Abre [Link] en el navegador y prueba las funciones CRUD.

10. Repe r este proceso ahora con una tabla permisos con los siguientes campos

Id (int) , id_usuario (int), permiso varchar(100), po_permiso (int)

También podría gustarte