티스토리 뷰

웹/SpringBoot,게시판 만들기

[SpringBoot]5/29

cll179 2018. 6. 1. 13:10

1.WebBoard 다운로드 및 압축해제

2.WebBoard 임포트(Import)

import → Maven → Existing Maven Projects → Root Directory : Browse

WebBoard 선택, Finsih

실행 후 브라우저로 잘 되는지 확인.

localhost:8080/boards/list

3. 데이터 다 가져오기, 그리고 화면에 출력하기

데이터 전부 가져오기

- findAllBy
오름차순 정렬
- OrderBy
모델의 Updates(updatedata) 기준
- Updates Asc();

board → src/main/java → ks.ac.ks.board → WebBoardRepository.java

*WebBoardRepository.java

1
2
3
4
5
6
7
8
9
10

package kr.ac.ks.board;
 
import org.springframework.data.repository.CrudRepository;
 
import java.util.List;
 
public interface WebBoardRepository extends CrudRepository<WebBoard, Long> {
    List<WebBoard> findAllByOrderByUpdatedateAsc(); //대소구분 명확히. updatedate도 대소구분!
    
}
Colored by Color Scripter

cs

src/main/resources/templates/boards -> list.html 데이터 가져오기

board → src/main/java → ks.ac.ks.board → WebBoardRepository.java

*webBoardController.java

1
2
3

@GetMapping("/list")
    public void list(Model model){
    }

cs
 
▼
▼아래와 같이 수정
▼



1
2
3
4

@GetMapping("/list")
    public void list(Model model){
        model.addAttribute("result",repo.findAllByOrderByUpdatedateAsc());
    }
Colored by Color Scripter

cs
 
 
실행 후 http://localhost:8080/boards/list 로 확인
아무 숫자 클릭 후 삭제해보기  → @GetMapping("/delete/{bno}")이 동작
 
@GetMapping("/{bno}") 
- request mapping url, 게시물 bno 클릭했을때 뜨는 url
*webBoardController.java




1
2
3
4
5
6
7
8
9

@GetMapping("/{bno}")//request mapping url,게시물 bno 클릭했을때 뜨는 url
    public String view(@PathVariable("bno") long bno, Model model){
        if (repo.findById(bno).isPresent()) {                            //bno 있으면
            model.addAttribute("result", repo.findById(bno).get());     //get            
        } else {                                                        //없으면
            return "errors/404";                                        //에러
        }
        return "boards/view";
    }
Colored by Color Scripter

cs
 
 
http://localhost:8080/boards/(bno번호) → 존재하면 해당 bno의 게시물 출력, 없으면 404 에러 페이지
 
update 구현ex) 11번 클릭했을 때 할 일
 1)11번 get       ------->ById?
 2)11번 수정      -------> 1번, set(수정,get)
 3)11번 저장     --------> save
    -> 11번 or 11번'(프라임) 나와야..
 
11번을 수정하기 위해 get(html파일) 필요
form을 만들어야한다

form 만들기

아래 코드를 추가

*webBoardController.java

1
2
3
4
5

@GetMapping("/update/{bno}")
    public String updateGet(@PathVariable("bno") long bno, Model model) {    //void이면 안된다 Spring 타입이여야..
        model.addAttribute("vo", repo.findById(bno).get());                    //.get()으로 불러와야한다. findById가 optional이기 때문
        return "boards/update";                                             //update.html이 출력된다.
    }
Colored by Color Scripter

cs

이제 불러와서 화면에 출력해야한다. 뭐로 출력 ? → form.html

boards 폴더에 update.html 파일 만들고 여기에다 register.html 파일을 복사해서 붙여넣기
그리고 실행 http://localhost:8080/boards/update/11 -> 500 에러가 일어난다.

update.hml 파일을 아래와 같이 수정한다.

*update.html(이후 과정까지 이미 완성된 파일, 수업때 진행했던 시행착오과정 생략, 이후 과정결과가 다를 수 있음)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

    <html xmlns:th="http://www.thymeleaf.org"
          xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
          layout:decorate="~{/layout/webboard_layout}">
    
    <div layout:fragment="content">
    
        <div>
            <form th:action="@{/boards/update}" method="post">
            
                <div class="form-group">
                    <label>BNO</label>
                    <input readonly="readonly" class="form-control" name="bno" th:value="${vo.bno}" placeholder="Title text here." /><!--readonly="readonly"로 수정 불가능하게-->
                </div>
                
                <div class="form-group">
                    <label>Title</label>
                    <input class="form-control" name="title" th:value="${vo.title}" placeholder="Title text here." />
                </div>
    
                <div class="form-group">
                    <label>Content</label>
                    <textarea class="form-control" rows="3" name="content" th:text="${vo.content}" placeholder="Content text here."></textarea>
                </div>
    
                <div class="form-group">
                    <label>Writer</label> <input class="form-control" name="writer" th:value="${vo.writer}" placeholder="Writer text here."/>
                </div>
    
                <button type="submit" class="btn btn-primary">Submit Button</button>
                <button type="reset" class="btn btn-warning">Reset Button</button>
            </form>
    
        </div>
    
    </div>
Colored by Color Scripter

cs

그리고 WebBoardController.java에서 @GetMapping("/update/{bno}")의 속성값을 변경한다.

◆ result -> vo 로 수정

*WebBoardController.java

1
2
3
4
5

@GetMapping("/update/{bno}")
    public String updateGet(@PathVariable("bno") long bno, Model model) {//void이면 안된다 Spring 타입이여야..
        model.addAttribute("vo", repo.findById(bno).get());
        return "boards/update"; //update.html이 출력된다.
    }
Colored by Color Scripter

cs

그리고 실행 후 submit 버튼 누르면 에러 뜬다.
why? 경로가 없음, update로 보내야한다.

controller에서 업데이트를 만들어야함

*WebBoardController.java

1
2
3
4
5
6
7
8
9
10

@PostMapping("/update")
    public String updatePOST(@ModelAttribute("vo") WebBoard vo){
        WebBoard webBoard=repo.findById(vo.getBno()).get();
        webBoard.setTitle(vo.getTitle());
        webBoard.setContent(vo.getContent());
        webBoard.setWriter(vo.getWriter());
        repo.save(webBoard);
        return "redirect:/boards/list";
        
    }
Colored by Color Scripter

cs

그리고 update.html 파일을 아래와 같이 수정(위에서 먼저 언급했던 500에러 이후 파일과 상동)

*update.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

    <html xmlns:th="http://www.thymeleaf.org"
          xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
          layout:decorate="~{/layout/webboard_layout}">
    
    <div layout:fragment="content">
    
        <div>
            <form th:action="@{/boards/update}" method="post">
            
                <div class="form-group">
                    <label>BNO</label>
                    <input readonly="readonly" class="form-control" name="bno" th:value="${vo.bno}" placeholder="Title text here." /><!--readonly="readonly"로 수정 불가능하게-->
                </div>
                
                <div class="form-group">
                    <label>Title</label>
                    <input class="form-control" name="title" th:value="${vo.title}" placeholder="Title text here." />
                </div>
    
                <div class="form-group">
                    <label>Content</label>
                    <textarea class="form-control" rows="3" name="content" th:text="${vo.content}" placeholder="Content text here."></textarea>
                </div>
    
                <div class="form-group">
                    <label>Writer</label> <input class="form-control" name="writer" th:value="${vo.writer}" placeholder="Writer text here."/>
                </div>
    
                <button type="submit" class="btn btn-primary">Submit Button</button>
                <button type="reset" class="btn btn-warning">Reset Button</button>
            </form>
    
        </div>
    
    </div>
Colored by Color Scripter

cs

실행 후 내용을 수정하면 수정한 내용이 반영된다.

저작자표시 비영리 변경금지

'웹 > SpringBoot,게시판 만들기' 카테고리의 다른 글

[SpringBoot]5/15 (2)	2018.05.24
[SpringBoot]5/8 (0)	2018.05.14
[SpringBoot]MySQL 설치 및 테스트 (2)	2018.04.27
[SpringBoot]스프링부트 프로젝트 생성하기 (0)	2018.04.27

공지사항

깃허브(GitHub) 주소입니다.

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

링크

TAG more

« 2024/11 »
일	월	화	수	목	금	토
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30

글 보관함

Andamiro25