Tarea: debe crear una interfaz de usuario para un backend CRUD usando HTML, CSS, JS, jQuery. Haremos un panel de administración para administrar cuentas de juegos en línea.

  1. Bifurcación del repositorio: https://github.com/CodeGymCC/project-frontend.git
  2. Descarga tu versión del proyecto a tu computadora.
  3. Descargue Tomcat usted mismo: https://tomcat.apache.org/download-90.cgi .Importante: Tomcat necesita la versión 9 , no la 10.
  4. Configure el inicio de la aplicación a través de Idea: Alt + Shift + F9 -> Editar configuraciones… -> Alt + insertar -> tom (en la barra de búsqueda) -> Local.
    • Después de eso, debe hacer clic CONFIGUREe indicar dónde se descargó y descomprimió el archivo con Tomcat.
    • En la pestaña Deployment: Alt + insertar -> Artefacto… -> rpg: guerra explotada -> Aceptar.
    • En el campo Application context: dejar solo / (barra inclinada).
    • Presiona APPLY.
    • Cierra la ventana de configuración.
  5. Iniciar la aplicacion. Para hacer esto: Alt + Shift + F9 -> (nombre de configuración, lo nombré 'Aplicación') -> Ejecutar.
  6. Después de implementar la aplicación, se abrirá una nueva pestaña en el navegador seleccionado durante la configuración. Genial, el servidor está configurado, entonces necesitas trabajar con dos archivos:
    • <project_dir>/src/main/webapp/html/my.html- habrá marcado y guiones.
    • <project_dir>/src/main/webapp/css/my.css– aquí habrá estilos. Todo lo relacionado con los estilos depende de ti, no hay requisitos para ellos.
  7. En el marcado ( my.html ) agregue una tabla (no olvide darle una identificación) en la que especificar los nombres de las columnas:
    • #
    • Nombre
    • Título
    • Carrera
    • profesión
    • Nivel
    • cumpleaños
    • Prohibido
  8. Agregue una etiqueta de par <script>: escribiremos funciones aquí.
  9. La primera función debe enviar una solicitud GET a la URL "/rest/players": obtenga la lista. El resultado debe agregarse a la tabla del párrafo 7 (aquí es donde la identificación de la tabla resultó útil). Si hizo todo correctamente, después de reiniciar el servidor, se mostrará una tabla con 4 líneas en su página. En la primera línea, los nombres de las columnas, en el resto, los datos que provienen del servidor.
  10. Ahora, es deseable agregar bordes de celda a la tabla, de lo contrario, la información generalmente es ilegible.
  11. Ahora pasemos a la paginación. Para esto necesitas:
    • Debajo de la tabla, agregue una sección, por ejemplo, <div>en la que habrá botones de paginación.
    • Agregue una función que envíe una solicitud GET al servidor que devuelva el número total de cuentas en el servidor. URL: "/rest/players/count".
    • Agregue una lista desplegable para 3-4 valores numéricos, cuántas cuentas mostrar a la vez. Los números deben estar entre 3 y 20 inclusive.
    • En el método para mostrar la lista de cuentas (p. 9), agregaremos el cálculo de la cantidad de páginas que se necesitan para una cantidad determinada de cuentas por página, para que pueda ver todas las cuentas.
  12. En la función de mostrar la lista de cuentas, agregue un parámetro que será el responsable del número de la página a mostrar. Corrija la URL para que pase "pageNumber" y "pageSize" como parámetros de consulta . Ahora, al cambiar el número por página en la lista desplegable, se debe mostrar el número de cuentas solicitado:
  13. Ahora maticemos el número de página actual, de lo contrario es un inconveniente ...
  14. Agreguemos 2 columnas más a la tabla: Editar y Eliminar. Para cada fila, agreguemos íconos que se encargarán de editar y eliminar cada entrada. Puede usar las imágenes que están en <project_dir>/src/main/webapp/img/, o usar las suyas propias.
  15. Escriba una función que se encargará de eliminar una cuenta. Para hacer esto, envíe una solicitud DELETE al servidor en la URL "/rest/players/{id}". Al hacer clic en la imagen del carrito, llame a esta función. Después de la llamada, no olvide actualizar la lista de cuentas en la página actual.
    • Antes de eliminar la cuenta con id=23
    • Después de eliminar la cuenta con id=23 . Preste atención, no se presionó ningún botón, excepto la canasta.
  16. Ahora escriba una función que se encargue de editar una cuenta. Cuando haga clic en él, ocultemos el botón "Eliminar" y cambiemos la imagen del botón "Editar" a "Guardar".
  17. Ahora agreguemos la funcionalidad para editar una cuenta. Al hacer clic en el botón "Editar", además de cambiar la imagen, debe hacer que los campos sean editables:
    • Nombre
    • Título
    • Carrera
    • profesión
    • Prohibido

    Tenga en cuenta que el valor en los campos de edición deben ser los que están en la cuenta.

  18. Ahora enviaremos los cambios haciendo clic en el botón “Guardar”. Para hacer esto, debe enviar una solicitud POST a la URL “/rest/players/{id}”y pasar los valores de los cinco campos como el cuerpo de la solicitud, que se puede cambiar en forma de JSON. Usa JSON.stringify({...}); Después del cambio, no olvide volver a cargar los datos en la página actual.
  19. Entonces, todo debe hacerse desde CRUD en este momento, excepto "C" (Crear). Después de los botones de paginación, agregue una línea horizontal y un texto que indique que puede crear una nueva cuenta aquí. Además, agregue bloques de texto y campos de entrada para los parámetros de la cuenta:
    • Nombre - texto, de 1 a 12 caracteres.
    • Título - texto, de 1 a 30 caracteres.
    • Raza: lista desplegable, consulte la API para conocer los valores válidos.
    • Profesión: lista desplegable, consulte la API para conocer los valores válidos.
    • El nivel es un número del 0 al 100.
    • Cumpleaños - fecha (<tipo de entrada="fecha" ...).
    • Prohibido es un valor booleano.
  20. Ahora agregue un botón, al hacer clic en el cual todos los datos ingresados ​​​​se enviarán al servidor. Utilice una solicitud POST a la URL /rest/players. Después de la respuesta del servidor, no olvide borrar los campos de entrada de datos y volver a solicitar la lista de cuentas en la página actual.
  21. Ahora puede agregar "belleza" a través de estilos: todo aquí depende de usted. Lo tengo así:

Útil: API del servidor:

Obtener lista de jugadores

URL /descanso/jugadores
método Opcional: Número de página entero, Tamaño de página entero
Parámetros de datos Ninguno
Respuesta de éxito
Code: 200 OK
Code: 200 OK
Content: [
 {
  “id”:[Long],
  “name”:[String],
  “title”:[String],
  “race”:[Race],
  “profession”:[Profession],
  “birthday”:[Long],
  “banned”:[Boolean],
  “level”:[Integer]
 },]
notas

pageNumber : un parámetro que es responsable del número de la página mostrada cuando se usa la paginación. La numeración comienza desde cero.

pageSize - un parámetro que es responsable de la cantidad de resultados en una página al paginar

public enum Race {
    HUMAN,
    DWARF,
    ELF,
    GIANT,
    ORC,
    TROLL,
    HOBBIT
}

public enum Profession {
    WARRIOR,
    ROGUE,
    SORCERER,
    CLERIC,
    PALADIN,
    NAZGUL,
    WARLOCK,
    DRUID
}

Haz que los jugadores cuenten

URL /descanso/jugadores/recuento
método CONSEGUIR
Parámetros de URL Ninguno
Parámetros de datos Ninguno
Respuesta de éxito

Código : 200 OK

Contenido : entero

notas

Eliminar jugador

URL /descanso/jugadores/{id}
método BORRAR
Parámetros de URL identificación
Parámetros de datos Ninguno
Respuesta de éxito Código : 200 OK
notas

Si no se encuentra el jugador, la respuesta es un error con el código 404.

Si el valor de id no es válido, la respuesta será un error con un código 400.

Actualizar jugador

URL /descanso/jugadores/{id}
método CORREO
Parámetros de URL identificación
Parámetros de datos
{
  “name”:[String],       --optional
  “title”:[String],     --optional
  “race”:[Race], --optional
  “profession”:[Profession], --optional
  “banned”:[Boolean]    --optional
}
Respuesta de éxito
Code: 200 OK
Content: {
  “id”:[Long],
  “name”:[String],
  “title”:[String],
  “race”:[Race],
  “profession”:[Profession],
  “birthday”:[Long],
  “banned”:[Boolean],
  “level”:[Integer]
 }
notas

Solo se actualizan los campos que no son nulos.

Si el jugador no se encuentra en la base de datos, la respuesta es un error con el código 404.

Si el valor de id no es válido, la respuesta es un error con un código 400.

Crear jugador

URL /descanso/jugadores
método CORREO
Parámetros de URL Ninguno
Parámetros de datos
{
  “name”:[String],
  “title”:[String],
  “race”:[Race],
  “profession”:[Profession],
  “birthday”:[Long],
  “banned”:[Boolean], --optional, default=false
  “level”:[Integer]
}
Respuesta de éxito
Code: 200 OK
Content: {
  “id”:[Long],
  “name”:[String],
  “title”:[String],
  “race”:[Race],
  “profession”:[Profession],
  “birthday”:[Long],
  “banned”:[Boolean],
  “level”:[Integer]
 },
notas

No podemos crear un jugador si:

  • no se especifican todos los parámetros de Data Params (excepto los prohibidos);
  • la longitud del valor del parámetro “nombre” o “título” excede el tamaño del campo correspondiente (12 y 30 caracteres);
  • el valor del parámetro "nombre" es una cadena vacía;
  • el nivel está fuera de los límites especificados (de 0 a 100);
  • cumpleaños:[Largo] < 0;
  • fecha de registro están fuera de los límites especificados.

En el caso de todo lo anterior, la respuesta es un error con un código 400.


Análisis de proyectos . Ver después de la finalización!