Projeto relacionado: front-end

Tarefa: Você precisa criar uma IU para um back-end CRUD usando HTML, CSS, JS, jQuery. Faremos um painel de administração para gerenciar contas de jogos online.

1. Fork do repositório: https://github.com/CodeGymCC/project-frontend.git
2. Baixe sua versão do projeto para o seu computador.
3. Baixe o Tomcat para você: https://tomcat.apache.org/download-90.cgi .Importante: Tomcat precisa da versão 9 , não 10.
4. Configure a inicialização do aplicativo via Idea: Alt + Shift + F9 -> Editar configurações… -> Alt + inserir -> tom (na barra de pesquisa) -> Local.
• Depois disso, você precisa clicar CONFIGUREe indicar onde o arquivo com o Tomcat foi baixado e descompactado.
• Na guia Deployment: Alt + inserir -> Artefato… -> rpg:guerra explodida -> OK.
• No campo Application context: deixe apenas / (barra).
• Pressione APPLY.
• Feche a janela de configurações.
5. Inicie o aplicativo. Para fazer isso: Alt + Shift + F9 -> (nome da configuração, chamei de 'App') -> Executar.
6. Após a implantação do aplicativo, uma nova aba será aberta no navegador selecionado durante a configuração. Ótimo, o servidor está configurado, então você precisa trabalhar com dois arquivos:
• <project_dir>/src/main/webapp/html/my.html- haverá marcação e scripts.
• <project_dir>/src/main/webapp/css/my.css– aqui haverá estilos. Tudo sobre estilos depende de você, não há requisitos para eles.
7. Na marcação ( my.html ) adicione uma tabela (não se esqueça de dar um id) para especificar os nomes das colunas:
• #
• Nome
• Título
• Corrida
• profissão
• Nível
• Aniversário
• Banido
8. Adicione uma tag de par <script>- escreveremos funções aqui.
9. A primeira função deve enviar uma solicitação GET para a URL "/rest/players"- obter a lista. O resultado deve ser adicionado à tabela do parágrafo 7 (é aqui que o id da tabela é útil). Se você fez tudo corretamente, após reiniciar o servidor, uma tabela com 4 linhas será exibida em sua página. Na primeira linha - os nomes das colunas, no restante - os dados que vieram do servidor.
10. Agora, é desejável adicionar bordas de células à tabela, caso contrário, as informações geralmente ficarão ilegíveis.
11. Agora vamos passar para a paginação. Para isso você precisa:
• Abaixo da tabela, adicione uma seção, por exemplo, <div>na qual haverá botões de paginação.
• Adicione uma função que enviará uma solicitação GET ao servidor que retorna o número total de contas no servidor. URL: "/rest/players/count".
• Adicione uma lista suspensa para 3-4 valores numéricos, quantas contas mostrar por vez. Os números devem estar entre 3 e 20 inclusive.
• No método de visualização da lista de contas (pág. 9), adicionaremos o cálculo do número de páginas necessárias para um determinado número de contas por página, para que possa visualizar todas as contas.
12. Na função de mostrar a lista de contas, adicione um parâmetro que será responsável pelo número da página a ser mostrada. Corrija o URL para que passe "pageNumber" e "pageSize" como parâmetros de consulta . Agora, ao alterar o número por página na lista suspensa, o número de contas solicitado deve ser exibido:
13. Agora vamos pintar o número da página atual, senão é inconveniente ...
14. Vamos adicionar mais 2 colunas à tabela: Editar e Excluir. Para cada linha, vamos adicionar ícones que serão responsáveis ​​pela edição e exclusão de cada entrada. Você pode usar as imagens que estão em <project_dir>/src/main/webapp/img/, ou usar as suas próprias.
15. Escreva uma função que será responsável por deletar uma conta. Para fazer isso, envie uma solicitação DELETE ao servidor na URL "/rest/players/{id}". Ao clicar na imagem do carrinho, chame esta função. Após a chamada - não se esqueça de atualizar a lista de contas na página atual.
• Antes de deletar conta com id=23
• Depois de deletar a conta com id=23 . Preste atenção, nenhum botão, exceto o cesto, foi pressionado.
16. Agora escreva uma função que seja responsável por editar uma conta. Ao clicar nele, vamos ocultar o botão "Excluir" e alterar a imagem do botão "Editar" para "Salvar".
17. Agora vamos adicionar funcionalidade para editar uma conta. Ao clicar no botão “Editar”, além de alterar a imagem, você precisa tornar os campos editáveis:
• Nome
• Título
• Corrida
• profissão
• Banido

Observe que o valor nos campos de edição deve ser o mesmo que está na conta.

18. Agora enviaremos as alterações clicando no botão “Salvar”. Para isso, você precisa enviar uma requisição POST para a URL “/rest/players/{id}”e passar os valores de todos os cinco campos como corpo da requisição, que podem ser alterados na forma de JSON. Use JSON.stringify({...}); Após a alteração, não esqueça de recarregar os dados na página atual.
19. Então, tudo deve ser feito a partir do CRUD no momento, menos o “C” (Criar). Após os botões de paginação, adicione uma linha horizontal e um texto informando que você pode criar uma nova conta aqui. Além disso, adicione blocos de texto e campos de entrada para os parâmetros da conta:
• Nome - texto, de 1 a 12 caracteres.
• Título - texto, de 1 a 30 caracteres.
• Raça - lista suspensa, consulte a API para obter os valores válidos.
• Profissão - lista suspensa, consulte a API para obter os valores válidos.
• Nível é um número de 0 a 100.
• Aniversário - data (<input type="data" ...).
• Banido é um valor booleano.
20. Agora adicione um botão, ao clicar no qual todos os dados inseridos serão enviados para o servidor. Use uma solicitação POST para a URL /rest/players. Após a resposta do servidor, não se esqueça de limpar os campos de entrada de dados e solicitar novamente a lista de contas na página atual.
21. Agora você pode adicionar "beleza" por meio de estilos - tudo aqui depende de você. Eu consegui assim:

Útil: API do servidor:

Obter lista de jogadores

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álise de projetos . Assista após a conclusão!