Get best of the week

Perpustakaan Webix JavaScript melalui mata seorang pemula. Bagian 6. Interaksi server



Saya adalah pengembang front-end pemula. Sekarang saya belajar dan berlatih di perusahaan IT Minsk. Mempelajari dasar-dasar web-ui terjadi menggunakan perpustakaan Webix JS sebagai contoh. Saya ingin berbagi pengalaman sederhana saya dan menyimpannya sebagai tutorial kecil di perpustakaan UI yang menarik ini.

MASALAH KEENAM


Webix adalah pustaka JavaScript tempat operasi terutama terjadi di sisi klien, dan hanya setelah itu hasilnya dikirim ke server jika data perlu disimpan. Tidak ada persyaratan ketat untuk backend di sini. Tidak masalah dengan data apa yang diproses di server, yang terpenting adalah menerima permintaan format tertentu dan memberikan jawaban dalam bentuk yang benar. Semua yang diperlukan dari pengembang adalah untuk menghubungkan server dan bekerja dengan permintaan sederhana, mengingat fakta bahwa proyek tidak memiliki pengaturan pengguna yang kompleks.

Pertimbangkan tugas-tugas berikut:

  • menghubungkan sisi server dari aplikasi;
  • metode permintaan server;
  • cara melacak hasil unduhan;
  • Cara melacak hasil penghematan.

Artikel ini menggunakan widget Tabel , yang dijelaskan secara rinci dalam dokumentasi.

Sumber untuk bekerja dengan artikel ada di sini .

Aplikasi yang sudah selesai dapat ditemukan di sini .

Menghubungkan sisi server dari aplikasi


Ini adalah contoh berdasarkan widget Table. Struktur sumber sekarang telah mengubah struktur aplikasi. Sebelumnya, itu adalah file index.html biasa dengan file js yang terhubung dengannya. Sekarang dua folder telah ditambahkan - backend, dengan skrip server sederhana pada nodeJS dan folder aplikasi, di mana semua kode klien tertulis berada. Operasi server untuk setiap widget dijelaskan dalam file terpisah. Untuk widget Table, ini adalah file films.js.
Kode untuk widget Tabel terletak di file table.js dari folder aplikasi dan diberikan di tab "Dashboard".
Pertama, jalankan aplikasi di server lokal.

Buka baris perintah untuk folder dengan aplikasi dan secara berurutan masukkan perintah berikut:
npm instal
npm run server
Setelah itu, entri berikut akan muncul di terminal:
Server berjalan pada port 3000 ...
Buka localhost : 3000 / aplikasi di browser
Alamat / tautan yang ditentukan dibuka di browser.

Skrip server yang akan diakses widget Tabel akan mendukung semua operasi crud dasar.

Untuk memuat data ke dalam tabel, tentukan path ke skrip di properti url-nya.

url: "/samples/server/films"

Untuk mengirim permintaan simpan - jalur ke skrip ditentukan dalam properti simpan. Path akan sama dengan di url, hanya dengan awalan lainnya. Kami akan berbicara tentang istirahat di bawah ini.

save:"rest->/samples/server/films"


Metode kueri menentukan apa yang ingin kita lakukan dengan sumber daya. Secara default, Webix menggunakan metode GET dan POST, tetapi kami akan menggunakan API RESTful dan semua metode yang cocok untuk operasi data kami: GET, POST, PUT dan DELETE.

Dengan sisa awalan yang sudah diatur dalam pengaturan save, semua permintaan akan dikirim melalui siap pakai yang sesuai Proxy . Proxy sisanya mengoordinasikan metode permintaan dengan jenis operasi yang kami lakukan pada klien. Ada beberapa proksi siap pakai untuk tugas tertentu, jika perlu, Anda dapat membuat proksi khusus.

Kami akan melacak permintaan menggunakan contoh widget Table. Untuk melakukan ini, di browser, buka DevTools-> Network dan temukan informasi tentang permintaan yang diinginkan.

Untuk memuat data ke dalam tabel, gunakanDAPATKAN metode .

Kami akan menyegarkan halaman dan mengklik permintaan skrip films.

Secara default, tidak akan ada parameter dalam permintaan ini, karena kami berurusan dengan pemuatan data pertama ke dalam komponen.

Akibatnya, server mengembalikan array JSON dengan semua data.

Hasil permintaan GET: Metode POST



digunakan untuk membuat catatan baru di tabel . Menggunakan formulir, tambahkan data baru ke tabel. Data permintaan akan menjadi data berikut: Saat menambahkan catatan ke server, id yang ditugaskan di sana pasti datang:









{ "id":"ImurRuK1k59qzy2f" }

Ini diperlukan agar tidak kehilangan koneksi antara data di server / klien. Id yang sama sekarang akan digunakan pada klien.

Untuk mengubah data dalam baris, metode PUT digunakan .

Kami memilih baris pertama dalam tabel - data darinya akan muncul dalam formulir. Maka kita akan mengubahnya dan menyimpannya. Seluruh catatan (objek data) akan masuk ke server bersama dengan perubahan kami.



Respons server tidak boleh berisi status tertentu (objek kosong juga bisa menjadi jawabannya, seperti yang akan ditunjukkan di bawah), tetapi dalam kasus kami server akan mengembalikan JSON berikut:

{ status: “updated” }

Untuk menghapus data, gunakan metode DELETE .

Hapus baris pertama dengan mengklik tanda silang.

Dalam hal ini, seluruh string akan menjadi parameter yang dikirimkan ke server. Hal utama dalam parameter adalah id dari catatan yang akan dihapus di server.



Server akan mengembalikan objek kosong, karena tidak diperlukan konfirmasi khusus untuk operasi semacam itu.

Lacak hasil unduhan


Pertimbangkan situasi di mana kita perlu menghitung berapa banyak catatan yang telah dimuat ke dalam tabel dan menampilkan ini sebagai pesan. Untuk melakukan ini, gunakan penangan siap .

Handler yang siap dipanggil segera setelah data pertama tiba di komponen dan hanya sekali. Di dalam handler, kami menempatkan fungsi webix.message()memanggil metode penghitungan . Setelah memanggilnya, sebuah pesan akan muncul di sudut kanan atas layar “Loaded 250 records!”.

const table = {
// code the widget Table
    ready(){
        webix.message({
            text:`Loaded ${this.count()} records!`, 
            type:"success"
        });
    }
}

Momen pemuatan data:



Jika terjadi kesalahan selama pemuatan data, acara onLoadError akan diaktifkan :

$$("datatable").attachEvent("onLoadError", function(xhr){
    webix.message("Error!");
});

Pelacakan Simpan Hasil


Anda bisa mendapatkan respons server saat menyimpan dengan operasi seperti menambah, mengedit, dan menghapus. Perhatikan contoh widget Table.

Untuk ini, modul DataProcessor digunakan untuk berinteraksi dengan server. API modul ini dapat digunakan untuk menyempurnakan penyimpanan data. Kita hanya perlu melacak momen penghematan - oleh karena itu kita menggunakan salah satu acara - onAfterSync .

Modul DataProcessor diakses oleh pengaturan tersebut.Operasi webix.dp(id)

onAfterSync dinaikkan ketika respons dari server diterima dan diproses. Untuk acara ini, tampilkan pesan melalui webix.message(). Setelah menyimpan, pesan - akan muncul di sudut kanan atas “Saved!”.

Kami menghapus baris pertama dalam tabel dan melihat hasilnya.



Kode peristiwa dalam file script.js setelah inisialisasi webix:

let dp = webix.dp($$("film_list"));
dp.attachEvent('onAfterSync', () => {
    webix.message({
        text:"Saved!",
        type:"success"
    })
});

Kesalahan dalam kasus ini dapat ditangkap dengan acara onAfterSaveError :

dp.attachEvent("onAfterSaveError", function(id, status, response, details){
    webix.message("Error!");
});

Generalisasi


Menggunakan operasi CRUD, kami menemukan cara berinteraksi dengan sisi server aplikasi. Kami memeriksa serangkaian metode kueri standar dan cara menangkap pemuatan dan penyimpanan data. Contoh-contoh yang dibahas dalam artikel tersedia tidak hanya untuk widget Tabel, tetapi juga untuk Daftar. Anda dapat mencobanya sendiri dalam kode sumber yang ditunjukkan di awal.

Kode aplikasi yang sudah selesai dapat ditemukan di sini .

More articles:


All Articles