вроде работает

backend/app/__init__.py

@@ -4,7 +4,6 @@ from starlette.middleware.cors import CORSMiddleware
 
 app = FastAPI()
 
-app.include_router(router)
 app.add_middleware(
     CORSMiddleware,
     allow_origins=['*'],
@@ -12,3 +11,4 @@ app.add_middleware(
     allow_methods=['*'],
     allow_headers=['*'],
 )
+app.include_router(router)

backend/app/routes.py

@@ -16,9 +16,13 @@ async def get_notes(session: AsyncSession = Depends(get_session)):
     return result.scalars().all()
 
 
+class NoteCreate(BaseModel):
+    title: str
+
+
 @router.post("/items/create")
-async def create_note(title: str, session: AsyncSession = Depends(get_session)):
-    note = Note(title=title)
+async def create_note(req: NoteCreate, session: AsyncSession = Depends(get_session)):
+    note = Note(title=req.title)
     session.add(note)
     await session.commit()
     return {
@@ -36,26 +40,25 @@ class NoteUpdateReq(BaseModel):
 
 @router.put("/items/update")
 async def update_note(req: NoteUpdateReq, session: AsyncSession = Depends(get_session)):
-    new_note = Note(
-        id=req.id,
-        title=req.title,
-        checked=req.checked
-    )
     await session.execute(
-        update(Note).where(Note.id == req.id).values(new_note)
+        update(Note).where(Note.id == req.id).values(req.__dict__)
     )
     await session.commit()
     return {
-        "id": new_note.id,
-        "title": new_note.title,
-        "checked": new_note.checked
+        "id": req.id,
+        "title": req.title,
+        "checked": req.checked
     }
 
 
+class NoteDeleteReq(BaseModel):
+    id: int
+
+
 @router.delete("/items/delete")
-async def delete_note(id: int, session: AsyncSession = Depends(get_session)):
+async def delete_note(req: NoteDeleteReq, session: AsyncSession = Depends(get_session)):
     await session.execute(
-        delete(Note).where(Note.id == id)
+        delete(Note).where(Note.id == req.id)
     )
     await session.commit()
     return 204

frontend/src/App.vue

@@ -2,32 +2,50 @@
 import {onMounted, ref} from 'vue'
 import Item  from "./components/Item.vue";
 import Edit from "./components/Edit.vue";
+import config from "./config";
 import axios from 'axios'
 
-let id = 0
-
-const notes = ref<any[]>([{id: id, title: "Hello World", checked: false}])
-const currentNote = ref<any>({id: id += 1, title: "", checked: false})
-
 onMounted(async () => {
-  notes.value = await axios.get('http://localhost:8888/items')
+  const response = await axios.get(`${config.apiEndpoint}/items`)
+  notes.value = response.data
+  id = Math.max(...notes.value.map((note: any) => note.id), 0)
+  currentNote.value.id = id += 1
 })
 
-function processNote(note: any) {
+
+let id;
+const notes = ref<any[]>([])
+const currentNote = ref<any>({id: id += 1, title: "", checked: false})
+
+async function processNote(note: any) {
   const index = notes.value.findIndex((item) => item.id === note.id)
   if (index !== -1) {
-    notes.value[index] = note
+    await axios.put(`${config.apiEndpoint}/items/update`, note).then((response) => {
+      notes.value[index] = response.data
+    })
   }
   else {
-    notes.value.push(note)
+    await axios.post(`${config.apiEndpoint}/items/create`, {title: note.title}).then((response) => {
+      notes.value.push(response.data)
+    })
   }
   currentNote.value = {id: id += 1, title: "", checked: false}
 }
 
-function deleteNote(note: any) {
+
+async function deleteNote(note: any) {
+  await axios.delete(`${config.apiEndpoint}/items/delete`, {data: {id: note.id}})
   notes.value = notes.value.filter((item) => item.id !== note.id)
 }
 
+
+async function updateChecked(id: any, checked: boolean) {
+  const index = notes.value.findIndex((item) => item.id === id)
+  if (index !== -1) {
+    notes.value[index].checked = checked
+    await axios.put(`${config.apiEndpoint}/items/update`, notes.value[index])
+  }
+}
 </script>
 
 <template>
@@ -37,7 +55,7 @@ function deleteNote(note: any) {
           :key="el.id"
           @delete="deleteNote"
           @edit="(note) => currentNote = note"
-          @updateChecked="(checked) => el.checked = checked"
+          @updateChecked="(checked) => updateChecked(el.id, checked)"
     />
   </div>
   <edit

frontend/src/components/Edit.vue

@@ -11,13 +11,17 @@
     }
      emit('done', note)
  }
+
+ function handleChange(event) {
+    emit('updateTitle', (event.target as HTMLInputElement).value)
+ }
 </script>
 
 <template>
   <div class="container">
     <input type="text"
            :value="note.title"
-           @input="event => $emit('updateTitle', event.target.value)">
+           @input="handleChange">
 
     <div class="btn" @click="processNote(note)">
       <span><font-awesome-icon icon="fa-solid fa-check" /> Add</span>

frontend/src/components/Item.vue

@@ -1,15 +1,19 @@
 <script setup lang="ts">
   defineProps<{ note: any }>()
-  defineEmits<{
+  const emit = defineEmits<{
     (e: 'delete', note: any): void
     (e: 'edit', note: any): void
     (e: 'updateChecked', checked: boolean): void
   }>()
+
+  function handleChecked(event) {
+    emit('updateChecked', (event.target as HTMLInputElement).checked)
+  }
 </script>
 
 <template>
   <div class="container">
-    <input type="checkbox" :checked="note.checked" @change="event => $emit('updateChecked', event.target.checked)">
+    <input type="checkbox" :checked="note.checked" @change="handleChecked">
     <span class="title">{{ note.title }}</span>
     <div class="btn" @click="$emit('edit', note)"><span><font-awesome-icon icon="fa-solid fa-pen-to-square" /> Edit</span></div>
     <div class="btn" @click="$emit('delete', note)"><span><font-awesome-icon icon="fa-solid fa-trash" /> Delete</span></div>

frontend/src/config.ts

@@ -0,0 +1,5 @@
+let config = {
+    apiEndpoint: 'http://localhost:8888',
+}
+
+export default config