기존의 태그 정보 자동완성 목록으로 제공하는 기능
- Tagify의 whitelist를 사용한다.
- https://yaireo.github.io/tagify/#section-manual-suggestions
Tagify - demo
#textarea In this example, the field is pre-ocupied with 3 tags, and last tag is not included in the whitelist, and will be removed because the enforceWhitelist option flag is set to true HTML The Matrix, Pulp Fiction, Mad Max JAVASCRIPT The Matrix, Pulp F
yaireo.github.io
ObjectMapper
- 객체를 JSON으로 JSON을 객체로 변환할 때 사용하는 유틸리티
- https://github.com/FasterXML/jackson
FasterXML/jackson
Main Portal page for the Jackson project. Contribute to FasterXML/jackson development by creating an account on GitHub.
github.com
whitelist를 작성하기 위해 SettingsController에서 updateTags메소드에서 모든 Tag를 가져와서 JSON타입으로 변환하기 위해 ObjectMapper를 주입받아서 Tag리스트 객체를 JSON으로 바꿔 준다.
package me.weekbelt.studyolle.settings;
@RequiredArgsConstructor
@Controller
public class SettingsController {
// 기존 코드 ....
private final ObjectMapper objectMapper;
// 기존 코드 ....
@GetMapping("/settings/tags")
public String updateTags(@CurrentUser Account account, Model model) throws JsonProcessingException {
// .......
List<String> allTags = tagRepository.findAll().stream()
.map(Tag::getTitle).collect(Collectors.toList());
model.addAttribute("whitelist", objectMapper.writeValueAsString(allTags));
// .......
}
// 기존 코드 ....
}
관심 주제 화면으로 넘어온 JSON형태의 whitelist를 보여주기 위해 태그추가
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<!--head-->
<head th:replace="fragments.html::head"></head>
<body class="bg-light">
<!--네비게이션 바-->
<div th:replace="fragments.html::main-nav"></div>
<div class="container">
<div class="row mt-5 justify-content-center">
<div class="col-2">
<div th:replace="fragments.html :: settings-menu(currentMenu='tags')"></div>
</div>
<div class="col-8">
<div class="row">
<h2 class="col-sm-12">관심있는 스터디 주제</h2>
</div>
<div class="row">
<div class="col-12">
<div class="alert alert-info" role="alert">
참여하고 싶은 스터디 주제를 입력해 주세요. 해당 주제의 스터디가 생기면 받을 수 있습니다.
태그를 입력하고 콤마(,) 또는 엔터를 입력하세요.
</div>
<div id="whitelist" th:text="${whitelist}" hidden></div> // 추가
<input id="tags" type="text" name="tags" th:value="${#strings.listJoin(tags, ',')}"
class="tagify-outside" aria-describedby="tagHelp"/>
</div>
</div>
</div>
</div>
<!-- footer -->
<div th:replace="fragments.html::footer"></div>
</div>
// 기존 scprint 코드 ......
</body>
</html>
추가한 태그에 whitelist를 삽입하기위한 javascript로직 수정
$(function () {
// ..................
const tagInput = document.querySelector("#tags");
const tagify = new Tagify(tagInput, {
pattern: /^.{0,20}$/,
whitelist: JSON.parse(document.querySelector("#whitelist").textContent), // 추가
dropdown: {
enabled: 1, // suggest tags after a single character input
} // map tags
});
// .............
});
참고: https://www.inflearn.com/course/%EC%8A%A4%ED%94%84%EB%A7%81-JPA-%EC%9B%B9%EC%95%B1#
스프링과 JPA 기반 웹 애플리케이션 개발 - 인프런
이 강좌에서 여러분은 실제로 운영 중인 서비스를 스프링, JPA 그리고 타임리프를 비롯한 여러 자바 기반의 여러 오픈 소스 기술을 사용하여 웹 애플리케이션을 개발하는 과정을 학습할 수 있습니다. 이 강좌를 충분히 학습한다면 여러분 만의 웹 서비스를 만들거나 취직에 도움이 될만한 포트폴리오를 만들 수 있을 겁니다. 활용 웹 개발 프레임워크 및 라이브러리 Java Spring Spring Boot Spring Data JPA Thymeleaf 온라인 강의 스
www.inflearn.com
'스프링과 JPA 기반 웹 어플리케이션 개발 > 2부(관심 주제와 지역 정보)' 카테고리의 다른 글
| 39. 지역 도메인 (0) | 2020.04.23 |
|---|---|
| 38. 관심 주제 테스트 (0) | 2020.04.23 |
| 36. 관심 주제 삭제 (0) | 2020.04.22 |
| 35. 관심 주제 조회 (0) | 2020.04.22 |
| 34. 관심주제 등록하기 (0) | 2020.04.22 |
