Tugas: Anda perlu membuat UI untuk bahagian belakang CRUD menggunakan HTML, CSS, JS, jQuery. Kami akan membuat panel pentadbir untuk menguruskan akaun permainan dalam talian.
- Fork dari repositori: https://github.com/CodeGymCC/project-frontend.git
- Muat turun versi projek anda ke komputer anda.
- Muat turun Tomcat untuk diri sendiri: https://tomcat.apache.org/download-90.cgi .Penting: Tomcat memerlukan versi 9 , bukan 10.
- Konfigurasikan pelancaran aplikasi melalui Idea: Alt + Shift + F9 -> Edit Konfigurasi... -> Alt + masukkan -> tom (dalam bar carian) -> Setempat.
- Selepas itu, anda perlu mengklik
CONFIGURE
dan menunjukkan tempat arkib dengan Tomcat telah dimuat turun dan dibongkar. - Dalam tab
Deployment
: Alt + insert -> Artifact… -> rpg:war meletup -> OK. - Di padang
Application context
: biarkan sahaja/
(slash ke hadapan). - Tekan
APPLY
. - Tutup tetingkap tetapan.
- Lancarkan aplikasi. Untuk melakukan ini: Alt + Shift + F9 -> (nama konfigurasi, saya menamakannya 'App') -> Jalankan.
- Selepas menggunakan aplikasi, tab baharu akan dibuka dalam penyemak imbas yang dipilih semasa konfigurasi. Hebat, pelayan dikonfigurasikan, maka anda perlu bekerja dengan dua fail:
<project_dir>/src/main/webapp/html/my.html
- akan ada markup dan skrip.<project_dir>/src/main/webapp/css/my.css
– di sini akan menjadi gaya. Segala-galanya tentang gaya terpulang kepada anda, tiada keperluan untuk mereka.- Dalam markup ( my.html ) tambahkan jadual (jangan lupa berikan id) untuk menentukan nama lajur:
- #
- Nama
- Tajuk
- Perlumbaan
- profesion
- Tahap
- hari jadi
- diharamkan
- Tambah tag pasangan
<script>
- kami akan menulis fungsi di sini. - Fungsi pertama harus menghantar permintaan GET ke URL
"/rest/players"
- dapatkan senarai. Hasilnya mesti ditambahkan pada jadual dari perenggan 7 (di sinilah id jadual berguna). Jika anda melakukan semuanya dengan betul, selepas memulakan semula pelayan, jadual dengan 4 baris akan dipaparkan pada halaman anda. Dalam baris pertama - nama lajur, dalam selebihnya - data yang datang dari pelayan. - Sekarang, adalah wajar untuk menambah sempadan sel pada jadual, jika tidak, maklumat itu secara amnya tidak boleh dibaca.
- Sekarang mari kita beralih ke paging. Untuk ini anda perlukan:
- Di bawah jadual, tambahkan bahagian, sebagai contoh,
<div>
yang akan terdapat butang paging. - Tambah fungsi yang akan menghantar permintaan GET ke pelayan yang mengembalikan jumlah bilangan akaun pada pelayan. URL:
"/rest/players/count"
. - Tambahkan senarai juntai bawah untuk 3-4 nilai berangka, bilangan akaun untuk ditunjukkan pada satu masa. Nombor mestilah antara 3 dan 20 termasuk.
- Dalam kaedah untuk memaparkan senarai akaun (ms 9), kami akan menambah pengiraan bilangan halaman yang diperlukan untuk bilangan akaun setiap halaman tertentu, supaya anda boleh melihat semua akaun.
- Dalam fungsi menunjukkan senarai akaun, tambahkan parameter yang akan bertanggungjawab untuk nombor halaman yang akan ditunjukkan. Betulkan URL supaya ia melepasi "pageNumber" dan "pageSize" sebagai parameter pertanyaan . Sekarang, apabila menukar nombor setiap halaman dalam senarai juntai bawah, bilangan akaun yang diminta harus dipaparkan:
- Sekarang mari kita warnakan nombor halaman semasa, jika tidak, ia menyusahkan ...
- Mari tambah 2 lagi lajur pada jadual: Edit dan Padam. Untuk setiap baris, mari tambah ikon yang akan bertanggungjawab untuk mengedit dan memadam setiap entri. Anda boleh menggunakan sama ada gambar yang ada dalam
<project_dir>/src/main/webapp/img/
, atau menggunakan gambar anda sendiri. - Tulis fungsi yang akan bertanggungjawab untuk memadamkan akaun. Untuk melakukan ini, hantar permintaan DELETE ke pelayan di URL
"/rest/players/{id}"
. Apabila mengklik pada imej troli, panggil fungsi ini. Selepas panggilan - jangan lupa untuk mengemas kini senarai akaun pada halaman semasa. - Sebelum memadam akaun dengan id=23
- Selepas memadam akaun dengan id=23 . Beri perhatian, tiada butang, kecuali bakul, ditekan.
- Sekarang tulis fungsi yang bertanggungjawab untuk mengedit akaun. Apabila anda mengklik padanya, mari kita sembunyikan butang "Padam", dan tukar gambar butang "Edit" kepada "Simpan".
- Sekarang mari tambah fungsi untuk mengedit akaun. Dengan mengklik pada butang "Edit", selain menukar gambar, anda perlu membuat medan boleh diedit:
- Nama
- Tajuk
- Perlumbaan
- profesion
- diharamkan
- Sekarang kami akan menghantar perubahan dengan mengklik pada butang "Simpan". Untuk melakukan ini, anda perlu menghantar permintaan POST ke URL
“/rest/players/{id}”
dan lulus nilai semua lima medan sebagai badan permintaan, yang boleh diubah dalam bentuk JSON. Gunakan JSON.stringify({...}); Selepas perubahan, jangan lupa untuk memuatkan semula data pada halaman semasa. - Jadi, segala-galanya harus dilakukan dari CRUD pada masa ini, kecuali "C" (Buat). Selepas butang paging, tambahkan garis mendatar dan teks yang menyatakan bahawa anda boleh membuat akaun baharu di sini. Selain itu, tambahkan blok teks dan medan input untuk parameter akaun:
- Nama - teks, dari 1 hingga 12 aksara.
- Tajuk - teks, dari 1 hingga 30 aksara.
- Perlumbaan - senarai juntai bawah, lihat API untuk nilai yang sah.
- Profesion - senarai juntai bawah, lihat API untuk nilai yang sah.
- Tahap ialah nombor dari 0 hingga 100.
- Hari lahir - tarikh (<input type="date" ...).
- Diharamkan ialah nilai boolean.
- Sekarang tambah butang, pada klik di mana semua data yang dimasukkan akan dihantar ke pelayan. Gunakan permintaan POST ke URL
/rest/players
. Selepas respons pelayan, jangan lupa untuk mengosongkan medan kemasukan data dan minta semula senarai akaun pada halaman semasa. - Kini anda boleh menambah "kecantikan" melalui gaya - segala-galanya di sini terpulang kepada anda. Saya mendapatnya seperti ini:
Sila ambil perhatian bahawa nilai dalam medan edit mestilah nilai yang ada dalam akaun.
Berguna: API Pelayan:
Dapatkan senarai pemain
URL | /rehat/pemain |
kaedah | Pilihan: Nombor halaman Integer, Saiz halaman Integer |
Param Data | tiada |
Respons Kejayaan |
|
nota |
pageNumber - parameter yang bertanggungjawab untuk nombor halaman yang dipaparkan semasa menggunakan paging. Penomboran bermula dari sifar. pageSize - parameter yang bertanggungjawab untuk bilangan hasil pada satu halaman apabila halaman
|
Dapatkan jumlah pemain
URL | /rehat/pemain/kira |
kaedah | DAPATKAN |
Param URL | tiada |
Param Data | tiada |
Respons Kejayaan |
Kod : 200 OK Kandungan : Integer |
nota |
Padam pemain
URL | /rest/players/{id} |
kaedah | PADAM |
Param URL | ID |
Param Data | tiada |
Respons Kejayaan | Kod : 200 OK |
nota |
Jika pemain tidak ditemui, respons adalah ralat dengan kod 404. Jika nilai id tidak sah, respons akan menjadi ralat dengan kod 400. |
Kemas kini pemain
URL | /rest/players/{id} |
kaedah | POS |
Param URL | ID |
Param Data |
|
Respons Kejayaan |
|
nota |
Hanya medan yang bukan batal dikemas kini. Jika pemain tidak ditemui dalam pangkalan data, respons adalah ralat dengan kod 404. Jika nilai id tidak sah, respons adalah ralat dengan kod 400. |
Cipta pemain
URL | /rehat/pemain |
kaedah | POS |
Param URL | tiada |
Param Data |
|
Respons Kejayaan |
|
nota |
Kami tidak boleh mencipta pemain jika:
Dalam kes semua perkara di atas, respons adalah ralat dengan kod 400. |
Analisis projek . Tonton selepas selesai!
GO TO FULL VERSION