CRUD 프로그램

pip install fastapi uvicorn

from fastapi import FastAPI

app = FastAPI()


@app.get("/")
def home():
    return {
        "message": "사원관리 API"
    }

uvicorn main:app --reload

http://localhost:8000

http://localhost:8000/docs

employees = [
    {
        "employee_id": 1,
        "name": "홍길동",
        "phone": "010-1111-1111",
        "department": "개발팀"
    },
    {
        "employee_id": 2,
        "name": "김철수",
        "phone": "010-2222-2222",
        "department": "영업팀"
    },
    {
        "employee_id": 3,
        "name": "이영희",
        "phone": "010-3333-3333",
        "department": "관리팀"
    }
]

@app.get("/employees")
def get_employees():
    return employees

http://localhost:8000/employees

from fastapi import FastAPI, HTTPException

@app.get("/employees/{employee_id}")
def get_employee(employee_id: int):

    for employee in employees:

        if employee["employee_id"] == employee_id:
            return employee

    raise HTTPException(
        status_code=404,
        detail="사원을 찾을 수 없습니다."
    )

GET /employees/1

{
  "name": "박민수",
  "phone": "010-4444-4444",
  "department": "개발팀"
}

from pydantic import BaseModel


class Employee(BaseModel):
    name: str
    phone: str
    department: str

employee.name
employee.phone
employee.department

@app.post("/employees")
def create_employee(employee: Employee):

    new_id = max(
        [e["employee_id"] for e in employees],
        default=0
    ) + 1

    new_employee = {
        "employee_id": new_id,
        "name": employee.name,
        "phone": employee.phone,
        "department": employee.department
    }

    employees.append(
        new_employee
    )

    return new_employee

{
  "name": "박민수",
  "phone": "010-4444-4444",
  "department": "개발팀"
}

@app.put("/employees/{employee_id}")
def update_employee(
    employee_id: int,
    employee: Employee
):

    for item in employees:

        if item["employee_id"] == employee_id:

            item["name"] = employee.name
            item["phone"] = employee.phone
            item["department"] = employee.department

            return item

    raise HTTPException(
        status_code=404,
        detail="사원을 찾을 수 없습니다."
    )

PUT /employees/1

{
  "name": "홍길동",
  "phone": "010-9999-9999",
  "department": "영업팀"
}

@app.delete("/employees/{employee_id}")
def delete_employee(employee_id: int):

    for employee in employees:

        if employee["employee_id"] == employee_id:

            employees.remove(
                employee
            )

            return {
                "message": "삭제되었습니다."
            }

    raise HTTPException(
        status_code=404,
        detail="사원을 찾을 수 없습니다."
    )

DELETE /employees/1

from fastapi.middleware.cors import CORSMiddleware

app.add_middleware(
    CORSMiddleware,

    allow_origins=[
        "http://localhost:5173"
    ],

    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"]
)

from fastapi import FastAPI, HTTPException
from fastapi.middleware.cors import CORSMiddleware
from pydantic import BaseModel


app = FastAPI()


app.add_middleware(
    CORSMiddleware,
    allow_origins=[
        "http://localhost:5173"
    ],
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"]
)


employees = [
    {
        "employee_id": 1,
        "name": "홍길동",
        "phone": "010-1111-1111",
        "department": "개발팀"
    },
    {
        "employee_id": 2,
        "name": "김철수",
        "phone": "010-2222-2222",
        "department": "영업팀"
    },
    {
        "employee_id": 3,
        "name": "이영희",
        "phone": "010-3333-3333",
        "department": "관리팀"
    }
]


class Employee(BaseModel):
    name: str
    phone: str
    department: str


@app.get("/employees")
def get_employees():
    return employees


@app.get("/employees/{employee_id}")
def get_employee(employee_id: int):

    for employee in employees:

        if employee["employee_id"] == employee_id:
            return employee

    raise HTTPException(
        status_code=404,
        detail="사원을 찾을 수 없습니다."
    )


@app.post("/employees")
def create_employee(employee: Employee):

    new_id = max(
        [e["employee_id"] for e in employees],
        default=0
    ) + 1

    new_employee = {
        "employee_id": new_id,
        "name": employee.name,
        "phone": employee.phone,
        "department": employee.department
    }

    employees.append(
        new_employee
    )

    return new_employee


@app.put("/employees/{employee_id}")
def update_employee(
    employee_id: int,
    employee: Employee
):

    for item in employees:

        if item["employee_id"] == employee_id:

            item["name"] = employee.name
            item["phone"] = employee.phone
            item["department"] = employee.department

            return item

    raise HTTPException(
        status_code=404,
        detail="사원을 찾을 수 없습니다."
    )


@app.delete("/employees/{employee_id}")
def delete_employee(employee_id: int):

    for employee in employees:

        if employee["employee_id"] == employee_id:

            employees.remove(
                employee
            )

            return {
                "message": "삭제되었습니다."
            }

    raise HTTPException(
        status_code=404,
        detail="사원을 찾을 수 없습니다."
    )

uvicorn main:app --reload

http://localhost:8000/docs

npm install axios vue-router

import axios from 'axios'


const API_URL =
  'http://localhost:8000/employees'


export function getEmployees() {

  return axios.get(
    API_URL
  )

}


export function getEmployee(id) {

  return axios.get(
    API_URL + '/' + id
  )

}


export function createEmployee(employee) {

  return axios.post(
    API_URL,
    employee
  )

}


export function updateEmployee(
  id,
  employee
) {

  return axios.put(
    API_URL + '/' + id,
    employee
  )

}


export function deleteEmployee(id) {

  return axios.delete(
    API_URL + '/' + id
  )

}

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

import {
  getEmployees,
  deleteEmployee
} from '../api/employeeApi'


const employees = ref([])


async function loadEmployees() {

  const response =
    await getEmployees()

  employees.value =
    response.data

}


async function removeEmployee(id) {

  const result = confirm(
    '삭제하시겠습니까?'
  )

  if (!result) {
    return
  }

  await deleteEmployee(id)

  await loadEmployees()
}


onMounted(
  loadEmployees
)
</script>


<template>

  <div>

    <h2>사원 목록</h2>

    <router-link
      to="/employees/new"
    >
      사원 등록
    </router-link>

    <table border="1">

      <thead>
        <tr>
          <th>번호</th>
          <th>이름</th>
          <th>전화번호</th>
          <th>부서</th>
          <th>관리</th>
        </tr>
      </thead>

      <tbody>

        <tr
          v-for="emp in employees"
          :key="emp.employee_id"
        >

          <td>
            {{ emp.employee_id }}
          </td>

          <td>

            <router-link
              :to="
                '/employees/'
                + emp.employee_id
              "
            >
              {{ emp.name }}
            </router-link>

          </td>

          <td>
            {{ emp.phone }}
          </td>

          <td>
            {{ emp.department }}
          </td>

          <td>

            <router-link
              :to="
                '/employees/'
                + emp.employee_id
                + '/edit'
              "
            >
              수정
            </router-link>

            <button
              @click="
                removeEmployee(
                  emp.employee_id
                )
              "
            >
              삭제
            </button>

          </td>

        </tr>

      </tbody>

    </table>

  </div>

</template>

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

import {
  useRouter
} from 'vue-router'

import {
  createEmployee
} from '../api/employeeApi'


const router = useRouter()


const employee = reactive({
  name: '',
  phone: '',
  department: '개발팀'
})


async function save() {

  await createEmployee(
    employee
  )

  alert(
    '등록되었습니다.'
  )

  router.push(
    '/employees'
  )
}
</script>


<template>

  <div>

    <h2>사원 등록</h2>

    <p>
      이름

      <input
        v-model="employee.name"
      >
    </p>

    <p>
      전화번호

      <input
        v-model="employee.phone"
      >
    </p>

    <p>
      부서

      <select
        v-model="employee.department"
      >

        <option value="개발팀">
          개발팀
        </option>

        <option value="영업팀">
          영업팀
        </option>

        <option value="관리팀">
          관리팀
        </option>

      </select>

    </p>

    <button @click="save">
      등록
    </button>

  </div>

</template>

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

import {
  useRoute
} from 'vue-router'

import {
  getEmployee
} from '../api/employeeApi'


const route = useRoute()

const employee = ref(null)


async function loadEmployee() {

  const response =
    await getEmployee(
      route.params.id
    )

  employee.value =
    response.data
}


onMounted(
  loadEmployee
)
</script>


<template>

  <div>

    <h2>사원 상세</h2>

    <div v-if="employee">

      <p>
        번호 :
        {{ employee.employee_id }}
      </p>

      <p>
        이름 :
        {{ employee.name }}
      </p>

      <p>
        전화번호 :
        {{ employee.phone }}
      </p>

      <p>
        부서 :
        {{ employee.department }}
      </p>

    </div>

  </div>

</template>

/employees/2

<script setup>
import {
  reactive,
  onMounted
} from 'vue'

import {
  useRoute,
  useRouter
} from 'vue-router'

import {
  getEmployee,
  updateEmployee
} from '../api/employeeApi'


const route = useRoute()
const router = useRouter()


const employee = reactive({
  name: '',
  phone: '',
  department: ''
})


async function loadEmployee() {

  const response =
    await getEmployee(
      route.params.id
    )

  employee.name =
    response.data.name

  employee.phone =
    response.data.phone

  employee.department =
    response.data.department
}


async function save() {

  await updateEmployee(
    route.params.id,
    employee
  )

  alert(
    '수정되었습니다.'
  )

  router.push(
    '/employees'
  )
}


onMounted(
  loadEmployee
)
</script>


<template>

  <div>

    <h2>사원 수정</h2>

    <p>
      이름

      <input
        v-model="employee.name"
      >
    </p>

    <p>
      전화번호

      <input
        v-model="employee.phone"
      >
    </p>

    <p>
      부서

      <select
        v-model="employee.department"
      >

        <option value="개발팀">
          개발팀
        </option>

        <option value="영업팀">
          영업팀
        </option>

        <option value="관리팀">
          관리팀
        </option>

      </select>

    </p>

    <button @click="save">
      수정
    </button>

  </div>

</template>

import {
  createRouter,
  createWebHistory
} from 'vue-router'

import EmployeeListView
  from '../views/EmployeeListView.vue'

import EmployeeCreateView
  from '../views/EmployeeCreateView.vue'

import EmployeeDetailView
  from '../views/EmployeeDetailView.vue'

import EmployeeEditView
  from '../views/EmployeeEditView.vue'


const routes = [

  {
    path: '/',
    redirect: '/employees'
  },

  {
    path: '/employees',
    component: EmployeeListView
  },

  {
    path: '/employees/new',
    component: EmployeeCreateView
  },

  {
    path: '/employees/:id',
    component: EmployeeDetailView
  },

  {
    path: '/employees/:id/edit',
    component: EmployeeEditView
  }

]


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


export default router

import {
  createApp
} from 'vue'

import App from './App.vue'
import router from './router'


createApp(App)
  .use(router)
  .mount('#app')

<template>

  <div>

    <h1>
      사원관리 프로그램
    </h1>

    <nav>

      <router-link
        to="/employees"
      >
        사원 목록
      </router-link>

      |

      <router-link
        to="/employees/new"
      >
        사원 등록
      </router-link>

    </nav>

    <hr>

    <router-view />

  </div>

</template>

uvicorn main:app --reload

npm run dev

{
  name: '박민수',
  phone: '010-4444-4444',
  department: '개발팀'
}

GET /employees