연동시키기 전 다운로드

vsStudio 에 

리엑트를 깔고 그 폴더에 설치하는것

 

index.js

 

app.js

 

 

package.json

proxy 추가하기

 

app.js

 

 

import './App.css';

import { useState, useEffect } from 'react';

import axios from 'axios'

function App() {

  const [lectures, setlectures] = useState([]);

  const [title, settitle] = useState("");

  const [instructor, setinstructor] = useState("");

  useEffect( () => {

    axios.get("/lectures").then(res => setlectures(res.data))

    //then =  다 읽어온 다음에

  }, []);

  const addLecture = () => {

    axios.post("/lectures", {

      title,

      instructor,

      is_open:true

    }).then(res => {

      setlectures([...lectures, res.data]);

      settitle("");

      setinstructor("");

    });

  };

 

  return (

    <div style={{ padding: 20}}>

      <h1>Lecture List</h1>

      <label>title:   </label><input placeholder='Title' value={title} onChange={e => settitle(e.target.value)}/>

      <label>insturctor:    </label><input placeholder='Instructor' value={instructor} onChange={e => setinstructor(e.target.value)}/> <br/>

      <button onClick={addLecture}>Add Lecture</button>

      <ul>

        {lectures.map(lec => (

          <li key={lec.id}>

            {lec.title} by {lec.instructor} - {lec.is_open? "Open" : "Close"}

          </li>

        ))}

      </ul>

    </div>

  );

}

export default App;

 

 

---

main

from fastapi import FastAPI, Depends, HTTPException
from fastapi.middleware.cors import CORSMiddleware
from sqlalchemy import select
from sqlalchemy.orm import Session
from . import models, schemas
from .database import SessionLocal, engine
from typing import List

models.Base.metadata.create_all(bind=engine)

app = FastAPI()

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

def get_db():
    db = SessionLocal()
    try:
        yield db
    finally:
        db.close()

@app.get('/lectures', response_model=List[schemas.LectureRead])
def get_lectures(db:Session = Depends(get_db)):
    stmt = select(models.Lecture)
    lectures = db.scalars(stmt).all() #list(Lecture)
    return lectures

@app.get('lectures/{lecture_id', response_model=schemas.LectureRead)
def get_id_lecture(lecture_id:int, db:Session = Depends(get_db)):
    obj = db.get(models.Lecture, lecture_id)
    if not obj:
        raise HTTPException(status_code=404, datail='Lecture not found')
    return obj

@app.post('/lectures', response_model=schemas.LectureRead)
def create_lecture(lecture: schemas.LectureCreate, db: Session = Depends(get_db)):
    db_lecture = models.Lecture(**lecture.model_dump())
    db.add(db_lecture)
    db.commit()
    db.refresh(db_lecture)
    return db_lecture

 

models

from sqlalchemy import Column, Integer, String, Boolean
from .database import Base

class Lecture(Base):
    __tablename__ = 'lectures'

    id = Column(Integer, primary_key=True, index=True)
    title = Column(String(255), nullable=False)
    instructor = Column(String(255), nullable=False)
    is_open = Column(Boolean, default=True)

 

schemas

from pydantic import BaseModel

class LectureBase(BaseModel):
    title: str
    instructor: str
    is_open: bool = True

class LectureCreate(LectureBase):
    pass

class LectureRead(LectureBase):
    id: int

    class Config:
        from_attributes = True

 

database

from sqlalchemy import create_engine
from sqlalchemy.orm import sessionmaker, declarative_base

DATABASE_URL = "mysql+pymysql://root:mysql80!@127.0.0.1:3306/lecture_app"

engine = create_engine(DATABASE_URL)
SessionLocal = sessionmaker(bind=engine, autocommit=False, autoflush=False)
Base = declarative_base()


from sqlalchemy import select
session = SessionLocal()
print(session.scalar(select(1)))

 

---