Python 프로그램 웹 전환 프로젝트

import tkinter as tk
from tkinter import ttk


window = tk.Tk()

window.title(
    "사원관리 프로그램"
)


tk.Label(
    window,
    text="이름"
).grid(
    row=0,
    column=0
)

entry_name = tk.Entry(
    window
)

entry_name.grid(
    row=0,
    column=1
)


tk.Label(
    window,
    text="전화번호"
).grid(
    row=1,
    column=0
)

entry_phone = tk.Entry(
    window
)

entry_phone.grid(
    row=1,
    column=1
)


combo_department = ttk.Combobox(
    window,
    values=(
        "개발팀",
        "영업팀",
        "관리팀"
    )
)

combo_department.grid(
    row=2,
    column=1
)


tree = ttk.Treeview(
    window,
    columns=(
        "id",
        "name",
        "phone",
        "department"
    ),
    show="headings"
)

tree.grid(
    row=5,
    column=0,
    columnspan=2
)


window.mainloop()

entry_name.get()

tree.insert(...)

messagebox.showinfo(...)

def validate_name(name):

    return (
        name.strip() != ""
    )

def find_all():

    cursor.execute(
        """
        SELECT *
        FROM employee
        """
    )

import sqlite3


DB_NAME = "employee.db"


def get_connection():

    conn = sqlite3.connect(
        DB_NAME
    )

    conn.row_factory = (
        sqlite3.Row
    )

    return conn


def find_all():

    conn = get_connection()
    cursor = conn.cursor()

    cursor.execute(
        """
        SELECT
            employee_id,
            name,
            phone,
            department
        FROM employee
        ORDER BY employee_id
        """
    )

    rows = cursor.fetchall()

    conn.close()

    return [
        dict(row)
        for row in rows
    ]

def search_by_name(
    keyword
):

    conn = get_connection()
    cursor = conn.cursor()

    cursor.execute(
        """
        SELECT
            employee_id,
            name,
            phone,
            department
        FROM employee
        WHERE name LIKE ?
        ORDER BY employee_id
        """,
        (
            "%" + keyword + "%",
        )
    )

    rows = cursor.fetchall()

    conn.close()

    return [
        dict(row)
        for row in rows
    ]

@router.get(
    "/search"
)
def search_employees(
    keyword: str = ""
):

    return (
        employee_service
        .search_employees(
            keyword
        )
    )

def search_employees(
    keyword
):

    keyword = keyword.strip()

    if keyword == "":

        return (
            employee_repository
            .find_all()
        )

    return (
        employee_repository
        .search_by_name(
            keyword
        )
    )

/employees/search?keyword=홍길동

def search_employees(
    keyword: str = ""
):
    ...

export function searchEmployees(
  keyword
) {

  return api.get(
    '/employees/search',
    {
      params: {
        keyword: keyword
      }
    }
  )

}

<script setup>

import {
  ref,
  onMounted
} from 'vue'

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


const employees = ref([])
const keyword = ref('')


async function loadEmployees() {

  const response =
    await getEmployees()

  employees.value =
    response.data

}


async function search() {

  const response =
    await searchEmployees(
      keyword.value
    )

  employees.value =
    response.data

}


async function resetSearch() {

  keyword.value = ''

  await loadEmployees()

}


async function removeEmployee(
  id
) {

  if (
    !confirm(
      '삭제하시겠습니까?'
    )
  ) {
    return
  }

  await deleteEmployee(id)

  await loadEmployees()

}


onMounted(
  loadEmployees
)

</script>


<template>

  <div>

    <h2>
      사원 목록
    </h2>

    <div>

      <input
        v-model="keyword"
        placeholder="이름 검색"
      >

      <button
        @click="search"
      >
        검색
      </button>

      <button
        @click="resetSearch"
      >
        전체
      </button>

    </div>

    <br>

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

    <br><br>


    <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>

            &nbsp;

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

          </td>

        </tr>

      </tbody>

    </table>

  </div>

</template>

def search():

    keyword = (
        entry_search.get()
    )

    employees = (
        repository
        .search_by_name(
            keyword
        )
    )

    clear_tree()

    for emp in employees:

        tree.insert(
            "",
            "end",
            values=emp
        )

async function search() {

  const response =
    await searchEmployees(
      keyword.value
    )

  employees.value =
    response.data

}

<script setup>

const props = defineProps({
  employee: Object,

  buttonText: {
    type: String,
    default: '저장'
  }
})


const emit = defineEmits([
  'save'
])


function save() {
  emit('save')
}

</script>


<template>

  <div>

    <p>
      이름

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

    <p>
      전화번호

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

    <p>
      부서

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

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

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

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

      </select>

    </p>

    <button @click="save">
      {{ buttonText }}
    </button>

  </div>

</template>

<script setup>

import {
  reactive
} from 'vue'

import {
  useRouter
} from 'vue-router'

import EmployeeForm
  from '../components/EmployeeForm.vue'

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


const router = useRouter()


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


async function save() {

  try {

    await createEmployee(
      employee
    )

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

    router.push(
      '/employees'
    )

  } catch (error) {

    alert(
      error.response?.data?.detail
      ||
      '등록 중 오류가 발생했습니다.'
    )

  }

}

</script>


<template>

  <h2>
    사원 등록
  </h2>

  <EmployeeForm
    :employee="employee"
    button-text="등록"
    @save="save"
  />

</template>

<script setup>

import {
  reactive,
  onMounted
} from 'vue'

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

import EmployeeForm
  from '../components/EmployeeForm.vue'

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
    )

  Object.assign(
    employee,
    response.data
  )

}


async function save() {

  try {

    await updateEmployee(
      route.params.id,
      employee
    )

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

    router.push(
      '/employees'
    )

  } catch (error) {

    alert(
      error.response?.data?.detail
      ||
      '수정 중 오류가 발생했습니다.'
    )

  }

}


onMounted(
  loadEmployee
)

</script>


<template>

  <h2>
    사원 수정
  </h2>

  <EmployeeForm
    :employee="employee"
    button-text="수정"
    @save="save"
  />

</template>

menu = tk.Menu(
    window
)

employee_menu = tk.Menu(
    menu,
    tearoff=0
)

employee_menu.add_command(
    label="사원목록"
)

employee_menu.add_command(
    label="사원등록"
)

menu.add_cascade(
    label="사원관리",
    menu=employee_menu
)

window.config(
    menu=menu
)

<nav>

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

  |

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

</nav>

messagebox.showinfo(
    "확인",
    "등록되었습니다."
)

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

result = (
    messagebox.askyesno(
        "확인",
        "삭제하시겠습니까?"
    )
)

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

from ui import (
    EmployeeWindow
)


if __name__ == "__main__":

    app = EmployeeWindow()

    app.run()

from fastapi import FastAPI

from fastapi.middleware.cors import (
    CORSMiddleware
)

from routers.employee_router import (
    router as employee_router
)


app = FastAPI()


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


app.include_router(
    employee_router
)

uvicorn main:app --reload

import {
  createApp
} from 'vue'

import App
  from './App.vue'

import router
  from './router'


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

CREATE TABLE employee (
    employee_id INTEGER
        PRIMARY KEY AUTOINCREMENT,
    name TEXT NOT NULL,
    phone TEXT,
    department TEXT
);

from pathlib import Path
import sqlite3


BASE_DIR = (
    Path(__file__)
    .resolve()
    .parent
)


DB_PATH = (
    BASE_DIR
    / "employee.db"
)


def get_connection():

    conn = sqlite3.connect(
        DB_PATH
    )

    conn.row_factory = (
        sqlite3.Row
    )

    return conn

VITE_API_URL=http://localhost:8000

import axios from 'axios'


const api = axios.create({
  baseURL:
    import.meta.env
      .VITE_API_URL
})


export default api

VITE_API_URL=https://api.example.com

const loading = ref(false)


async function loadEmployees() {

  loading.value = true

  try {

    const response =
      await getEmployees()

    employees.value =
      response.data

  } finally {

    loading.value = false

  }

}

<p v-if="loading">
  데이터를 불러오는 중입니다.
</p>

<tr
  v-if="
    employees.length === 0
  "
>

  <td colspan="5">
    등록된 사원이 없습니다.
  </td>

</tr>

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

async function save() {

  if (
    employee.name
      .trim() === ''
  ) {

    alert(
      '이름을 입력하세요.'
    )

    return
  }

  await createEmployee(
    employee
  )

}

def validate_name(name):

    return (
        name.strip() != ""
    )

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

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

async function remove() {

  if (
    !confirm(
      '삭제하시겠습니까?'
    )
  ) {
    return
  }

  await deleteEmployee(
    route.params.id
  )

  alert(
    '삭제되었습니다.'
  )

  router.push(
    '/employees'
  )

}

import os


files = os.listdir(
    "data"
)

@app.get("/files")
def get_files():

    return os.listdir(
        "data"
    )

const response =
  await api.get(
    '/files'
  )

def search_data():

    # 외부 API 호출

    return result

CREATE TABLE member (
    member_id INTEGER
        PRIMARY KEY AUTOINCREMENT,
    name TEXT NOT NULL,
    phone TEXT,
    address TEXT
);