Day73 2024.09.04.수 #코딩일기

 

 

 

 

 

npm run dev 해주기, docker에 연결시켰으므로, docker에서 oracle, spring 활성화 시켜주기

folder	views/members
vue	MemberListView.vue

<template>
  <div>
    <h2>회원 목록</h2>
    <hr />
    <div class="row g-3">
      <div v-for="member in members" :key="member.id" class="col-4">
        <MemberItem
          :id="member.id"
          :name="member.name"
          :sal="member.sal"
          @click="goMemberDetail(member.id)"
        >
        </MemberItem>
      </div>
    </div>
  </div>
</template>

<script setup>
import { getMembers } from '@/api/members'
import MemberItem from '@/components/members/MemberItem.vue'
import router from '@/router'
import { ref } from 'vue'
// import { useRouter } from 'vue-router'

// const router = useRouter()
const members = ref([])
const fetchMembers = async () => {
  try {
    const { data } = await getMembers()
    members.value = data
    // totalCount.value = headers['x-total-count'];
    console.log('members.value2-> ', members.value)
  } catch (error) {
    console.error(error)
  }
}
fetchMembers()

const goMemberDetail = (id) => {
  //router.push('/posts/'+id);
  console.log('MemberListView goPage MemberDetail id->', id)
  console.log('MemberDetail typeof id -> ', typeof id)

  //router.push({name: 'MemberDetail'});
  router.push({
    name: 'MemberDetail',
    params: {
      id
    }
  })
}
</script>

<style lang="scss" scoped></style>

view 단

 

 

 

 

folder	src/router
js	index.js

import AboutView from '@/views/AboutView.vue'
import HomeView from '@/views/HomeView.vue'
import MemberCreateView from '@/views/members/MemberCreateView.vue'
import MemberDetailView from '@/views/members/MemberDetailView.vue'
import MemberListView from '@/views/members/MemberListView.vue'
import NestedHomeView from '@/views/nested/NestedHomeView.vue'
import NestedOneView from '@/views/nested/NestedOneView.vue'
import NestedTwoView from '@/views/nested/NestedTwoView.vue'
import NestedView from '@/views/nested/NestedView.vue'
import { createRouter, createWebHistory } from 'vue-router'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'About',
    component: AboutView
  },
  {
    path: '/members',
    name: 'MemberList',
    component: MemberListView
  },
  {
    path: '/members/create',
    name: 'MemberCreate',
    component: MemberCreateView
  },
  {
    path: '/members/detail/:id',
    name: 'MemberDetail',
    component: MemberDetailView,
    props: true
  },
  {
    path: '/nested',
    name: 'Nested',
    component: NestedView,
    children: [
      {
        path: '',
        name: 'NestedHome',
        component: NestedHomeView
      },
      {
        path: 'one',
        name: 'NestedOne',
        component: NestedOneView
      },
      {
        path: 'two',
        name: 'NestedTwo',
        component: NestedTwoView
      }
    ]
  }
]

const router = createRouter({
  history: createWebHistory('/'),
  routes: routes
})

export default router

view 단

 

 

 

folder	src/views/members
vue	MemberDetailView.vue

<template>
  <div>
    <h1>MemberDetailView</h1>
    <h2>{{ member.name }}</h2>
    <p>{{ member.sal }}</p>
    <hr class="my-4" />
    <!-- <p>params: {{ $route.params }}</p>
    <p>Query: {{ $route.query }}</p>
    <p>hash: {{ router.hash }}</p> -->
  </div>
</template>

<script setup>
import { ref } from 'vue'

// import { useRoute } from 'vue-router'

const props = defineProps({
  id: String
})
// const route = useRouter()

const member = ref({
  name: null,
  sal: null
})

const fetchMembers = async () => {
  console.log('1. memberPostValue props.id -> ', props.id)
  //오류발생지점
  const { data } = await getMemberById(props.id)
  console.log('3.PostDetailValue data -> ', data)
  SetMember(data)
}

const SetMember = ({ name, sal }) => {
  member.value.name = name
  member.value.sal = sal
}
fetchMembers()

//const goListPage = () => router.push({ name: 'MemberList' })
</script>

<style lang="scss" scoped></style>

view 단

 

 - vb3 set-up으로 해주기

 

 

 

 

 

 

 

 

 

folder	src/components/members
js	member.js

import axios from 'axios'

export function getMembers() {
  console.log('getMembers Start...')
  //axios는 ajax 프로그램과 같은
  return axios.get('http://localhost:8389/restApi/v1/members') //Risk API
}

//신규 members 등록
export function createMember(data) {
  console.log('신규 members 등록(createMember)..')
  console.log('신규 members 등록 data ->' + data)
  return axios.post('http://localhost:8389/restApi/v2/memberSave', data)
}

//단일 member 조회
export function getMemberById(id) {
  console.log('getMemberById typeof id-> ', typeof id)
  console.log('getMemberById id-> ', id)
  return axios.get('http://localhost:8389/restApi/v15/members' + id)
}

view 단

 

 - 이렇게 설정 마친 후에 postman에서 실행시키기