Proyecto relacionado: interfaz

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

Code: 200 OK
Code: 200 OK
Content: [
 {
  “id”:[Long],
  “name”:[String],
  “title”:[String],
  “race”:[Race],
  “profession”:[Profession],
  “birthday”:[Long],
  “banned”:[Boolean],
  “level”:[Integer]
 },
 …
]

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

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

{
  “name”:[String],       --optional
  “title”:[String],     --optional
  “race”:[Race], --optional
  “profession”:[Profession], --optional
  “banned”:[Boolean]    --optional
}

Code: 200 OK
Content: {
  “id”:[Long],
  “name”:[String],
  “title”:[String],
  “race”:[Race],
  “profession”:[Profession],
  “birthday”:[Long],
  “banned”:[Boolean],
  “level”:[Integer]
 }

{
  “name”:[String],
  “title”:[String],
  “race”:[Race],
  “profession”:[Profession],
  “birthday”:[Long],
  “banned”:[Boolean], --optional, default=false
  “level”:[Integer]
}

Code: 200 OK
Content: {
  “id”:[Long],
  “name”:[String],
  “title”:[String],
  “race”:[Race],
  “profession”:[Profession],
  “birthday”:[Long],
  “banned”:[Boolean],
  “level”:[Integer]
 },

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