โครงการที่เกี่ยวข้อง: ส่วนหน้า

งาน: คุณต้องสร้าง UI สำหรับแบ็กเอนด์ CRUD โดยใช้ HTML, CSS, JS, jQuery เราจะสร้างแผงผู้ดูแลระบบสำหรับจัดการบัญชีเกมออนไลน์

1. แยกจากที่เก็บ: https://github.com/CodeGymCC/project-frontend.git
2. ดาวน์โหลดเวอร์ชันของโครงการลงในคอมพิวเตอร์ของคุณ
3. ดาวน์โหลด Tomcat ด้วยตัวคุณเอง: https://tomcat.apache.org/download-90.cgiสำคัญ: Tomcat ต้องการเวอร์ชัน 9ไม่ใช่ 10
4. กำหนดค่าการเปิดแอปพลิเคชันผ่านไอเดีย: Alt + Shift + F9 -> แก้ไขการกำหนดค่า... -> Alt + insert -> tom (ในแถบค้นหา) -> Local
• หลังจากนั้นคุณต้องคลิกCONFIGUREและระบุตำแหน่งที่ดาวน์โหลดและคลายไฟล์เก็บถาวรด้วย Tomcat
• ในแท็บDeployment: Alt + แทรก -> สิ่งประดิษฐ์… -> rpg:war ระเบิด -> ตกลง
• ในฟิลด์Application context: เว้นไว้เท่านั้น/ (เครื่องหมายทับ)
• กดAPPLY_
• ปิดหน้าต่างการตั้งค่า
5. เปิดแอปพลิเคชัน ทำสิ่งนี้: Alt + Shift + F9 -> (ชื่อ config ฉันตั้งชื่อว่า 'แอพ') -> เรียกใช้
6. หลังจากปรับใช้แอปพลิเคชัน แท็บใหม่จะเปิดขึ้นในเบราว์เซอร์ที่เลือกระหว่างการกำหนดค่า เยี่ยมมาก เซิร์ฟเวอร์ได้รับการกำหนดค่าแล้ว คุณต้องทำงานกับไฟล์สองไฟล์:
• <project_dir>/src/main/webapp/html/my.html- จะมีมาร์กอัปและสคริปต์
• <project_dir>/src/main/webapp/css/my.css– ที่นี่จะเป็นสไตล์ ทุกอย่างเกี่ยวกับสไตล์ขึ้นอยู่กับคุณ ไม่มีข้อกำหนดสำหรับพวกเขา
7. ในมาร์กอัป ( my.html ) เพิ่มตาราง (อย่าลืมระบุรหัส) เพื่อระบุชื่อของคอลัมน์:
• #
• ชื่อ
• ชื่อ
• แข่ง
• วิชาชีพ
• ระดับ
• วันเกิด
• ห้าม
8. เพิ่มแท็กคู่<script>- เราจะเขียนฟังก์ชันที่นี่
9. ฟังก์ชันแรกควรส่งคำขอ GET ไปยัง URL "/rest/players"- รับรายการ ต้องเพิ่มผลลัพธ์ลงในตารางจากย่อหน้าที่ 7 (นี่คือจุดที่รหัสตารางมีประโยชน์) หากคุณทำทุกอย่างถูกต้อง หลังจากรีสตาร์ทเซิร์ฟเวอร์ ตารางที่มี 4 บรรทัดจะแสดงบนเพจของคุณ ในบรรทัดแรก - ชื่อของคอลัมน์ในส่วนที่เหลือ - ข้อมูลที่มาจากเซิร์ฟเวอร์
10. ตอนนี้ ขอแนะนำให้เพิ่มเส้นขอบเซลล์ลงในตาราง มิฉะนั้น ข้อมูลโดยทั่วไปจะไม่สามารถอ่านได้
11. ตอนนี้เราไปที่เพจกัน สำหรับสิ่งนี้คุณต้อง:
• ใต้ตาราง ให้เพิ่มส่วน เช่น<div>ซึ่งจะมีปุ่มเพจ
• เพิ่มฟังก์ชันที่จะส่งคำขอ GET ไปยังเซิร์ฟเวอร์ที่ส่งคืนจำนวนบัญชีทั้งหมดบนเซิร์ฟเวอร์ URL: "/rest/players/count".
• เพิ่มรายการแบบเลื่อนลงสำหรับค่าตัวเลข 3-4 ค่า จำนวนบัญชีที่จะแสดงต่อครั้ง ตัวเลขต้องอยู่ระหว่าง 3 ถึง 20
• ในวิธีการแสดงรายการบัญชี (หน้า 9) เราจะเพิ่มการคำนวณจำนวนหน้าที่จำเป็นสำหรับจำนวนบัญชีที่กำหนดต่อหน้า เพื่อให้คุณสามารถดูบัญชีทั้งหมดได้
12. ในฟังก์ชั่นการแสดงรายการบัญชี ให้เพิ่มพารามิเตอร์ที่จะรับผิดชอบจำนวนหน้าที่จะแสดง แก้ไข URL เพื่อให้ผ่าน"pageNumber"และ" pageSize" เป็นพารามิเตอร์การค้นหา ตอนนี้ เมื่อเปลี่ยนจำนวนต่อหน้าในรายการแบบหล่นลง จำนวนบัญชีที่ขอควรแสดง:
13. ตอนนี้มาย้อมสีหมายเลขหน้าปัจจุบันมิฉะนั้นจะไม่สะดวก ...
14. เพิ่ม 2 คอลัมน์ในตาราง: แก้ไขและลบ สำหรับแต่ละแถว มาเพิ่มไอคอนที่จะรับผิดชอบในการแก้ไขและลบแต่ละรายการ คุณสามารถใช้รูปภาพที่อยู่ใน<project_dir>/src/main/webapp/img/หรือใช้ของคุณเองก็ได้
15. เขียนฟังก์ชันที่จะรับผิดชอบในการลบบัญชี ในการดำเนินการนี้ ให้ส่งคำขอ DELETE ไปยังเซิร์ฟเวอร์ที่"/rest/players/{id}"URL เมื่อคลิกที่รูปรถเข็นแล้วให้เรียกใช้ฟังก์ชันนี้ หลังจากการโทร - อย่าลืมอัปเดตรายการบัญชีในหน้าปัจจุบัน
• ก่อนลบบัญชีที่มีid=23
• หลังจากลบบัญชีที่มีid=23 . ให้ความสนใจไม่มีการกดปุ่มใด ๆ ยกเว้นตะกร้า
16. ตอนนี้เขียนฟังก์ชั่นที่รับผิดชอบในการแก้ไขบัญชี เมื่อคุณคลิก ให้ซ่อนปุ่ม "ลบ" และเปลี่ยนรูปภาพของปุ่ม "แก้ไข" เป็น "บันทึก"
17. ตอนนี้มาเพิ่มฟังก์ชันสำหรับแก้ไขบัญชี เมื่อคลิกที่ปุ่ม "แก้ไข" นอกเหนือจากการเปลี่ยนรูปภาพแล้ว คุณต้องทำให้ฟิลด์สามารถแก้ไขได้:
• ชื่อ
• ชื่อ
• แข่ง
• วิชาชีพ
• ห้าม

โปรดทราบว่าค่าในช่องแก้ไขต้องเป็นค่าที่อยู่ในบัญชี

18. ตอนนี้เราจะส่งการเปลี่ยนแปลงโดยคลิกที่ปุ่ม "บันทึก" ในการดำเนินการนี้ คุณต้องส่งคำขอ POST ไปยัง URL “/rest/players/{id}”และส่งค่าของฟิลด์ทั้งห้าเป็นเนื้อหาคำขอ ซึ่งสามารถเปลี่ยนแปลงได้ในรูปแบบของ JSON ใช้JSON.stringify({...}); หลังจากการเปลี่ยนแปลง อย่าลืมโหลดข้อมูลซ้ำในหน้าปัจจุบัน
19. ดังนั้น ตอนนี้ควรทำทุกอย่างจาก CRUD ยกเว้น "C" (สร้าง) หลังจากปุ่มเพจ ให้เพิ่มเส้นแนวนอนและข้อความที่ระบุว่าคุณสามารถสร้างบัญชีใหม่ได้ที่นี่ นอกจากนี้ เพิ่มบล็อกข้อความและฟิลด์อินพุตสำหรับพารามิเตอร์บัญชี:
• ชื่อ - ข้อความตั้งแต่ 1 ถึง 12 ตัวอักษร
• ชื่อเรื่อง - ข้อความตั้งแต่ 1 ถึง 30 ตัวอักษร
• การแข่งขัน - รายการแบบหล่นลง ดู API สำหรับค่าที่ถูกต้อง
• อาชีพ - รายการแบบหล่นลง ดู API สำหรับค่าที่ถูกต้อง
• ระดับคือตัวเลขตั้งแต่ 0 ถึง 100
• วันเกิด - วันที่ (<input type="date" ...)
• ห้ามเป็นค่าบูลีน
20. ตอนนี้เพิ่มปุ่มเมื่อคลิกที่ข้อมูลที่ป้อนทั้งหมดจะถูกส่งไปยังเซิร์ฟเวอร์ ใช้คำขอ POST ไปยัง/rest/playersURL หลังจากการตอบกลับของเซิร์ฟเวอร์ อย่าลืมล้างช่องป้อนข้อมูลและขอรายการบัญชีอีกครั้งในหน้าปัจจุบัน
21. ตอนนี้คุณสามารถเพิ่ม "ความสวยงาม" ผ่านสไตล์ - ทุกอย่างขึ้นอยู่กับคุณ ฉันได้รับสิ่งนี้:

มีประโยชน์: Server API:

รับรายชื่อผู้เล่น

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

การวิเคราะห์โครงการ ดูจบแล้ว!