(국비교육) 83 - Spring boot + vue 게시판 만들기 ( 아이디 유효성 검사 + 세션 + 수정/삭제버튼 비활성화 + index 페이지 만들기)

■ 아이디 유효성 검사

 

 

v-if 가 참인 경우 해당 문구가 나오게 설정한다.

 

 

문구가 처음에는 안나오도록 false 처리 한다. 

 

 

Vue 인스턴스의 데이터 변경을 관찰 / 반응할 때 watch 기능을 쓴다.

입력 시 idInputCheck true 이기 때문에 문구가 뜬다. 

 

 

길이가 5보다 작은 경우에는 문구가 뜨게 설정하고,

그렇지 않을 경우 문구가 없어지게 설정한다.

 

 

exec 를 통해 reg 에 해당하는 값이 있는지를 체크한다.

비어있지 않은 경우 그 값을 나오게 설정해서 동작하는지 확인한다. 

 

 

해당하는 값이 있는경우 slice 를 통해 더이상 입력하지 않게 설정 가능하다. 

 

 

/\s/ 공백을 찾아서 != -1 으로 공백이 있는 경우 문구가 뜨게 설정한다. 

 

https://v2.ko.vuejs.org/v2/guide/computed.html

computed와 watch — Vue.js

 

 

DB에 값이 있다면 세션에 해당 값을 저장해준다. 

 

 

f5 를 눌러도 세션을 통해 저장한 값을 local storage 에서 f5를 눌러도 가져올 수 있도록 설정한 것이다. 

 

 

세션 유지시간을 30분 유지시키는 것이다.

두 개 모두 같은 말이다.

 

 

m_id 추가해서 m_id 가 같은 경우에만 수정 삭제 버튼 뜨게 설정하기

 

 

내가 쓴 글과 댓글에만 수정/삭제 버튼이 뜬다. 

 

 

userInfo 에 해당 내용 저장해주고, 만약 userInfo 에 있는 m_name 이 있을 경우에만 댓글쓰기 버튼을 활성화한다. 

 

 

로그인 안했을 경우 다음과 같이 댓글쓰기 버튼이 없다. 

 

 

write 도 로그인 하지 않았을 경우 login 페이지로 돌아가게 한다. 

 

 

vue.config 를 /api 로 바꿔준다. 

왜냐면 같이 쓰고 있어 자꾸 서버로 보내기 때문에 api 를 붙여서 vue 가 잡을 수 있게 해준다. 

 

 

userInfo 값 동일하게 넣어주고, 그 값을 saveData.m_id 로 저장해준다.

 

 

하드코딩 부분을 주석처리하고, 글을 쓰면 이제 로그인한 작성자로 이름이 들어간다.

 

 

댓글쓰기도 동일하게 해준다.

 

 

index 에 최신글과 댓글 많은 순으로 뜨게 설정해준다.

 

 

commentcount 기준으로 5개만 보이게 설정한다. 

 

 

indexPage 가 3개의 리스트를 반환하게 만들어주고,

index() 라는 메서드를 만들고 이를 mounted 로 부르게 설정한다.

 

 

서버 통해서 받아온 값들을 연결시키고 찍어준다. 

 

 

값을 넣고 스타일도 넣어준다.

 

 

화면에 다음과 같이 list 와 cmtTop5 가 나란히 찍힌다. 

 

※ 리눅스

 

 

80번 포트로 구동중인 게 무엇인지 알려준다.