메인 홈페이지 만들고, 네브바에 페이지 클릭시 이동

2022. 5. 5. 21:04

[ PageController ]

@Controller
@RequestMapping("/")
public class PageController {
	
	@Autowired
	private PageRepository pageRepo;
	
	@GetMapping
	public String home(Model model) {
		
		Page page = pageRepo.findBySlug("home");
		model.addAttribute("page", page);
		
		return "page";
	}
}

관리자에서 만든 PageRepository에서 슬러그 home을 가져와 page뷰로 넘겨준다 (=메인홈페이지)

[ page.html ]

<!-- 고객용 -->
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
  <head th:replace="/fragments/head :: home-customer"> </head>
  <body>
    <nav th:replace="/fragments/nav :: nav-customer"></nav>

    <main class="container-fluid mt-5"> <!-- fluid는 가로 해상도에 상관없이 100%의 width-->
      <div class="row"> <!--한 줄-->
        
        <div class="col"></div> <!-- 1/12 -->
        <div class="col-7" th:utext="${page.content}"></div> <!-- 7/12 --><!--utext는 ck에디터로 입력해서 DB에도 어떤태그쓴지 알기위해-->
        <div class="col"></div> <!-- 1/12 -->
      </div>
    </main>

    <footer th:replace="/fragments/footer :: footer"></footer>
  </body>
</html>

th:utext="${page.content}"

페이지 home의 content수정할때 DB에 태그까지 저장되게 하는 th:utext

DB에 태그까지 저장 되도록 쓰는 이유는??

ck로 태그가 포함된 문서편집을 웹에서 하니까 DB에 태그를 표시해서 자세히 알려고

page 수정 눌러서 home 페이지 내용을 직접 넣고

http://localhost:8080/

- nav.html 에서 페이지를 반복문으로 표시하도록 하자

네브바의 페이지들은 모든 컨트롤러에 공통적으로 적용되어야해서

Common 클래스를 따로 만들어서 페이지 리스트 순서대로 nav바에 전달 되도록 cpages를 만든다.

Common

//모든 컨트롤러에 적용(모든 페이지에 적용)
@ControllerAdvice
public class Common {

	@Autowired
	private PageRepository pageRepo;
	
	//모델에 추가한다.
	@ModelAttribute
	public void sharedData(Model model) {
		//cpages에 모든 페이지를 순서대로 담아서 전달
		List<Page> cpages = pageRepo.findAllByOrderBySortingAsc();
		model.addAttribute("cpages", cpages);
	}
}

@ControllerAdvice : 공통으로 모든 페이지에 적용해야함

페이지 순서대로 담은 리스트들(cpages) -> th:each=" page : ${cpages}" 로 전달

[ nav.html ]

<div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item active" th:each="page : ${cpages}">
        <a class="nav-link" th:href="@{'/' + ${page.slug}}" th:text="${page.title}"></a>
      </li>
    </ul>
</div>

결과

페이지가 순서대로 정렬이 됨.

Home은 표시안되도록 a태그에 if절 추가하기 (쇼핑몰을 누르면 Home 페이지로 넘어가기 때문에)

 th:if="${page.slug != 'home'}" th:href="@{'/'+ ${page.slug}}"

- 페이지 주소는 슬러그로 해놨으니까 해당 슬러그의 페이지로 이동하도록 get매핑 만든다.

//슬러그가 들어올경우 슬러그가 해당하는 페이지를 출력한다.
@GetMapping("/{slug}")
public String home(@PathVariable String slug, Model model) {
    //슬러그를 가져와서 메인홈페이지를 만들어준다.
    Page page = pageRepo.findBySlug(slug);

    if(page == null) {
        return "redirect:/"; //페이지가 없으면 홈페이지로 이동
    }

    model.addAttribute("page", page);

    return "page";
}

LIST

'Spring boot | 쇼핑몰 만들기 | 어글리 마켓 > 홈페이지 만들기 | 고객,관리자' 카테고리의 다른 글

장바구니에 상품 담기 (0)	2022.05.11
모든 페이지 내에 카테고리 만들기 (0)	2022.05.06
WYSIWYG 문서 편집기능 (0)	2022.05.05
페이지네이션 (0)	2022.05.05
상품 수정하기 (0)	2022.05.05

혼자 깨닫기 위함