npm run dev
| folder | layouts |
| vue | TheHeader.vue |
<template>
<header>
<nav class="navbar navbar-expand-sm navbar-dark bg-primary">
<div class="container-fluid">
<a class="navbar-brand" href="#">KTG</a>
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto">
<!--
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
-->
<li class="nav-item">
<RouterLink class="nav-link" active-class="active" to="/"> Home </RouterLink>
</li>
<li class="nav-item">
<RouterLink class="nav-link" active-class="active" to="/about"> About </RouterLink>
</li>
<li class="nav-item">
<RouterLink class="nav-link" active-class="active" to="/members">
회원 관리
</RouterLink>
</li>
<li class="nav-item">
<RouterLink class="nav-link" active-class="active" to="/nested"> Nested </RouterLink>
</li>
</ul>
<div class="d-flex">
<button class="btn btn-outline-light" type="button" @click="goMemberCreatePage">
회원등록
</button>
</div>
</div>
</div>
</nav>
</header>
</template>
<script setup>
import { useRouter } from 'vue-router'
const router = useRouter()
const goMemberCreatePage = () => {
router.push({
name: 'MemberCreate'
})
}
</script>
<style lang="scss" scoped></style>
| view 단 |
 |
| folder | views |
| vue | AboutView.vue |
<template>
<div>
<h2>About View</h2>
<p>{{ $route.path }}</p>
<button class="btn btn-primary" @click="$router.push('/')">Home 이동</button>
</div>
</template>
<script setup>
import { useRouter } from 'vue-router'
const route = useRouter()
console.log('route.path:', route.path)
console.log('route:', route)
</script>
<style lang="scss" scoped></style>| view 단 |
- bootstrap button으로 google에 검색해서 하기
| folder | router |
| js | index.js |
import AboutView from '@/views/AboutView.vue'
import HomeView from '@/views/HomeView.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: '/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 | views/nested |
| vue | NestedView.vue |
<template>
<div>
<h1>Nested View wekcome!!!!! - seul -</h1>
</div>
</template>
<script setup></script>
<style lang="scss" scoped></style>| view 단 |
| folder | views/nested |
| vue | NestedHomeView.vue |
<template>
<div class="card">
<div class="card-header">Nested Home</div>
<div class="card-body">
<h1 class="card-title">Nested routes home....</h1>
</div>
</div>
</template>
<script setup></script>
<style lang="scss" scoped></style>| view 단 |
 |
-
| folder | views/router |
| vue | NestedOneView.vue |
<template>
<div class="card">
<div class="card-header">Nested One</div>
<div class="card-body">
<h5 class="card-title">Special 1</h5>
<p class="card-text">One View예요</p>
<a href="#" class="btn btn-success">Go success</a>
</div>
</div>
</template>
<script setup></script>
<style lang="scss" scoped></style>| view 단 |
 |
| folder | views/router |
| vue | NestedTwoView.vue |
<template>
<div class="card">
<div class="card-header">Nested Two</div>
<div class="card-body">
<h5 class="card-title">Special 2</h5>
<p class="card-text">Two View예요</p>
<a href="#" class="btn btn-danger">Go Two danger</a>
</div>
</div>
</template>
<script setup></script>
<style lang="scss" scoped></style>| view 단 |
 |
spring에 oBootJpaApi01 실행해준다.
server:
port: 8389
# Oracle Connect
spring:
datasource:
driver-class-name: oracle.jdbc.driver.OracleDriver
url: jdbc:oracle:thin:@172.30.1.54:1521/xe #docker(mydb)
# url: jdbc:oracle:thin:@localhost:1521/xe
# url: jdbc:oracle:thin:@l27.0.0.1:32772/xe #docker
# url: jdbc:oracle:thin:@172.30.1.54:32768/xe #docker
username: scottJpa
password: tiger
#Jpa Setting
jpa:
show-sql: true
hibernate:
ddl-auto: update
# @Entity라고 설정되어 있는 것들 만 update, none, create 등등
# release 할 때에는 none으로 바꿔주어야 한다!!!!
logging.level:
org.hibernate.SQL: debug #logger를 통해 하이버네이트 실행 SQL
배포?
window R cmd
set Java_Home=C:\Program Files\Java\jdk-17
cd C:\spring\springSrc17\oBootJpaApi01
gradlew build (하기 전에 해당 폴더에 build 있으면 통째로 날려주기)
Dockerfile -> spring oBootJpaApi01 에 만들어놓은 Dockerfile build/libs에 옮겨두기
oBootJpaApi01-version1.0.jar 를 복사해서 app.jar로 이름을 바꿔준다.
cd C:\spring\springSrc17\oBootJpaApi01\build\libs
dir
그리고 docker를 틀어주기!! (반드시)
docker login
docker build -t spring-project-restapi .
docker images
docker run -p 8389:8389 spring-project-restapi
이렇게 하면 배포가 완료된 상태이다
다시한번 웹사이트에서 실행시켜보면, localhost:8389/restApi/v1/members
** war인 경우에는 서버가 있어야 하고 jar인 경우에는
docker - localhost랑 연결시킨 것!!
docker - docker 연결시키기
| folder | component / members |
| vue | AppCard.vue |
<template>
<div class="card">
<div v-if="$slots.header" class="card-header">
<slot name="header"></slot>
</div>
<div v-if="$slots.default" class="card-body">
<slot></slot>
</div>
<div class="card-footer">
<slot name="footer"></slot>
</div>
</div>
</template>| view 단 |
- 슬롯에 관련된!!
https://velog.io/@doheek2/Vue-%EC%8A%AC%EB%A1%AFSlot
[Vue3] 슬롯(Slot)
슬롯은 템플릿 조각을 자식 컴포넌트에 전달하여 자식 컴포넌트가 자체 템플릿 내에서 조각을 렌더링하는 것이다.최종 렌더링은 아래와 같이 된다.name이라는 속성으로 컨텐츠가 렌더링되어야
velog.io
- components 폴더 안에 members 폴더 만들어주기
| folder | components/members |
| vue | MemberItem.vue |
<template>
<AppCard>
<h5 class="card-title">{{ id }}</h5>
<p class="card-text">{{ name }}</p>
<p class="text-muted">{{ sal }}</p>
</AppCard>
</template>
<script setup>
import AppCard from '@/components/AppCard.vue'
defineProps({
id: {
type: Number,
required: true
},
name: {
type: String
},
sal: {
type: [String, Number]
}
})
</script>
<style lang="scss" scoped></style>| view 단 |
- view 폴더 안에 members 폴더 만들어준다.
| folder | views/members |
| vue | MemberListView.vue |
<template>
<div>
<h2>회원 목록</h2>
<hr />
<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>
</template>
<script setup>
import MemberItem from '@/components/members/MemberItem.vue'
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()
</script>
<style lang="scss" scoped></style>| view 단 |
- component 단위를 모아서 사용자에게 보여주기 위한 것
<MemberItem> -> component
-
- src 폴더 안에 api 폴더 만들어주기
| folder | src / api |
| js(javascript) | members.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
}| view 단 |
- axios가 ajax랑 같은 의미
