Projek berkaitan: frontend

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.

1. Fork dari repositori: https://github.com/CodeGymCC/project-frontend.git
2. Muat turun versi projek anda ke komputer anda.
3. Muat turun Tomcat untuk diri sendiri: https://tomcat.apache.org/download-90.cgi .Penting: Tomcat memerlukan versi 9 , bukan 10.
4. Konfigurasikan pelancaran aplikasi melalui Idea: Alt + Shift + F9 -> Edit Konfigurasi... -> Alt + masukkan -> tom (dalam bar carian) -> Setempat.
• Selepas itu, anda perlu mengklik CONFIGUREdan 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.
5. Lancarkan aplikasi. Untuk melakukan ini: Alt + Shift + F9 -> (nama konfigurasi, saya menamakannya 'App') -> Jalankan.
6. 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.
7. Dalam markup ( my.html ) tambahkan jadual (jangan lupa berikan id) untuk menentukan nama lajur:
• #
• Nama
• Tajuk
• Perlumbaan
• profesion
• Tahap
• hari jadi
• diharamkan
8. Tambah tag pasangan <script>- kami akan menulis fungsi di sini.
9. 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.
10. Sekarang, adalah wajar untuk menambah sempadan sel pada jadual, jika tidak, maklumat itu secara amnya tidak boleh dibaca.
11. 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.
12. 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:
13. Sekarang mari kita warnakan nombor halaman semasa, jika tidak, ia menyusahkan ...
14. 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.
15. 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.
16. Sekarang tulis fungsi yang bertanggungjawab untuk mengedit akaun. Apabila anda mengklik padanya, mari kita sembunyikan butang "Padam", dan tukar gambar butang "Edit" kepada "Simpan".
17. 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

Sila ambil perhatian bahawa nilai dalam medan edit mestilah nilai yang ada dalam akaun.

18. 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.
19. 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.
20. 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.
21. Kini anda boleh menambah "kecantikan" melalui gaya - segala-galanya di sini terpulang kepada anda. Saya mendapatnya seperti ini:

Berguna: API Pelayan:

Dapatkan senarai pemain

Code: 200 OK
Code: 200 OK
Content: [
 {
  “id”:[Long],
  “name”:[String],
  “title”:[String],
  “race”:[Race],
  “profession”:[Profession],
  “birthday”:[Long],
  “banned”:[Boolean],
  “level”:[Integer]
 },
 …
]

public enum Race {
    HUMAN,
    DWARF,
    ELF,
    GIANT,
    ORC,
    TROLL,
    HOBBIT
}

public enum Profession {
    WARRIOR,
    ROGUE,
    SORCERER,
    CLERIC,
    PALADIN,
    NAZGUL,
    WARLOCK,
    DRUID
}

{
  “name”:[String],       --optional
  “title”:[String],     --optional
  “race”:[Race], --optional
  “profession”:[Profession], --optional
  “banned”:[Boolean]    --optional
}

Code: 200 OK
Content: {
  “id”:[Long],
  “name”:[String],
  “title”:[String],
  “race”:[Race],
  “profession”:[Profession],
  “birthday”:[Long],
  “banned”:[Boolean],
  “level”:[Integer]
 }

{
  “name”:[String],
  “title”:[String],
  “race”:[Race],
  “profession”:[Profession],
  “birthday”:[Long],
  “banned”:[Boolean], --optional, default=false
  “level”:[Integer]
}

Code: 200 OK
Content: {
  “id”:[Long],
  “name”:[String],
  “title”:[String],
  “race”:[Race],
  “profession”:[Profession],
  “birthday”:[Long],
  “banned”:[Boolean],
  “level”:[Integer]
 },

Analisis projek . Tonton selepas selesai!