관련 프로젝트: 프론트엔드

작업: HTML, CSS, JS, jQuery를 사용하여 CRUD 백엔드용 UI를 만들어야 합니다. 우리는 온라인 게임 계정을 관리하기 위한 관리자 패널을 만들 것입니다.

1. 저장소에서 포크: https://github.com/CodeGymCC/project-frontend.git
2. 프로젝트 버전을 컴퓨터에 다운로드합니다.
3. 직접 Tomcat을 다운로드하세요: https://tomcat.apache.org/download-90.cgi .중요한: Tomcat은 10이 아닌 9 버전이 필요합니다 .
4. Idea를 통해 애플리케이션 시작 구성: Alt + Shift + F9 -> 구성 편집… -> Alt + 삽입 -> tom(검색 표시줄에서) -> Local.
• 그런 다음 CONFIGURETomcat이 있는 아카이브를 다운로드하고 압축을 푼 위치를 클릭하고 표시해야 합니다.
• 탭에서 Deployment: Alt + 삽입 -> Artifact… -> rpg:war exploded -> OK.
• 필드에서 Application context: 그냥 둡니다 / (슬래시).
• 를 누릅니다 APPLY.
• 설정 창을 닫습니다.
5. 응용 프로그램을 시작하십시오. 이렇게 하려면: Alt + Shift + F9 -> (구성 이름, '앱'으로 이름 지정) -> 실행.
6. 애플리케이션을 배포한 후 구성 중에 선택한 브라우저에서 새 탭이 열립니다. 좋습니다. 서버가 구성되면 다음 두 파일로 작업해야 합니다.
• <project_dir>/src/main/webapp/html/my.html- 마크업과 스크립트가 있을 것입니다.
• <project_dir>/src/main/webapp/css/my.css– 여기에 스타일이 있습니다. 스타일에 대한 모든 것은 귀하에게 달려 있으며 요구 사항은 없습니다.
7. 마크업( my.html )에서 열 이름을 지정할 테이블을 추가합니다(id를 지정하는 것을 잊지 마십시오).
• #
• 이름
• 제목
• 경주
• 직업
• 수준
• 생일
• 금지
8. 쌍 태그를 추가합니다 <script>. 여기에 함수를 작성합니다.
9. 첫 번째 함수는 URL에 GET 요청을 보내야 합니다 "/rest/players". 즉, 목록을 가져옵니다. 결과는 단락 7의 테이블에 추가되어야 합니다(여기서 테이블 ID가 유용했습니다). 모든 작업을 올바르게 수행한 경우 서버를 다시 시작한 후 페이지에 4줄의 표가 표시됩니다. 첫 번째 줄 - 열 이름, 나머지 - 서버에서 온 데이터.
10. 이제 테이블에 셀 테두리를 추가하는 것이 바람직합니다. 그렇지 않으면 일반적으로 정보를 읽을 수 없습니다.
11. 이제 페이징으로 넘어 갑시다. 이를 위해서는 다음이 필요합니다.
• 예를 들어 테이블 아래에 <div>페이징 버튼이 있는 섹션을 추가합니다.
• 서버의 총 계정 수를 반환하는 서버에 GET 요청을 보내는 함수를 추가합니다. URL: "/rest/players/count".
• 3-4개의 숫자 값, 한 번에 표시할 계정 수에 대한 드롭다운 목록을 추가합니다. 숫자는 3에서 20 사이여야 합니다.
• 계정 목록을 표시하는 방법(p. 9)에서 페이지당 주어진 계정 수에 필요한 페이지 수 계산을 추가하여 모든 계정을 볼 수 있습니다.
12. 계정 목록을 표시하는 기능에서 표시할 페이지 번호를 담당할 매개변수를 추가합니다. "pageNumber" 및 "pageSize"를 쿼리 매개변수로 전달하도록 URL을 수정합니다 . 이제 드롭다운 목록에서 페이지당 수를 변경할 때 요청된 계정 수가 표시되어야 합니다.
13. 이제 현재 페이지 번호에 색을 칠해 보겠습니다. 그렇지 않으면 불편합니다 ...
14. 테이블에 편집 및 삭제라는 2개의 열을 더 추가해 보겠습니다. 각 행에 대해 각 항목의 편집 및 삭제를 담당할 아이콘을 추가해 보겠습니다. 에 있는 사진을 사용하거나 <project_dir>/src/main/webapp/img/자신의 사진을 사용할 수 있습니다.
15. 계정 삭제를 담당할 함수를 작성합니다. 이렇게 하려면 URL에서 서버에 DELETE 요청을 보냅니다 "/rest/players/{id}". 장바구니 이미지 클릭 시 이 함수를 호출합니다. 통화 후 - 현재 페이지에서 계정 목록을 업데이트하는 것을 잊지 마십시오.
• ID가 23 인 계정을 삭제하기 전
• id=23 인 계정을 삭제한 후 . 주의, 바구니를 제외한 어떤 버튼도 눌리지 않았습니다.
16. 이제 계정 편집을 담당하는 함수를 작성하십시오. 그것을 클릭하면 "삭제"버튼을 숨기고 "편집"버튼의 그림을 "저장"으로 변경하십시오.
17. 이제 계정 편집 기능을 추가해 보겠습니다. "편집" 버튼을 클릭하면 그림을 변경하는 것 외에도 필드를 편집 가능하게 만들어야 합니다.
• 이름
• 제목
• 경주
• 직업
• 금지

편집 필드의 값은 계정에 있는 값이어야 합니다.

18. 이제 "저장" 버튼을 클릭하여 변경 사항을 전송합니다. 이렇게 하려면 URL에 POST 요청을 보내고 “/rest/players/{id}”JSON 형식으로 변경할 수 있는 요청 본문으로 다섯 필드의 값을 모두 전달해야 합니다. JSON.stringify({...}) 사용 ; 변경 후에는 현재 페이지에서 데이터를 다시 로드하는 것을 잊지 마십시오.
19. 따라서 "C"(만들기)를 제외한 모든 작업은 현재 CRUD에서 수행해야 합니다. 페이징 버튼 뒤에 수평선과 여기에서 새 계정을 만들 수 있다는 텍스트를 추가합니다. 또한 다음과 같이 계정 매개변수에 대한 텍스트 블록 및 입력 필드를 추가합니다.
• 이름 - 1~12자의 텍스트입니다.
• 제목 - 1~30자의 텍스트입니다.
• Race - 드롭다운 목록입니다. 유효한 값은 API를 참조하세요.
• 직업 - 드롭다운 목록, 유효한 값은 API를 참조하세요.
• 레벨은 0에서 100까지의 숫자입니다.
• 생일 - 날짜(<input type="date" ...).
• Banned는 부울 값입니다.
20. 이제 입력한 모든 데이터가 서버로 전송되는 버튼을 추가합니다. URL에 대한 POST 요청을 사용합니다 /rest/players. 서버 응답 후 데이터 입력 필드를 지우고 현재 페이지에서 계정 목록을 다시 요청하는 것을 잊지 마십시오.
21. 이제 스타일을 통해 "아름다움"을 추가할 수 있습니다. 여기서 모든 것은 귀하에게 달려 있습니다. 나는 이것을 다음과 같이 얻었다 :

유용함: 서버 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]
 },

프로젝트 분석 . 완성 후 시청!