공수 관리 도구를 개발해 보았습니다.
7653 단어 spring-boot자바스크립트초보자자바Thymeleaf
했던 일
공수를 관리하는 웹 앱을 개발했습니다.
언어: Java(Spring), JavaScript
절차
1. 프로젝트 작성 (이 때 프로젝트 코드 등록)
2. 1.에서 등록한 프로젝트 코드를 입력하여 추가/편집/열람하고 싶은 프로젝트로 전환
3. 태스크 추가(태스크명, 공수, 시작일, 종료일, 담당자명 등)
4. 태스크 열람(담당자가 어느 기간에 어떤 태스크를 얼마나 공수로 마쳤는지, 프로젝트 담당자가 각각 얼마나 공수를 소비하고 있는지 등)
화면
프로젝트 코드 입력 화면
작업 추가(및 수정) 화면
작업 브라우징 화면
막힌 것
JavaScript와 Thymeleaf의 협력?
마지막 기사 에 썼지만 예를 들어 JavaScript
target.html('<a th:href="@{/hello}">サンプル</a>');
라고 써도 a 태그가 작동하지 않거나 했습니다.
해결책
<script type="text/javascript" th:inline="javascript">
const link = /*[[@{/hello}]]*/'';
target.html('<a href="' + link + '">サンプル</a>');
</script>
라고 써주는 것으로 해결했습니다.
이와 같이 JavaScript에서 Thymeleaf th:
를 사용할 수 없다는 것에 고전했습니다.
테이블 태그 내에 양식 태그를 쓸 수 없는 문제
예를 들어,
<table>
<tr>
<th>#</th>
<th>名前</th>
<th>ボタン</th>
</tr>
<tr>
<form>
<td>1</td>
<td><input type="text"/></td>
<td><input type="submit"></td>
</form>
</tr>
<tr>
<form>
<td>2</td>
<td><input type="text" /></td>
<td><input type="submit"></td>
</form>
</tr>
</table>
이미지라면
이런 경우입니다. 이것을 Chrome의 개발자 도구에서 살펴보면,
이상한. . . form
태그, 거기서 닫으면 안 된다. . .
해결책
프로젝트 코드 입력 화면
작업 추가(및 수정) 화면
작업 브라우징 화면
막힌 것
JavaScript와 Thymeleaf의 협력?
마지막 기사 에 썼지만 예를 들어 JavaScript
target.html('<a th:href="@{/hello}">サンプル</a>');
라고 써도 a 태그가 작동하지 않거나 했습니다.
해결책
<script type="text/javascript" th:inline="javascript">
const link = /*[[@{/hello}]]*/'';
target.html('<a href="' + link + '">サンプル</a>');
</script>
라고 써주는 것으로 해결했습니다.
이와 같이 JavaScript에서 Thymeleaf th:
를 사용할 수 없다는 것에 고전했습니다.
테이블 태그 내에 양식 태그를 쓸 수 없는 문제
예를 들어,
<table>
<tr>
<th>#</th>
<th>名前</th>
<th>ボタン</th>
</tr>
<tr>
<form>
<td>1</td>
<td><input type="text"/></td>
<td><input type="submit"></td>
</form>
</tr>
<tr>
<form>
<td>2</td>
<td><input type="text" /></td>
<td><input type="submit"></td>
</form>
</tr>
</table>
이미지라면
이런 경우입니다. 이것을 Chrome의 개발자 도구에서 살펴보면,
이상한. . . form
태그, 거기서 닫으면 안 된다. . .
해결책
target.html('<a th:href="@{/hello}">サンプル</a>');
<script type="text/javascript" th:inline="javascript">
const link = /*[[@{/hello}]]*/'';
target.html('<a href="' + link + '">サンプル</a>');
</script>
<table>
<tr>
<th>#</th>
<th>名前</th>
<th>ボタン</th>
</tr>
<tr>
<form>
<td>1</td>
<td><input type="text"/></td>
<td><input type="submit"></td>
</form>
</tr>
<tr>
<form>
<td>2</td>
<td><input type="text" /></td>
<td><input type="submit"></td>
</form>
</tr>
</table>
form
태그에 id 속성을 부여한다 input
태그의 form 속성에 1.로 부여한 id를 기재한다 이렇게 하면
form
태그의 id에 해당하는 input
의 value 값을 보낼 수 있습니다.덧붙여서
form
태그는 input
태그 위에서도 아래에서 어디서나 기재해도 좋다고 합니다.위의 예라면
<table>
<tr>
<th>#</th>
<th>名前</th>
<th>ボタン</th>
</tr>
<tr>
<form id="form_01"></form>
<td>1</td>
<td><input type="text" form="form_01" /></td>
<td><input type="submit" form="form_01"></td>
</tr>
<tr>
<form id="form_02"></form>
<td>2</td>
<td><input type="text" form="form_02" /></td>
<td><input type="submit" form="form_02"></td>
</tr>
</table>
개발자 도구로 보면
이렇게 되어 있어야 합니다! 아마도 이것으로 잘 작동합니다.
이상입니다. 끝까지 읽어 주셔서 감사합니다.
참고
form 태그는 중첩할 수 없다 & 그 대처법
HTML5 FORM과 INPUT을 분리하여 작성하는 방법
Reference
이 문제에 관하여(공수 관리 도구를 개발해 보았습니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/dumbbell/items/4e72fa9345705f2e4177
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
Reference
이 문제에 관하여(공수 관리 도구를 개발해 보았습니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/dumbbell/items/4e72fa9345705f2e4177텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)