Implementar a Função de Login do Usuário

Introdução

Neste projeto, você aprenderá como implementar uma função de login de usuário usando JavaScript e jQuery. Este projeto foi projetado para ajudá-lo a desenvolver habilidades essenciais de desenvolvimento front-end, particularmente na área de dinamização de dados.

👀 Pré-visualização

Os resultados bem-sucedidos são os seguintes:

Os efeitos de falha são os seguintes:

🎯 Tarefas

Neste projeto, você aprenderá:

• Como obter dados do usuário de um arquivo JSON usando a funcionalidade AJAX do jQuery
• Como validar o nome de usuário e a senha inseridos em relação aos dados do usuário
• Como exibir mensagens de sucesso ou falha apropriadas com base na tentativa de login

🏆 Conquistas

Após concluir este projeto, você será capaz de:

• Usar os métodos AJAX do jQuery para fazer requisições HTTP e lidar com as respostas
• Manipular o DOM usando jQuery para atualizar a interface do usuário com base no resultado do login
• Integrar a entrada do usuário com a função de login e lidar com o processo de login

Configurar a Estrutura do Projeto

Nesta etapa, você configurará os arquivos e a estrutura do projeto. Siga as etapas abaixo para concluir esta etapa:

Abra a pasta do projeto. A estrutura do diretório é a seguinte:

├── bootstrap.min.css ## Arquivo Bootstrap
├── index.html ## Página de login do usuário
├── jQuery-3.6.0.min.js ## Arquivo jQuery
├── userlist.json  ## Arquivo JSON
├── login.js   ## Código JavaScript para login do usuário
├── index.html ## Página de login do usuário

Clique no botão Go Live no canto inferior direito do WebIDE para executar o projeto.

Em seguida, abra "Web 8080" no topo da VM e atualize-o manualmente para ver a página.

Obter Dados do Usuário

Nesta etapa, você aprenderá como usar a função ajax do jQuery para obter dados do usuário do arquivo userlist.json.

1. Abra o arquivo login.js e localize a função login.
2. Dentro da função login, adicione o seguinte código para fazer uma requisição AJAX para o arquivo userlist.json:

function login(username, password) {
  // TODO
  $.ajax({
    method: "GET",
    url: "userlist.json",
    success: function (data) {
      // Os dados do usuário agora estão disponíveis no parâmetro 'data'
      console.log(data);
    }
  });
}

Este código fará uma requisição GET para o arquivo userlist.json.

Validar Login do Usuário

Nesta etapa, você aprenderá como comparar o nome de usuário e a senha inseridos com os dados do usuário obtidos da requisição AJAX.

1. Dentro da função de callback success da requisição AJAX, adicione o seguinte código para verificar se o nome de usuário e a senha inseridos correspondem a algum dos registros de usuário:

$.ajax({
  method: "GET",
  url: "userlist.json",
  success: function (data) {
    let judge = data.userlist.some((item) => {
      return item.username == username && item.password == password;
    });
    // ...
  }
});

Este código usa o método some para verificar se algum dos registros de usuário no array data.userlist corresponde ao nome de usuário e senha inseridos.

2. Após a chamada do método some, adicione o seguinte código para exibir a mensagem de sucesso ou falha apropriada:

$.ajax({
  method: "GET",
  url: "userlist.json",
  success: function (data) {
    // ...
    if (judge) {
      $("#tip1").removeClass("fade");
      $("#tip2").addClass("fade");
    } else {
      $("#tip2").removeClass("fade");
      $("#tip1").addClass("fade");
    }
  }
});

Este código usa jQuery para manipular a visibilidade dos elementos de mensagem de sucesso e falha na página.

Integrar a Função de Login

Nesta etapa final, você aprenderá como integrar a função de login com os elementos de entrada do usuário na página.

1. Dentro da função $(document).ready(), localize o manipulador de evento de clique para o botão "login":

$("#btnsubmit").click(function () {
  // TODO
});

2. Dentro do manipulador de evento de clique, adicione o seguinte código para obter os valores de nome de usuário e senha inseridos e chamar a função login:

$("#btnsubmit").click(function () {
  // TODO
  let username = $("#exampleInputUsername").val();
  let password = $("#exampleInputPassword").val();
  login(username, password);
});

Este código recupera os valores inseridos pelo usuário nos campos de entrada de nome de usuário e senha e, em seguida, chama a função login com esses valores.

3. Salve o arquivo login.js e atualize a página index.html no seu navegador. Tente inserir diferentes combinações de nome de usuário e senha e clique no botão login para ver as mensagens de sucesso e falha.

Os resultados de sucesso são os seguintes:

Os efeitos de falha são os seguintes:

Parabéns! Você concluiu a implementação da função de login do usuário.

Resumo

Parabéns! Você concluiu este projeto. Você pode praticar mais laboratórios no LabEx para aprimorar suas habilidades.