İlgili proje: önyüz

Görev: HTML, CSS, JS, jQuery kullanarak bir CRUD arka ucu için bir kullanıcı arabirimi oluşturmanız gerekir. Online oyun hesaplarını yönetmek için bir yönetici paneli yapacağız.

1. Depodan çatal: https://github.com/CodeGymCC/project-frontend.git
2. Projenizin sürümünü bilgisayarınıza indirin.
3. Tomcat'i kendiniz indirin: https://tomcat.apache.org/download-90.cgi .Önemli: Tomcat'in sürüm 9'a ihtiyacı var , 10'a değil.
4. Fikir aracılığıyla uygulama başlatmayı yapılandırın: Alt + Shift + F9 -> Yapılandırmaları Düzenle… -> Alt + ekle -> tom (arama çubuğunda) -> Yerel.
• CONFIGUREBundan sonra, Tomcat ile arşivin nereye indirildiğini ve paketini açtığını tıklamanız ve belirtmeniz gerekir .
• Sekmede Deployment: Alt + ekle -> Artifact… -> rpg:war patladı -> Tamam.
• Alanda Application context: sadece bırakın / (eğik çizgi).
• basın APPLY.
• Ayarlar penceresini kapatın.
5. Uygulamayı başlat. Bunu yapmak için: Alt + Shift + F9 -> (yapılandırma adı, 'Uygulama' adını verdim) -> Çalıştır.
6. Uygulamayı dağıttıktan sonra, yapılandırma sırasında seçilen tarayıcıda yeni bir sekme açılacaktır. Harika, sunucu yapılandırıldı, ardından iki dosyayla çalışmanız gerekiyor:
• <project_dir>/src/main/webapp/html/my.html- işaretleme ve komut dosyaları olacak.
• <project_dir>/src/main/webapp/css/my.css– işte stiller olacak. Stillerle ilgili her şey size kalmış, onlar için herhangi bir gereklilik yok.
7. İşaretlemede ( my.html ), sütunların adlarını belirteceğiniz bir tablo ekleyin (ona bir kimlik vermeyi unutmayın):
• #
• İsim
• Başlık
• Irk
• meslek
• Seviye
• doğum günü
• yasaklandı
8. Bir çift etiketi ekleyin <script>- buraya işlevler yazacağız.
9. İlk işlev, URL'ye bir GET isteği göndermelidir "/rest/players"- listeyi alın. Sonuç, 7. paragraftaki tabloya eklenmelidir (tablo kimliğinin kullanışlı olduğu yer burasıdır). Her şeyi doğru yaptıysanız, sunucuyu yeniden başlattıktan sonra sayfanızda 4 satırlık bir tablo görüntülenecektir. İlk satırda - sütunların adları, geri kalanında - sunucudan gelen veriler.
10. Şimdi, tabloya hücre kenarlıkları eklemek istenebilir, aksi takdirde bilgiler genellikle okunamaz.
11. Şimdi sayfalamaya geçelim. Bunun için ihtiyacınız var:
• Tablonun altına, örneğin <div>çağrı düğmelerinin olacağı bir bölüm ekleyin.
• Sunucuya, sunucudaki toplam hesap sayısını döndüren bir GET isteği gönderecek bir işlev ekleyin. URL: "/rest/players/count".
• Bir seferde kaç hesap gösterileceğini gösteren 3-4 sayısal değer için bir açılır liste ekleyin. Sayılar 3 ile 20 (dahil) arasında olmalıdır.
• Hesap listesini görüntüleme yönteminde (s. 9), tüm hesapları görüntüleyebilmeniz için sayfa başına belirli sayıda hesap için gereken sayfa sayısının hesaplamasını ekleyeceğiz.
12. Hesap listesini gösterme işlevinde, gösterilecek sayfa sayısından sorumlu olacak bir parametre ekleyin. URL'yi, "pageNumber" ve "pageSize" öğelerini sorgu parametreleri olarak geçirecek şekilde düzeltin . Şimdi, açılır listede sayfa başına sayı değiştirilirken, istenen hesap sayısı görüntülenmelidir:
13. Şimdi mevcut sayfa numarasını renklendirelim, aksi takdirde sakıncalıdır ...
14. Tabloya 2 sütun daha ekleyelim: Düzenle ve Sil. Her satır için, her girişi düzenlemekten ve silmekten sorumlu olacak simgeleri ekleyelim. İçinde bulunan resimleri kullanabilir <project_dir>/src/main/webapp/img/veya kendinizinkini kullanabilirsiniz.
15. Bir hesabı silmekten sorumlu olacak bir işlev yazın. Bunu yapmak için, URL'deki sunucuya bir DELETE isteği gönderin "/rest/players/{id}". Sepet resmine tıkladığınızda bu işlevi çağırın. Aramadan sonra - geçerli sayfadaki hesap listesini güncellemeyi unutmayın.
• id=23 olan hesabı silmeden önce
• id=23 ile hesabı sildikten sonra . Dikkat sepet dışında hiçbir tuşa basılmamıştır.
16. Şimdi bir hesabı düzenlemekten sorumlu olan bir işlev yazın. Üzerine tıkladığınızda "Sil" butonunu gizleyelim ve "Düzenle" butonunun resmini "Kaydet" olarak değiştirelim.
17. Şimdi bir hesabı düzenlemek için işlevsellik ekleyelim. "Düzenle" düğmesine tıklayarak, resmi değiştirmenin yanı sıra alanları düzenlenebilir hale getirmeniz gerekir:
• İsim
• Başlık
• Irk
• meslek
• yasaklandı

Lütfen düzenleme alanlarındaki değerin hesapta bulunan değerler olması gerektiğini unutmayın.

18. Şimdi değişiklikleri “Kaydet” butonuna tıklayarak göndereceğiz. Bunu yapmak için, URL'ye bir POST isteği göndermeniz “/rest/players/{id}”ve istek gövdesi olarak beş alanın tümünün değerlerini JSON biçiminde değiştirilebilen iletmeniz gerekir. JSON.stringify({...}) kullanın ; Değişiklikten sonra mevcut sayfadaki verileri yeniden yüklemeyi unutmayın.
19. Bu nedenle, "C" (Oluştur) dışında her şey şu anda CRUD'dan yapılmalıdır. Sayfalama düğmelerinden sonra yatay bir çizgi ve burada yeni bir hesap oluşturabileceğinizi belirten bir metin ekleyin. Ayrıca, hesap parametreleri için metin blokları ve giriş alanları ekleyin:
• İsim - metin, 1 ila 12 karakter.
• Başlık - 1 ila 30 karakterlik metin.
• Yarış - açılır liste, geçerli değerler için API'ye bakın.
• Meslek - açılır liste, geçerli değerler için API'ye bakın.
• Düzey 0 ile 100 arasında bir sayıdır.
• Doğum günü - tarih (<input type="date" ...).
• Yasaklanmış bir boole değeridir.
20. Şimdi, tıklandığında girilen tüm verilerin sunucuya gönderileceği bir düğme ekleyin. URL'ye bir POST isteği kullanın /rest/players. Sunucu yanıtından sonra, veri giriş alanlarını temizlemeyi ve mevcut sayfadaki hesap listesini yeniden istemeyi unutmayın.
21. Artık stiller aracılığıyla "güzellik" ekleyebilirsiniz - burada her şey size kalmış. Ben şöyle anladım:

Yararlı: Sunucu API'si:

Oyuncu listesini al

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]
 },

Proje analizi . Bitirdikten sonra izleyin!