Vue.js29 vue.js [로그인기능 (추가)] 지난번까지 로그인을 해서 Home 화면을 불러 오는데 까지 성공하였고 이번에는 로그인한 후 그 회원 email을 BoardWrite로 넘기도록 하였다. 토큰과 마찬가지로 userId를 email에 넣어줘서 data2를 만들어 같이 넘어가도록 담아주었다. 글 추가하기 항목에서 사용자의 ID(store에 저장된) 를 불러와 주도록 하였다. Home.vue에서 header에 토큰을 불러왔던 형식처럼 그대로 email을 불러옴 글 추가하기 버튼을 눌러 확인해보니 로그인하여 store에 저장된 email이 그대로 작성자 항목에 들어가 있는것을 볼 수 있다! 이제 게시판의 대부분의 기능은 만들어 보았고 새로운 게시판이 들어간 웹을 만들기 위해 새 프로젝트를 만들어 보려고 한다. 2022. 6. 13. vue.js [로그인] 댓글기능까지 모두 만들고 이제 통합으로 회원가입, 로그인 하는 기능을 만들려고한다. 기존의 backend에서 기능을 만들고 PostMan으로 회원가입을 시켜 놓은 상태이고 DB에 member가 저장되어 있는 상태이고 우선 vue에서 login.vue를 만들고 로그인 기능부터 만들 예정이다. ui는 다음과 같이 만들었고 로그인을 할 시 토큰이 생성되면 그것을 가져와 Home.vue에 토큰 실어주도록 할 것이다. Login.vue userId userPassword Login http://localhost:8081/#/Login에서 로그인을 해보면 정상적으로 data에 토큰이 생성된 것을 볼 수있고 그 토큰을 담아서 Home.vue를 볼 수 있도록 헤더에 토큰을 실어 주었다. Home.vue의 url의 헤더.. 2022. 6. 10. vue.js [댓글 수정/삭제] 이번에는 댓글을 수정, 삭제하는 기능을 만들어 보았다. 수정, 삭제를 할 수 있도록 아이콘 버튼을 vuetify에서 가져와 댓글 목록에 추가하였다. Board.vue의 표시한 윗부분이 수정아이콘, 밑부분이 삭제 아이콘 삭제 아이콘을 클릭하면 cid와 같이 CommentDelete로 넘어가도록, 수정 아이콘을 클릭하면 cid, bid와 같이 CommentChange로 넘어가도록 하였다. 수정하기에서 cid, bid를 같이 넘긴 이유는 수정하기 페이지에서 취소 버튼을 클릭하면 그전 해당 Board의 글로 이동시키기 위해 bid를 가져왔다. change 메서드는 Board의 수정하기와 거의 동일함으로 설명 생략 반면에 CommentDelete에서 취소 버튼을 클릭하면 해당 글로 이동시킬때 다른 방법으로 라우터.. 2022. 6. 8. vue.js [댓글 추가] 게시글의 댓글을 추가하는 기능을 만들어 보았다. bid (board id)값을 CommentWrtie에 함께 넘겨 줘서 해당하는 글에 comment를 추가해야 한다. Board와 거의 형태는 비슷하고 라우터 부분을 신경쓰는것이 포인트 comment를 추가할때 password, 작성자, 내용을 작성하도록 하고 나중에 수정, 삭제를 할때 이때 db로 저장된 password를 사용 할 것이다. Board.vue에서 댓글 추가 버튼을 누르면 bid가 같이 이동하도록 라우터 설정. BoardWrite를 만들때와 거의 유사하기 때문에 상세 코드내용은 생략하였다. (BoardWrite 블로그 게시글 참고) CommentWrite 작성 backend에서는 댓글 작성시 자동으로 현재날짜, 시간을 불러와 주도록 하였다. .. 2022. 6. 8. vue.js [상세페이지 안 댓글 만들기] 이번에는 글목록으로 들어가면 상세페이지에서 댓글을 같이 보여주도록 하는 기능을 만들었다. backend에서 Board 디렉토리를 참고하여 Comment 디렉토리를 만들었다. 상세페이지에서 Comment를 보여주어야하기 때문에 Board.vue에서 코드 추가. comment의 항목에는 글의 id값, 작성자, 내용, 날짜, 시간 항목을 넣었다. 앞서 게시글을 보여줬던 형식의 테이블을 가져와서 사용하였고 원하는 항목들을 넣어서 만들었다. comment를 get방식으로 불러오는 retrieveUsers2를 메서드를 추가하였다. 게시판을 확인해보니 성공적으로 상세페이지의 하단에 댓글리스트가 보여진다. 다음 게시글에서는 댓글을 추가, 수정, 삭제하는 기능을 넣을 예정이다. 2022. 6. 7. vue.js [검색창 만들기] 이번에는 keyword를 입력하면 그에 해당하는 글을 자동으로 검색해주는 검색창을 만들어 보았다. 처음에는 backend에 수정하여 만들려고 했으나 vuetify를 사용하여 더 간편하고 깔끔하게 만들었다. 참고 https://github.com/vuetifyjs/vuetify/blob/master/packages/docs/src/examples/v-data-table/prop-search.vue GitHub - vuetifyjs/vuetify: 🐉 Material Component Framework for Vue 🐉 Material Component Framework for Vue. Contribute to vuetifyjs/vuetify development by creating an account o.. 2022. 6. 3. vue.js [글 삭제하기] 지난번 수정에 이어서 바로 글 삭제하는 기능을 추가하였다. 삭제하기 또한 수정하기와 마찬가지로 db안에 저장 되어있는 password와 사용자가 ui에서 입력하는 password가 일치하면 삭제가 되도록 하였다. 그렇기 때문에 ui에서는 비밀번호 입력란만 만들어 넣었다. 삭제를 할때에도 BoardDelete.vue에서 해당하는 글의 id값을 가진 글만 삭제 되도록 하여야 하기 때문에 Board.vue(상세페이지목록) 에서 BoardDelete.vue로 id값이 넘어가도록 linkTo3메서드를 만들었다. 따라서 글 삭제 버튼을 클릭하면 linkTo3메서드가 실행되면서 현재 쿼리의 id값이 BoardDelete로 같이 넘어간다. Backend backend의 컨트롤러에서 "/del" url을 새로 만들었다... 2022. 6. 2. vue.js [게시판 글 수정] 게시판 글 수정하기 큰 틀에서 게시판을 수정하는 frontend인 BoardChange.vue를 일단 만들었다. BoardWrite와 달리 수정 화면에서는 작성자는 변하지 않기때문에 작성자 입력을 제외한 content, subject, password란을 아래처럼 만들어 놓았다. 비밀번호를 입력하고 기존의 db에 저장되어있는 비밀번호와 일치할때 글이 수정되도록 기능을 만들었다. 글 목록에서 상세내용을 불러와 글 하나하나를 볼때처럼 글에 해당하는 id값을 불러오는것이 핵심포인트다. Board에서 수정하기 버튼을 누를때 해당 id값의 글의 BoardChange가 불러와 져야 하기 때문에 Board.vue에 linkTo2함수를 만들어 추가하였다. Backend에서는 Putmapping을 사용하지 않고 Post.. 2022. 6. 1. vue.js [게시판 글 쓰기] 지난번 글 제목을 클릭하여 상세페이지를 띄우는 단계까지 진행하였고 Home화면의 게시판에 글을 작성하는 기능을 추가하였다. 우선 /Home에서 게시판의 상단에 글 쓰기 버튼을 추가하여 글쓰기 버튼을 누르면 boardWrite로 이동하여 글 작성을 할 수 있게한다. linkTo 함수를 만들고 클릭하면 넘어 갈수 있도록 만들었다. BoardWtite로 넘어가도록 link1 선언 기존에는 router-link를 사용하였는데 linkTo함수를 만들어서 linkTo안에 data를 넣고 여러개의 버튼을 추가 할때마다 간단하게 사용할 수 있도록 link1선언 후 BoardWrite를 넣음. 결국 linkTo의 data안에는 link1이 들어가게 된다. BoardWrite.vue에서 이제 글을 추가할 수 있는 기능이 .. 2022. 5. 27. 이전 1 2 3 4 다음
