Dự án liên quan: frontend

Nhiệm vụ: Bạn cần tạo giao diện người dùng cho phần phụ trợ CRUD bằng HTML, CSS, JS, jQuery. Chúng tôi sẽ tạo một bảng quản trị để quản lý tài khoản trò chơi trực tuyến.

1. Ngã ba từ kho lưu trữ: https://github.com/CodeGymCC/project-frontend.git
2. Tải phiên bản dự án về máy tính của bạn.
3. Tải xuống Tomcat cho chính bạn: https://tomcat.apache.org/download-90.cgi .Quan trọng: Tomcat cần phiên bản 9 , không phải 10.
4. Định cấu hình khởi chạy ứng dụng qua Ý tưởng: Alt + Shift + F9 -> Chỉnh sửa cấu hình… -> Alt + chèn -> tom (trong thanh tìm kiếm) -> Cục bộ.
• Sau đó, bạn cần nhấp CONFIGUREvà cho biết nơi lưu trữ với Tomcat đã được tải xuống và giải nén.
• Trong tab Deployment: Alt + insert -> Artifact… -> rpg:war bùng nổ -> OK.
• Trong trường Application context: chỉ để lại / (dấu gạch chéo về phía trước).
• Nhấn APPLY.
• Đóng cửa sổ cài đặt.
5. Chạy chương trình. Để làm điều này: Alt + Shift + F9 -> (tên cấu hình, tôi đặt tên là 'Ứng dụng') -> Chạy.
6. Sau khi triển khai ứng dụng, một tab mới sẽ mở trong trình duyệt được chọn trong quá trình định cấu hình. Tuyệt vời, máy chủ đã được định cấu hình, sau đó bạn cần làm việc với hai tệp:
• <project_dir>/src/main/webapp/html/my.html- sẽ có đánh dấu và tập lệnh.
• <project_dir>/src/main/webapp/css/my.css- đây sẽ là phong cách. Mọi thứ về phong cách đều tùy thuộc vào bạn, không có yêu cầu nào đối với chúng.
7. Trong phần đánh dấu ( my.html ), hãy thêm một bảng (đừng quên cung cấp cho nó một id) để chỉ định tên của các cột:
• #
• Tên
• Tiêu đề
• Loài
• nghề nghiệp
• Mức độ
• Sinh nhật
• bị cấm
8. Thêm một thẻ cặp <script>- chúng tôi sẽ viết các chức năng ở đây.
9. Hàm đầu tiên sẽ gửi yêu cầu GET tới URL "/rest/players"- lấy danh sách. Kết quả phải được thêm vào bảng từ đoạn 7 (đây là lúc id bảng có ích). Nếu bạn đã làm đúng mọi thứ, sau khi khởi động lại máy chủ, một bảng có 4 dòng sẽ hiển thị trên trang của bạn. Trong dòng đầu tiên - tên của các cột, trong phần còn lại - dữ liệu đến từ máy chủ.
10. Bây giờ, bạn nên thêm các đường viền ô vào bảng, nếu không thì thông tin thường không đọc được.
11. Bây giờ hãy chuyển sang phân trang. Đối với điều này, bạn cần:
• Ví dụ, thêm một phần dưới bảng, <div>trong đó sẽ có các nút phân trang.
• Thêm chức năng sẽ gửi yêu cầu GET đến máy chủ để trả về tổng số tài khoản trên máy chủ. URL: "/rest/players/count".
• Thêm danh sách thả xuống cho 3-4 giá trị số, số lượng tài khoản hiển thị cùng một lúc. Các số phải nằm trong khoảng từ 3 đến 20.
• Trong phương pháp hiển thị danh sách tài khoản (tr. 9), chúng tôi sẽ bổ sung thêm cách tính số trang cần thiết cho một số tài khoản nhất định trên mỗi trang để bạn có thể xem tất cả các tài khoản.
12. Trong chức năng hiển thị danh sách tài khoản, hãy thêm một tham số sẽ chịu trách nhiệm về số trang sẽ được hiển thị. Sửa URL để nó chuyển "pageNumber" và "pageSize" làm tham số truy vấn . Bây giờ, khi thay đổi số lượng trên mỗi trang trong danh sách thả xuống, số lượng tài khoản được yêu cầu sẽ được hiển thị:
13. Bây giờ hãy tô màu số trang hiện tại, nếu không sẽ rất bất tiện ...
14. Hãy thêm 2 cột nữa vào bảng: Chỉnh sửa và Xóa. Đối với mỗi hàng, hãy thêm các biểu tượng sẽ chịu trách nhiệm chỉnh sửa và xóa từng mục. Bạn có thể sử dụng ảnh có trong <project_dir>/src/main/webapp/img/hoặc sử dụng ảnh của riêng bạn.
15. Viết một chức năng sẽ chịu trách nhiệm xóa một tài khoản. Để thực hiện việc này, hãy gửi yêu cầu XÓA tới máy chủ tại URL "/rest/players/{id}". Khi click vào hình giỏ hàng thì gọi hàm này. Sau cuộc gọi - đừng quên cập nhật danh sách tài khoản trên trang hiện tại.
• Trước khi xóa tài khoản với id=23
• Sau khi xóa tài khoản với id=23 . Hãy chú ý, không có nút nào được nhấn, ngoại trừ cái giỏ.
16. Bây giờ hãy viết một chức năng chịu trách nhiệm chỉnh sửa một tài khoản. Khi bạn nhấp vào nó, hãy ẩn nút "Xóa" và thay đổi hình ảnh của nút "Chỉnh sửa" thành "Lưu".
17. Bây giờ hãy thêm chức năng chỉnh sửa tài khoản. Bằng cách nhấp vào nút "Chỉnh sửa", ngoài việc thay đổi hình ảnh, bạn cần làm cho các trường có thể chỉnh sửa được:
• Tên
• Tiêu đề
• Loài
• nghề nghiệp
• bị cấm

Xin lưu ý rằng giá trị trong các trường chỉnh sửa phải là giá trị trong tài khoản.

18. Bây giờ chúng tôi sẽ gửi các thay đổi bằng cách nhấp vào nút “Lưu”. Để thực hiện việc này, bạn cần gửi yêu cầu POST tới URL “/rest/players/{id}”và chuyển các giá trị của cả năm trường dưới dạng phần thân yêu cầu, có thể thay đổi ở dạng JSON. Sử dụng JSON.stringify({...}); Sau khi thay đổi, đừng quên tải lại dữ liệu trên trang hiện tại.
19. Vì vậy, mọi thứ nên được thực hiện từ CRUD vào lúc này, ngoại trừ “C” (Tạo). Sau các nút phân trang, thêm một đường ngang và văn bản cho biết bạn có thể tạo một tài khoản mới tại đây. Ngoài ra, hãy thêm khối văn bản và trường nhập liệu cho thông số tài khoản:
• Tên - văn bản, từ 1 đến 12 ký tự.
• Tiêu đề - văn bản, từ 1 đến 30 ký tự.
• Cuộc đua - danh sách thả xuống, xem API để biết các giá trị hợp lệ.
• Nghề nghiệp - danh sách thả xuống, xem API để biết các giá trị hợp lệ.
• Cấp độ là một số từ 0 đến 100.
• Sinh nhật - ngày (<kiểu nhập="ngày"...).
• Bị cấm là một giá trị boolean.
20. Bây giờ hãy thêm một nút, khi nhấp vào đó, tất cả dữ liệu đã nhập sẽ được gửi đến máy chủ. Sử dụng yêu cầu POST tới URL /rest/players. Sau khi máy chủ phản hồi, đừng quên xóa các trường nhập dữ liệu và yêu cầu lại danh sách tài khoản trên trang hiện tại.
21. Giờ đây, bạn có thể thêm "vẻ đẹp" thông qua các kiểu - mọi thứ ở đây đều tùy thuộc vào bạn. Tôi đã nhận nó như thế này:

Hữu ích: API máy chủ:

Nhận danh sách người chơi

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

Phân tích dự án . Xem sau khi hoàn thành!