(국비교육) 76 - Spring boot + vue 게시판 만들기 2 + Quill+ 12회차 시험

■ 글쓰기 버튼 만들기 (sep19)

 

 

글쓰기 버튼을 만든다. 

 

 

다음과 같이 만들어진다. 

 

 

 

write 메소드를 만들어주고 이동 확인하면 된다.

 

 

WritePage.vue 생성해준다. 

 

 

index.js 에 Writepage 도 라우터에 넣어준다. 

 

 

글쓰기 영역도 만들어준다. 

 

<style>
.write{
    margin: 0 auto;
    padding: 5px;
    width: 800px;
    height: 500px;
    background-color: bisque;
}

.write input{
    width: 100%;
    height: 30px;
}

.write textarea{
    width: 100%;
    height: 300px;

}

</style>

 

글쓰기 부분도 꾸며준다. 

 

 

input : title

content: textarea 로 설정한다. 

 

 

v 모델을 사용할 것이다. 

v 모델을 적으면 하단의 return 값이 들어간다. 

 

 

 

우리가 입력한 값을 끌고 갈 것이다. 

write 글쓰기 메소드를 만들어주고 알람이 뜨게 한다. 

 

this.title 을 적어줘야 어떤 값인지 인식하고 가져온다. 

 

 

제목에 입력한 값이 알람창으로 뜬다. 

 

 

saveData 로 저장한 값을 담는다. 

 

* 요청사항

vue 책 다 읽고 nextScript 알아오기

 

 

데이터 연결 위해 axios 불러준다. 

 

 

axios 방식에서 

get 방식 : select 된 내용 확인할 때 사용 

post 방식 : save 저장할 때 사용

 

 

post() 안에는 어디로 보낼지에 대한 주소를 적는다. 

JSON.stringfy는 saveData를 JSON  형태로 변환시켜서 내보내는 것이다.

 

wirte 라는 메소드 내보낼 때 json 이라는 헤더 가지고 가는 것이다. 

 

then 에는 가져올 때 사용된다.

 

"Content-Type"은 전송하는 데이터의 형식을 나타내며,

"application/json"은 JSON 형식으로 데이터를 전송한다는 것을 의미한다.

 

 

PostMapping 처리를 하고 글을 쓰고 글쓰기 버튼을 누른다.

 

 

데이터 값 전송되는 것 확인된다. 

 

 

json 형태로 받기 때문에 @RequestBody 로 받는다.받은 값을 DB 에 INSERT 로 저장할 것이다.

 

 

메서드 만들어준다.

 

 

받지 않는 ip 와 m_id 는 우선 하드코딩한다.

이후에는 util 만들어서 설정할 것이다. 

 

 

 

다음과 같이 글이 정상적으로 들어가는 것 확인 가능하다. 

 

 

DB 에서 받은 값이 1인 경우 데이터 베이스에 글을 저장했다는 알람창이 뜨게 한다. 

 

 

데이터 베이스에 글이 저장되면 다음과 같이 알림이 뜬다. 

 

■ Quill

 

vue 에서 Quill 사용하기

 

https://vueup.github.io/vue-quill/guide/usage.html

VueQuill

https://hjh0827.tistory.com/76

[vue.js] vue-quill-editor 사용법 및 옵션(options) 설정

https://taehee98.tistory.com/entry/Vuejs-vue3%EC%97%90%EC%84%9C-quill-editor-%EC%82%AC%EC%9A%A9%EB%B0%A9%EB%B2%95

[Vue.js] vue3에서 quill editor 사용방법

https://vueup.github.io/vue-quill/guide/

VueQuill

 

■ Detail 만들기

 

 

bno 값을 받고 필수로 받도록 한다. 

 

 

디테일 값 받아오게 설정한다. 

json 객체에 바로 값 넣어도 되고 json.put() 으로 넣어도 된다. 

 

 

다음과 같이 bno 값을 가져가고 해당 값과 DB에 있다면 그 결과를 받아서 출력해준다. 

 

 

화면과 같이 정사적으로 출력된다. 

 

* 12회차 시험