TodoList CRUD

8.26(월)

1. toRef

  {{ str1 }} // aaa->zzz
  {{ str2 }} // aaa

const obj = ref({v1:'aaa'})
let str1 = toRef(obj.value, "v1")
let str2 = obj.value.v1

setTimeout(() => {
    obj.value.v1 = 'zzz'
    
}, 3000);

👉 결과값을 보게되면 str1의 값은 zzz로 변경이 되지만, str2는 zzz로 변경이 되지 않는다.
이는 str1은 toRef를 이용하여 obj.value.v1 값을 간접참조하므로 원값이 변경될시 str1값도 변경된다.

const userId = ref({mid:''})

const toMid = toRef(userId.value, "mid")

👉 이러한 점을 이용하여 userId값 또한 toRef를 이용하여 간접참조를 한다.

---

2. Login 구현

2-1. useMember2.js

import { defineStore } from "pinia";
import { computed, ref, toRef } from "vue";


const useMember2 = defineStore('useMember2', ()=> {

    const userId = ref({mid:''})

    const toMid = toRef(userId.value, "mid") // 기존의 ref를 사용하여 참조한다면 1뎁스 까지 참조가 되어 이후 출력할때 제대로된 출력이 불가능하다.
                                            // 코드뜻은 userId.value값 중에서 mid값을 참조하겠다는 말.
                                            

    const signin = (str) => {

        userId.value.mid = str
        localStorage.setItem("mid", str)

    }

    const signout = () => {
        userId.value.mid = ''
        localStorage.removeItem("mid")
    }

    const computedMid = computed(()=> { // computed는 내부에 반응형 객체가 사용될때 그 반응형 객체 값이 변경이 되면 출력값도 변경된 값으로 출력된다.

        if(!localStorage.getItem("mid")) {
            return ''
        }

        if(localStorage.getItem("mid")){ 
            userId.value.mid = localStorage.getItem("mid")
        }

        if(toMid){
            return toMid
        }

        return toMid
    }) 

    return {userId,signin,signout,computedMid}
})

export default useMember2

---

2-2. App.vue

<script setup>
import { RouterLink, RouterView } from 'vue-router';
import useMember2 from './stores/useMember2';

const {signout,computedMid} = useMember2() //useMember.js 에서 member변수와 logout기능을 사용하겠다.
</script>

<template>
  
  <div>
    <span><RouterLink to="/">Main</RouterLink></span> <!--A태그 처럼 생긴 화면이동-->
    <span><RouterLink to="/about">About</RouterLink></span>
    <span><RouterLink to="/todo">Todo</RouterLink></span>


    <span v-if="computedMid===''"><RouterLink to="/login">Login</RouterLink></span>
    <span v-if="computedMid!==''"><button @click="signout">Logout</button></span>
  </div>

  <div>
    <hr/>
    USERID : {{ computedMid }}
    <hr/>
  </div>

  <RouterView></RouterView> <!--라우터로 이용된 페이지를 출력-->
</template>


<style scoped>

span{
  margin-left: 1em;
}

</style>

---

2-3. LoginPage.vue

<template>
    <div>
        <h1>Login Page</h1>
        <input type="text" v-model="midInput">
        <button @click="handleClick">Login</button>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import useMember2 from '../stores/useMember2';

const {signin} = useMember2() // useMember.js의 login 기능 사용

const midInput = ref('')

const handleClick = () => {

    const mid = midInput.value // input text 로 입력한 id 값을 mid변수에 넣고

    signin(mid) // store에 저장된 signin메소드에 mid 인자를 넣어 호춣
}

</script>

<style lang="scss" scoped>

</style>

---

3. paging

3-1. todoListComponent.vue

<template>
    <div>
      <div v-if="loading" class="loadingDiv">
        <h1>Loading.............</h1>
      </div>
  
        <ul>
          <li v-for="t in result.content" :key="t.tno" @click="()=>handleClickMove(t.mno)">
            {{ t }}
          </li>
        </ul>
  
        <template v-for="(p,idx) in pageArr" :key="idx">
          <span class="pageSpan" @click="() => handleClickPage(p.page)" > {{p.label}} </span>
        </template>
  
    </div>
  </template>
  
  <script setup>
  
  import { getList } from '../../apis/todoAPI';
  import useListData from '../../hooks/useListData';
  
  const {loading, moveToRead, router, route, refresh, result, pageArr} = useListData(getList)
  
  const handleClickPage = (pageNum) => {
    
    const currentPage = route.query.page || 1 // page쿼리값이 있으면 가져오고 없으면 1
  
    router.push({query: {page:pageNum} }).then(() => {
      if(currentPage == pageNum){ // 현재 페이지 버튼을 누르면
        refresh.value = !refresh.value // refresh
      }
      
    })
  }
  
  const handleClickMove = ( tno )=> {
  
    moveToRead(tno)
  }
  
  
  </script>
  
  <style scoped>
  
  .loadingDiv {
    position: absolute;
    top: 30vh;
    left: 40vw;
    width: 20vw;
    height: 10vh;
    background-color: aqua;
  
  }
  
  .pageSpan {
    margin: 0.3em;
    padding: 0.1em;
    border: 1px solid black;
  }
  
  </style>

---

3-2. useListData.js

import { computed, onMounted, ref, watch } from 'vue';
import { onBeforeRouteUpdate, useRoute, useRouter } from 'vue-router';


const useListData = (listFn) => {

  const fn = listFn

  const route = useRoute()
  const router = useRouter()
  
  const loading = ref(false)
  const refresh = ref(false)

  const result = ref({
    content:[],
    number:0,
    size:10,
    totalElements:0,
    totalPages:0
  })
  
  const loadPageData = async (page) => {

    loading.value = true
    const data = await fn(page)

    result.value = data
    loading.value = false
    
  }

  const pageArr =  computed(() => {

    //현재 페이지 번호 
    const currentPage = result.value.number + 1

    //마지막 페이지 번호  -  올림( 페이지번호/10.0 ) * 10 

    let lastPage = Math.ceil( currentPage/10.0 ) * 10

    //시작 페이지 번호
    const start = lastPage - 9 

    //이전, 다음 
    const prev = start !== 1
    const next = result.value.totalPages > lastPage

    if(result.value.totalPages < lastPage){
      lastPage = result.value.totalPages
    }


    //페이지 번호에 출력에 필요한 데이터를 배열로 
    const pageArr = []

    //이전
    if(prev){
      pageArr.push({page: start -1, label:'이전' })
    }

    for(let i = start; i <= lastPage ; i++){
      pageArr.push({page: i, label: i })
    }
    //다음
    if(next){
      pageArr.push({page: lastPage + 1, label:'다음' })
    }
    return pageArr
  })


  onMounted(() => { // 데이터를 로드하는 역할

    loadPageData(route.query.page || 1)

  })

  watch(refresh, ()=> { // refresh값을 감지하여 refresh되면 loadPageData호출

    loadPageData(route.query.page || 1)
  })

  onBeforeRouteUpdate((to, from, next) => { // 사용자가 페이지를 변경할때 (페이지 번호클릭해서 url변경시)

    loadPageData(to.query.page || 1)
    next()
    
  })

  const moveToRead = (tno) => {
    router.push(`/todo/read/${tno}`)
  }

  return {loading, moveToRead, router, route, refresh, result, pageArr}

}

export default useListData

---

4. Read

4-1. todoApi

export const getOne = async(mno) => {

    const res = await axios.get(`${host}/${mno}`)
    return res.data
  }

---

4-2. todoReadComponent.vue

<template>
    <div>
      {{ todo }}
    </div>
  </template>
  
  <script setup>
  import { ref, onMounted } from 'vue';
  import { useRoute } from 'vue-router';
  import { getOne } from '../../apis/todoAPI';
  const route = useRoute()
  const mno = route.params.mno // routers에서 url주소에 mno값을 넣은뒤에  
  const todo = ref({
    mno:0,
    title:'',
    writer:'',
    dueDate:''
  })
  onMounted(()=> {
    console.log("mno: " + mno)
    getOne(mno).then(data => todo.value = data) // api에서 받은 data값을 ref값에 대입
  })
  </script>
  
  <style lang="scss" scoped>
  </style>

---

4-3. todoReadPage.vue

<template>
    <div>
        <h1>Todo Read Page</h1>
        <todoReadComponent></todoReadComponent>
    </div>
</template>

<script setup>
import todoReadComponent from '../../components/todo/todoReadComponent.vue';


</script>

<style lang="scss" scoped>

</style>

---

5. ADD

5-1. TodoAPI.js

export const postOne = async (obj) => { // 등록

    const res = await axios.post(`${host}`, obj) // post는 원래 매개변수가 2개
  
    return res.data
  
}

---

5-1. TodoAddComponent.vue

<template>
    <div>
      <h1>Todo Add Component</h1>
      <div>
        <input type="text" v-model="todo.title" >
      </div>
      <div>
        <input type="text" v-model="todo.writer" >
      </div>
      <div>
        <input type="date" v-model="todo.dueDate" >
      </div>
      <div>
        <button @click="handleClick" >ADD</button>
      </div>
    </div>
  </template>
  
  <script setup>
  import { ref } from 'vue';
  import { postOne } from '../../apis/todoAPI';
  import { useRouter } from 'vue-router';
  const router = useRouter()
  const todo = ref({ // api에서의 obj값
    title:'',
    writer: '',
    dueDate: ''
  })
  const handleClick = async ()=> {
    console.log(todo.value)
    const res = await postOne(todo.value)
    alert(res.mno)
  }
  </script>
  
  <style lang="scss" scoped>
  </style>

---

5-2. TodoAddPage.vue

<template>
    <div>
        <h2>Todo Add Page</h2>
        <TodoAddComponent></TodoAddComponent>
    </div>
</template>

<script setup>
import TodoAddComponent from '../../components/todo/TodoAddComponent.vue';
</script>

<style lang="scss" scoped>

</style>

---

6. DELETE

6-1. todoAPI.js

export const deleteOne = async (mno) => { // 삭제

    const res = await axios.delete(`${host}/${mno}`)
  
    return res.data

}

---

6-2. TodoEditComponent.vue

<template>
    <div>
      {{ todo }}
    </div>
    <div>
      <button @click="handleClickDelete">DELETE</button>
    </div>
  </template>
  
  <script setup>
  import { ref, onMounted } from 'vue';
  import { useRoute, useRouter } from 'vue-router';
  import { deleteOne, getOne } from '../../apis/todoAPI';
  import useMember2 from '../../stores/useMember2';
  const route = useRoute()
  const router = useRouter()
  const mno = route.params.mno
  const {computedMid} = useMember2()
  const handleClickDelete = () => {
    deleteOne(mno)
    router.replace("/todo/list")
  }
  const todo = ref({
    mno:0,
    title:'',
    writer:'',
    dueDate:''
  })
  onMounted(()=> {
    console.log("mno: " + mno)
    getOne(mno).then(data => todo.value = data)
  })
  </script>
  
  <style lang="scss" scoped>
  </style>

---

6-3. TodoEditPage.vue

<template>
    <div>
      <h1>Todo Edit Page</h1>
      <TodoEditComponent></TodoEditComponent>
    </div>
  </template>
  
  <script setup>
  import TodoEditComponent from '../../components/todo/TodoEditComponent.vue';
  </script>
  
  <style lang="scss" scoped>
  </style>

---

7. Edit

7-1. TodoAPI.js

export const putOne = async (todo) => { // 수정

    const res = await axios.put(`${host}/${todo.mno}`, todo)
  
    return res.data
  
}

---

7-2. TodoEditComponent.vue (수정 추가 ver)

<template>
    <div v-if="error !== null">ERROR {{ error }}</div> <!--에러가 있으면 에러메세지표시 -->

<div v-if="error === null">
  <div>
    <input type="text" v-model="todo.mno" readonly> <!--mno, wrtier는 수정불가능-->
  </div>
  <div>
    <input type="text" v-model="todo.title" >
  </div>
  <div>
    <input type="text" v-model="todo.writer" readonly >
  </div>
  <div>
    <input type="date" v-model="todo.dueDate" >
  </div>
  <div>
    <button @click="handleClickModify">MODIFY</button>
    <button @click="handleClickDelete">DELETE</button>
  </div>
</div>
  </template>
  
  <script setup>
  import { ref, onMounted } from 'vue';
  import { useRoute, useRouter } from 'vue-router';
  import { deleteOne, getOne, putOne } from '../../apis/todoAPI';
  import useMember2 from '../../stores/useMember2';
  const route = useRoute()
  const router = useRouter()
  const mno = route.params.mno
  const {computedMid} = useMember2()

  const handleClickModify = () => {
  putOne(todo.value).then(result => { 
    router.replace(`/todo/read/${mno}`) // replace를 사용하면 현재 페이지의 히스토리가 삭제되므로 수정 및 삭제에서는 push 보단 replace
  })
}

  const handleClickDelete = () => {
    deleteOne(mno)
    router.replace("/todo/list")
  }
  const todo = ref({
    mno:0,
    title:'',
    writer:'',
    dueDate:''
  })

  const error = ref(null)

  onMounted(()=> {
    getOne(mno).then(data => todo.value = data).catch((err) => { // getOne이 성공적으로 되면 then으로 가지만 실패한다면 catch문
    error.value = err.response.data.message //error의 response속성중 data속성의 message
  })
})
  </script>
  
  <style lang="scss" scoped>
  </style>

---

7-3. TodoEditPage.vue

<template>
    <div>
      <h1>Todo Edit Page</h1>
      <TodoEditComponent></TodoEditComponent>
    </div>
  </template>
  
  <script setup>
  import TodoEditComponent from '../../components/todo/TodoEditComponent.vue';
  </script>
  
  <style lang="scss" scoped>
  </style>