2019.06.04_ 게시판 CRUD 작성 및 로그인 폼 작성

[sej226]

1. 게시판 CRUD 작성

• spa(Sigle Page Application)로 개발하기 위해 사용하기 위해 라우팅 라이브러리 Vue-Routers 를 사용함

const routes = [  
       { path: '/route1', component: allHumor },
       { path: '/route2', component: datailHumor },
       { path: '/route3', component: updateHumor },
       { path: '/route4', component: createHumor },
       { path: '/route5', component: findHumor }
    ];

    const router = new VueRouter({
       routes   
    });

    var App=new Vue({
      el: '#app',
      router
    })

• 게시글 상세 조회

  <router-link v-bind:to = "{path:'route2?pk='+ text.humorPK}" > 

  클릭시 게시글 PK를 가지고 route2로 라우팅

  /route2 - detailHumor 에서 get('/api/selectHumorByNum/' + this.pk) 
  MainController selectHumorByNum(@PathVariable int humorPK) 호출

• 

• 게시글 수정

  <router-link v-bind:to = "{path:'route3?pk='+ humor.humorPK}" > 수정   </router-link>

  클릭시 게시글 PK를 가지고 route3로 라우팅

  /route3 - updateHumor의 updateH() 메소드 호출 axios.post('/api/updateHumor')
  MainController의 updateHumor(@RequestBody Humor humor) 호출

• 게시글 삭제

  <a v-on:click="deleteH"> 삭제   </a><hr>   

  클릭시 deleteH(rPK) 함수 호출

• deleteR(rPK)

  .delete('/api/deleteHumorReply/' + rPK)
  MainController의 deleteH(@PathVariable int humorPK) 호출

• 

3. Today 이슈

• vue.js를 활용하여 뷰페이지에 대한 처리를 하는데, 처음에는 함수를 통해 구현하려 했으나 코드의 중복 사용과 코드의 길이가 길어져 router 기술을 사용하여 뷰페이지를 재구성했음. 컨트롤러에서 저장된 세션의 값을 받아오기에는 vue.js에 대한 이해가 부족. 로그인 상태를 저장하기 위해서는 세션을 사용해야하는데 jsp에 대한 사용법을 확인해야함.