Sou desenvolvedor iniciante em front-end. Agora estou estudando e treinando em uma empresa de TI em Minsk. O aprendizado do básico do web-ui ocorre usando a biblioteca JS Webix como exemplo. Quero compartilhar minha modesta experiência e salvá-la como um pequeno tutorial nesta interessante biblioteca de interface do usuário.SEXTO PROBLEMA
O Webix é uma biblioteca JavaScript na qual as operações ocorrem principalmente no lado do cliente e somente então o resultado é enviado ao servidor se os dados precisam ser salvos. Não há requisitos estritos para o back-end aqui. Não importa quais dados são processados no servidor, o principal é que ele aceita solicitações de um determinado formato e fornece a resposta da forma correta. Tudo o que é necessário para o desenvolvedor é conectar o servidor e trabalhar com solicitações simples, considerando que o projeto não possui configurações complexas do usuário.Considere as seguintes tarefas:- conectando o lado do servidor do aplicativo;
- métodos de solicitação do servidor;
- como rastrear o resultado do download;
- Como acompanhar o resultado da economia.
O artigo usa o widget Tabela , descrito em detalhes na documentação.As fontes para trabalhar com o artigo estão localizadas aqui .O aplicativo finalizado pode ser encontrado aqui .Conectando o lado do servidor do aplicativo
Aqui está um exemplo baseado no widget Tabela. A estrutura de origem agora mudou a estrutura do aplicativo. Anteriormente, era um arquivo index.html comum com arquivos js conectados a ele. Agora, duas pastas foram adicionadas - o back-end, com um script de servidor simples no nodeJS e a pasta do aplicativo, onde está todo o código do cliente escrito. As operações do servidor para cada widget são descritas em arquivos separados. Para o widget Tabela, este é o arquivo films.js.O código para o widget Tabela está localizado no arquivo table.js da pasta do aplicativo e renderizado na guia "Painel".
Primeiro, execute o aplicativo no servidor local.Abra a linha de comandos para a pasta com o aplicativo e insira sequencialmente os seguintes comandos:npm install
npm run server
Depois disso, a seguinte entrada aparecerá no terminal:O servidor está sendo executado na porta 3000 ...
Abra o host local : 3000 / app no navegador
O endereço / link especificado é aberto no navegador.O script do servidor que o widget Tabela acessará suportará todas as operações básicas de crud.Para carregar dados em uma tabela, especifique o caminho para o script em sua propriedade url.url: "/samples/server/films"
Para enviar solicitações de salvamento - o caminho para o script é especificado na propriedade salvar. O caminho será o mesmo que no url, apenas com o prefixo restante. Falaremos sobre descanso abaixo.save:"rest->/samples/server/films"
Os métodos de consulta determinam o que queremos fazer com o recurso. Por padrão, o Webix usa os métodos GET e POST, mas usaremos a API RESTful e todos os métodos adequados para nossas operações de dados: GET, POST, PUT e DELETE.Com o prefixo restante já definido na configuração de salvamento, todas as solicitações serão enviadas através do proxy pronto correspondente . O proxy restante coordena o método de solicitação com o tipo de operação que realizamos no cliente. Existem vários proxies prontos para determinadas tarefas; se necessário, você pode criar proxies personalizados.Nós rastrearemos solicitações usando o exemplo do widget Tabela. Para fazer isso, no navegador, vá para DevTools-> Rede e encontre informações sobre a solicitação desejada.Para carregar dados em uma tabela, useMétodo GET .Atualizaremos a página e clicaremos na solicitação de script films.Por padrão, não haverá parâmetros nessa solicitação, pois estamos lidando com o primeiro carregamento de dados no componente.Como resultado, o servidor retorna uma matriz JSON com todos os dados.Resultado de uma solicitação GET:
O método POST é usado para criar um novo registro na tabela .Usando o formulário, adicione novos dados à tabela.Os dados da solicitação serão os seguintes:
Ao adicionar um registro ao servidor, o ID atribuído lá deve definitivamente vir:{ "id":"ImurRuK1k59qzy2f" }
Isso é necessário para não perder a conexão entre os dados no servidor / cliente. O mesmo ID agora será usado no cliente.Para alterar os dados nas linhas, o método PUT é usado .Selecionamos a primeira linha da tabela - os dados dela aparecerão no formulário. Então vamos alterá-los e salvar. O registro inteiro (objeto de dados) irá para o servidor junto com nossas alterações.
A resposta do servidor não deve conter um status específico (um objeto vazio também pode ser a resposta, como será mostrado abaixo), mas, no nosso caso, o servidor retornará o seguinte JSON:{ status: “updated” }
Para excluir dados, use o método DELETE .Exclua a primeira linha clicando na cruz.Nesse caso, a sequência inteira será os parâmetros transmitidos para o servidor. O principal nos parâmetros é o ID do registro a ser excluído no servidor.
O servidor retornará um objeto vazio, pois não é necessária confirmação especial de tal operação.Acompanhar o resultado do download
Considere uma situação em que precisamos calcular quantos registros foram carregados em uma tabela e exibi-los como uma mensagem. Para fazer isso, use o manipulador pronto .O manipulador pronto é chamado imediatamente após os primeiros dados chegarem no componente e apenas uma vez. Dentro do manipulador, colocamos a função que webix.message()chama o método count . Após chamá-lo, uma mensagem aparecerá no canto superior direito da tela “Loaded 250 records!”.const table = {
ready(){
webix.message({
text:`Loaded ${this.count()} records!`,
type:"success"
});
}
}
Momento de carregamento de dados:
no caso de ocorrer algum erro durante o carregamento de dados, o evento onLoadError será acionado :$$("datatable").attachEvent("onLoadError", function(xhr){
webix.message("Error!");
});
Acompanhamento Salvar resultados
Você pode obter a resposta do servidor ao salvar por operações como adicionar, editar e excluir. Considere o exemplo do widget Tabela.Para isso, o módulo DataProcessor é usado para interagir com o servidor. A API deste módulo pode ser usada para ajustar o armazenamento de dados. Só precisamos rastrear o momento da economia - portanto, usamos um de seus eventos - onAfterSync .O módulo DataProcessor é acessado pela configuração.O webix.dp(id)evento onAfterSync é gerado quando a resposta do servidor é recebida e processada. Para este evento, exiba uma mensagem webix.message(). Após salvar, a mensagem - aparecerá no canto superior direito “Saved!”.Excluímos a primeira linha da tabela e olhamos para o resultado.
Código de evento no arquivo script.js após a inicialização do webix:let dp = webix.dp($$("film_list"));
dp.attachEvent('onAfterSync', () => {
webix.message({
text:"Saved!",
type:"success"
})
});
Nesse caso, os erros podem ser detectados com o evento onAfterSaveError :dp.attachEvent("onAfterSaveError", function(id, status, response, details){
webix.message("Error!");
});
Generalização
Usando operações CRUD, descobrimos como interagir com o lado do servidor do aplicativo. Examinamos um conjunto padrão de métodos de consulta e como capturar o carregamento e o salvamento de dados. Os exemplos discutidos no artigo estão disponíveis não apenas para o widget Tabela, mas também para Lista. Você pode experimentá-lo nos códigos-fonte indicados no início.O código do aplicativo finalizado pode ser encontrado aqui .