• FastAPI server 런칭

from typing import Union
from fastapi import FastAPI
from pydantic import BaseModel
from fastapi.responses import FileResponse

app = FastAPI()

class Item(BaseModel):
    name: str
    price: float
    is_offer: Union[bool, None] = None

class Model(BaseModel):
    name: str
    phoneNumber: int

async def some_library(a):
   print(a)

@app.get("/")
def read_root():
    return {"Hello": "World"}

@app.get("/index")
def html문서():
  return FileResponse('index.html')

@app.get("/async")     # 비동기 처리 가능
async def 비동기():
  result = await some_library("비동기 테스트")
  return result

@app.get("/items/{item_id}")
def read_item(item_id: int, q: Union[str, None] = None):
    return {"item_id": item_id, "q": q}

@app.post("/send")
def data받기(data : Model):
  print(data)
  return '전송완료'

@app.put("/items/{item_id}")
def update_item(item_id: int, item: Item):
    return {"item_name": item.name, "item_id": item_id}

if __name__ == "__main__":
    print("Fastapi Server is launching!!!")
    import uvicorn
    uvicorn.run(app, host="127.0.0.1", port=8000)

• Front

<!DOCTYPE html>
<html>
<head>
    <title>FastAPI Test</title>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
    <h1>Send Data to FastAPI</h1>
    <form id="dataForm">
        <label for="name">Name:</label>
        <input type="text" id="name" name="name"><br><br>
        <label for="phoneNumber">Phone Number:</label>
        <input type="text" id="phoneNumber" name="phoneNumber"><br><br>
        <button type="button" onclick="sendData()">Send Data</button>
    </form>
    <div id="response"></div>
    <script>
        function sendData() {
            const dataForm = document.getElementById("dataForm");
            const formData = new FormData(dataForm);
            axios.post('http://127.0.0.1:8000/send', formData)
                .then(response => {
                    document.getElementById("response").innerHTML = response.data;
                })
                .catch(error => {
                    console.error('Error:', error);
                });
        }
    </script>
</body>
</html>