Soy un desarrollador front-end principiante. Ahora estoy estudiando y entrenando en una empresa de TI de Minsk. Aprender los conceptos básicos de web-ui se lleva a cabo utilizando la biblioteca Webix JS como ejemplo. Quiero compartir mi modesta experiencia y guardarla como un pequeño tutorial sobre esta interesante biblioteca de interfaz de usuario.SEXTO PROBLEMA
Webix es una biblioteca de JavaScript en la que las operaciones ocurren principalmente en el lado del cliente, y solo entonces el resultado se envía al servidor si es necesario guardar los datos. No hay requisitos estrictos para el backend aquí. No importa con qué datos se procesen en el servidor, lo principal es que recibe solicitudes de cierto formato y da la respuesta en la forma correcta. Todo lo que se requiere del desarrollador es conectar el servidor y trabajar con consultas simples, dado que el proyecto no tiene configuraciones de usuario complejas.Considere las siguientes tareas:- conectar el lado del servidor de la aplicación;
- métodos de solicitud del servidor;
- cómo rastrear el resultado de la descarga;
- Cómo rastrear el resultado del ahorro.
El artículo utiliza el widget Tabla , que se describe en detalle en la documentación.Las fuentes para trabajar con el artículo se encuentran aquí .La aplicación terminada se puede encontrar aquí .Conectar el lado del servidor de la aplicación
Aquí hay un ejemplo basado en el widget Tabla. La estructura fuente ahora ha cambiado la estructura de la aplicación. Anteriormente, era un archivo index.html ordinario con archivos js conectados a él. Ahora se han agregado dos carpetas: el backend, con un script de servidor simple en nodeJS y la carpeta de la aplicación, donde se encuentra todo el código escrito del cliente. Las operaciones del servidor para cada widget se describen en archivos separados. Para el widget Tabla, este es el archivo films.js.El código para el widget Table se encuentra en el archivo table.js de la carpeta de la aplicación y se representa en la pestaña "Panel".
Primero, ejecute la aplicación en el servidor local.Abra la línea de comando para la carpeta con la aplicación e ingrese secuencialmente los siguientes comandos:npm instalar
npm ejecutar servidor
Después de eso, aparecerá la siguiente entrada en la terminal:El servidor se está ejecutando en el puerto 3000 ...
Abra localhost : 3000 / app en el navegador
La dirección / enlace especificado se abre en el navegador.El script del servidor al que accederá el widget Table soportará todas las operaciones básicas de crud.Para cargar datos en una tabla, especifique la ruta al script en su propiedad url.url: "/samples/server/films"
Para enviar solicitudes de guardado : la ruta al script se especifica en la propiedad de guardar. La ruta será la misma que en url, solo que con el prefijo resto. Hablaremos de descanso a continuación.save:"rest->/samples/server/films"
Los métodos de consulta determinan lo que queremos hacer con el recurso. Por defecto, Webix usa los métodos GET y POST, pero usaremos la API RESTful y todos los métodos adecuados para nuestras operaciones de datos: GET, POST, PUT y DELETE.Con el prefijo de resto que ya está configurado en la configuración de guardar, todas las solicitudes se enviarán a través del proxy ya preparado . El proxy restante coordina el método de solicitud con el tipo de operación que realizamos en el cliente. Hay varios servidores proxy listos para ciertas tareas; si es necesario, puede crear servidores proxy personalizados.Realizaremos un seguimiento de las solicitudes utilizando el ejemplo del widget Tabla. Para hacer esto, en el navegador, vaya a DevTools-> Network y encuentre información sobre la solicitud deseada.Para cargar datos en una tabla, useOBTENER método .Actualizaremos la página y haremos clic en la solicitud de script films.Por defecto, no habrá parámetros en esta solicitud, ya que estamos tratando con la primera carga de datos en el componente.Como resultado, el servidor devuelve una matriz JSON con todos los datos.Resultado de una solicitud GET:
el método POST se utiliza para crear un nuevo registro en la tabla .Usando el formulario, agregue nuevos datos a la tabla.Los datos de la solicitud serán los siguientes:
Al agregar un registro al servidor, la identificación asignada allí definitivamente debe venir:{ "id":"ImurRuK1k59qzy2f" }
Esto es necesario para no perder la conexión entre los datos en el servidor / cliente. La misma identificación ahora se utilizará en el cliente.Para cambiar los datos en las filas, se utiliza el método PUT .Seleccionamos la primera fila de la tabla; los datos de esta aparecerán en el formulario. Luego los cambiaremos y guardaremos. El registro completo (objeto de datos) irá al servidor junto con nuestros cambios.
La respuesta del servidor no debe contener un estado específico (un objeto vacío también puede ser la respuesta, como se mostrará a continuación), pero en nuestro caso el servidor devolverá el siguiente JSON:{ status: “updated” }
Para eliminar datos, use el método DELETE .Elimine la primera línea haciendo clic en la cruz.En este caso, toda la cadena serán los parámetros transmitidos al servidor. Lo principal en los parámetros es la identificación del registro que se eliminará en el servidor.
El servidor devolverá un objeto vacío, ya que no es necesaria una confirmación especial de dicha operación.Seguimiento del resultado de descarga
Considere una situación en la que necesitamos calcular cuántos registros se han cargado en una tabla y mostrar esto como un mensaje. Para hacer esto, use el controlador listo .Se llama al controlador listo inmediatamente después de que los primeros datos hayan llegado al componente y solo una vez. Dentro del controlador, colocamos la función que webix.message()llama al método de conteo . Después de llamarlo, aparecerá un mensaje en la esquina superior derecha de la pantalla “Loaded 250 records!”.const table = {
ready(){
webix.message({
text:`Loaded ${this.count()} records!`,
type:"success"
});
}
}
Momento de carga de datos:
en caso de que ocurra algún error durante la carga de datos, se activará el evento onLoadError :$$("datatable").attachEvent("onLoadError", function(xhr){
webix.message("Error!");
});
Seguimiento Guardar resultados
Puede obtener la respuesta del servidor al guardar mediante operaciones como agregar, editar y eliminar. Considere el ejemplo del widget Tabla.Para esto, el módulo DataProcessor se utiliza para interactuar con el servidor. La API de este módulo se puede usar para ajustar el almacenamiento de datos. Solo necesitamos rastrear el momento de guardar, por lo tanto, usamos uno de sus eventos, en AfterAync .La configuración accede al módulo DataProcessor. webix.dp(id)El evento onAfterSync se genera cuando se recibe y procesa la respuesta del servidor. Para este evento, muestre un mensaje a través de webix.message(). Después de guardar, el mensaje aparecerá en la esquina superior derecha “Saved!”.Eliminamos la primera fila de la tabla y miramos el resultado.
Código de evento en el archivo script.js después de la inicialización de webix:let dp = webix.dp($$("film_list"));
dp.attachEvent('onAfterSync', () => {
webix.message({
text:"Saved!",
type:"success"
})
});
Los errores en este caso pueden detectarse con el evento onAfterSaveError :dp.attachEvent("onAfterSaveError", function(id, status, response, details){
webix.message("Error!");
});
Generalización
Usando operaciones CRUD, descubrimos cómo interactuar con el lado del servidor de la aplicación. Examinamos un conjunto estándar de métodos de consulta y cómo capturar la carga y el almacenamiento de datos. Los ejemplos discutidos en el artículo están disponibles no solo para el widget Tabla, sino también para Lista. Puede probarlo usted mismo en los códigos fuente indicados al principio.El código de la aplicación terminada se puede encontrar aquí .