Day72 2024.09.03.화 #코딩일기

 

 

도커에서 도커로 호출하는 방법

 

도커에서 dSystem 비밀번호 expired 되었을 때,  docker oracle에서 실행시키기

 

# su - oracle

sqlplus '/as sysdba'

alter user system identified by oracle;

 

 

다시 dSystem에 접근해서 권한을 준다.

CREATE USER scottjpa IDENTIFIED BY tiger;
GRANT DBA TO scottjpa;

 

 

실행시킬 때에, 도커도 켜두야 하고, spring도 켜주어야 한다. (도커에 만든 스프링은 삭제해준다.)

spring - oBootJpaApi - application.yml에서 포트번호 입력해준다.

 

그리고 삭제한 도커를 다시 만들기 위해 window R cmd

 

cd C:\spring\springSrc17\oBootJpaApi01

set Java_HOME=C:\Program Files\Java\jdk-17

 

oBootJpaApi01 폴더 안에 build 폴더 안에 libs 안에 Dockerfile만 빼놓고 build 삭제

 

gradlew build

 

dir

cd C:\spring\springSrc17\oBootJpaApi01\build\libs

libs 폴더에 있는 파일 하나 복붙, 이름 바꾸기, Dockerfile 따로 넣어주기

docker build -t spring-project-restapi .

 

docker images

 

 

docker run -p 8389:8389 spring-project-restapi .

 

 

 

 

 

 

folder	src/router
js	index.js

<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	src/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	src/views/members
vue	MemberCreateView.vue

<template>
  <div>
    <h2>Member 등록</h2>
    <hr class="my-4" />
    <!-- 
      form의 기본적인 동작은 서버로 보내는 것이다.
      그러면서, 화면의 데이터가 리셋되게 된다.
      submit.prevent는 이런 form의 기본 동작이 되지 않도록 제어 
    -->
    <MemberForm v-model:sal="form.sal" v-model:name="form.name" @submit.prevent="save">
      <template #action>
        <button type="button" class="btn btn-outline-dark me-2" @click="goListpage">목록</button>
        <button class="btn btn-library">저장</button>
      </template>
    </MemberForm>
  </div>
</template>

<script setup>
import { createMember } from '@/api/members'
import MemberForm from '@/components/members/MemberForm.vue'
import router from '@/router'
import { ref } from 'vue'

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

const save = () => {
  try {
    console.log('save start....')
    createMember({
      ...form.value
    })
    router.push({ name: 'MemberList' })
  } catch (error) {
    console.error(error)
  }
}

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

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

view 단

 

 

 

folder	src/components/members
vue	MemberForm.vue

<template>
  <form>
    <div class="mb-3">
      <label for="sal" class="form-label">급여</label>
      <input
        :value="sal"
        @input="$emit('update:sal', $event.target.value)"
        :type="text"
        class="form-control"
        id="sal"
      />
    </div>
    <div class="md-3">
      <label for="name" class="form-label">이 름</label>
      <textarea
        :value="sal"
        @input="$emit('update:name', $event.target.value)"
        class="form-control"
        id="name"
        rows="1"
      ></textarea>
    </div>
  </form>
</template>

<script setup>
defineProps({
  sal: String,
  name: String
})

//다중 v-model 구현 위해
defineEmits(['update:sal', 'update:name'])
</script>

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

view 단

 

 - emit: 자식화면에서 부모화면으로 넘길 때

 

 

 

 

 

 

folder	src/api
vue	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)
}

view 단

 

 

 

 

folder
vue	App

 

view 단

 

 

 

 

 

 

 

 

 

folder	02
vue	App

 

view 단

 

 

 

 

 

 

 

 

folder
vue	App

 

view 단

 

 

 

folder
vue	App

 

view 단

 

 

 

folder
vue	App

 

view 단

 

 

 

folder
vue	App

 

view 단

 

 

 

 

folder
vue	App

 

view 단

 

 

 

folder
vue	App

 

view 단

 

 

 

folder
vue	App

 

view 단

 

 

 

folder
vue	App

 

view 단

 

 

 

 

folder
vue	App

 

view 단

 

 

 

 

 

 

 

 

 

folder	02
vue	App

 

view 단

 

 

 

 

 

 

 

 

folder
vue	App

 

view 단

 

 

 

folder
vue	App

 

view 단

 

 

 

folder
vue	App

 

view 단

 

 

 

folder
vue	App

 

view 단

 

 

 

 

folder
vue	App

 

view 단

 

 

 

folder
vue	App

 

view 단

 

 

 

folder
vue	App

 

view 단

 

 

 

folder
vue	App

 

view 단

 

 

 

 

folder
vue	App

 

view 단

 

 

 

 

 

 

 

 

 

folder	02
vue	App

 

view 단

 

 

 

 

 

 

 

 

folder
vue	App

 

view 단

 

 

 

folder
vue	App

 

view 단

 

 

 

folder
vue	App

 

view 단

 

 

 

folder
vue	App

 

view 단

 

 

 

 

folder
vue	App

 

view 단

 

 

 

folder
vue	App

 

view 단

 

 

 

folder
vue	App

 

view 단

 

 

 

folder
vue	App

 

view 단

 

 

 

 

folder
vue	App

 

view 단