Vue 일지 #19 (20210928) spring 연동(정보 수정)

19. 정보 수정

백엔드 내용#37

-정보 수정

 *manu7 생성(Menu7.vue)

menu7 생성

 

  *정보 수정 화면 구성(Menu7.vue)

... ...

    <div>

         <h3>회원 정보 변경</h3>

        <hr />

        아이디  <input type="text" v-model="userid"> <br />

        이름 <input type="text" v-model="username"> <br />

        연락처 <input type="text" v-model="usertel"> <br />

        

        <input type="button" @click="handleUpdate" value="정보 수정"/>

    </div>

... ...

 

 *menu7 등록(index.js)

 

... ...

import Menu7 from '@/components/Menu7'

... ...

{ path:'/menu7', name:"Menu7", component:Menu7 },

... ...

 

 *화면 확인

정보 수정 화면

 

 *정보 수정 구현(Menu7.vue)

 *토큰을 받아온 뒤 구현이 가능하도록 조건문을 삽입하고 토큰이 없는 경우 로그인 페이지로 이동한다.

 *백엔드에서 만든 member_update를 사용한다.

 *토큰을 받아와야 하므로 token을 data에 등록한다.

 

<script>

    import axios from 'axios';

    export default {

        methods:{

            async handleUpdate(){

                const key = "123456_"

                const url = "/ROOT/api/member_update";

                const headers = {"Content-Type":"application/json",

                    token : key + this.token}

                const body = {

                    userid : this.userid,

                    username : this.username,

                    usertel : this.usertel,

                }

                if(this.token != null){ <- 세션 스토리지에 토큰 유무를 확인

                    const response = await axios.put(url, body, {headers});

                    console.log(response.data);

                    if(response.data.status === 200){

                        alert("수정 완료");

                    }

                }

                else{ <- 토큰이 없다면 알림창을 표시하고 로그인 페이지로 이동

                    alert("로그인 후 가능")

                    this.$router.push({name: 'Menu5'});

                }

               

            }

        },

        data(){

            return{

                userid : '',

                username : '',

                usertel : '',

                 //세션 스토리지에서 토큰 읽기

                token : sessionStorage.getItem("TOKEN")

            }

        }

    }

</script>

 

 

 *정보 수정(토큰이 없는 경우)

 *토큰이 없다면 알림창을 출력하고 로그인 페이지로 이동한다.

토큰이 없는 경우

로그인 페이지 이동

 

 *정보 수정(토큰이 있는 경우)

 *로그인을 해 토큰을 세션스토리지에 저장한다.

로그인 후 토큰 저장

정보 수정

정보 수정 확인