[#13] Spring Boot ㅣ 스프링 부트 ㅣ 웹 페이지 만들기 ㅣ html, css사용해서 매칭시키기

오늘은 이전에 만들었던 코드부분을 직접 html을 만들고, css를 적용하고

실제로 동작을 시켜볼 예정이다.

 

html, css수업이 아니기 때문에 코드에 대한 설명은 생략하셨다.

먼저 html과 css를 적용해야한다.

필요한 부분은 회원 가입, 회원 목록, 상품 등록, 상품 목록, 상품 주문, 주문 내역이다.

 

약간의 코드는 생략한다.

 

1. html 매칭시켜주기.

//home Controller


@Controller
@Slf4j
public class HomeController {

    @RequestMapping("/")
    public String home(){
        log.info("home controller");
        return "home";
    }
}

- @RequestMapping("/") 이렇게 작성하면, 기본 링크다. html은 "home"에 매칭이 된다.

- resource > templates 에 home.html을 추가하면 된다.

- css는 BootStrap을 사용한다.

 

이렇게 하면 나오는 문서는

이렇게 나온다.

 

- html을 살펴보면 각 버튼에 href = "/order" 이렇게 추가 되어있다.

- 해당 페이지로 넘어가는 모습이다.

- 각 페이지 전부다 controller가 있을 것이고, 각각 전부 매핑이 되어있다.

 

2. 값을 주고받아야할 때

 

- Get방식 Post방식이 있다. 거의 다 아는 내용이기에 생략한다.

- 스프링에 적용하는 방법은, 다음 코드를 보자.

 

// ItemController.class

@Controller
@RequiredArgsConstructor
public class ItemController {
    private final ItemService itemService;
    @GetMapping(value = "/items/new")
    public String createForm(Model model) {
        model.addAttribute("form", new BookForm());
        return "items/createItemForm";
    }
    @PostMapping(value = "/items/new")
    public String create(BookForm form) {
        Book book = new Book();
        book.setName(form.getName());
        book.setPrice(form.getPrice());
        book.setStockQuantity(form.getStockQuantity());
        book.setAuthor(form.getAuthor());
        book.setIsbn(form.getIsbn());
        itemService.saveItem(book);
        return "redirect:/";
    }

    @GetMapping(value = "/items")
    public String list(Model model){
        List<Item> items = itemService.findItem();
        model.addAttribute("items", items);
        return "items/itemList";

    }

}

 

- Mapping된 페이지에 따라, 값을 주고받는 모습이다.

- 등록된 item을 모두 표시해주어야 하는 "/items"에서는 list를 뽑아준다.

- 상품 등록부분에서는 1개를 등록해주어야 하므로, post를 통해서 책을 생성하고 넘겨주는 모습이다.

 

 

 

 

본 강의는 인프런의 김영한 개발자님이 강의하고 계신

"실전! 스프링 부트와 JPA활용1 - 웹 애플리케이션 개발"을 수강하면서 정리한 글입니다.