데이터과학 삼학년

[FastAPI] Fast API를 이용한 간단 웹페이지 (클라이언트 동적 할당) 본문

Web

[FastAPI] Fast API를 이용한 간단 웹페이지 (클라이언트 동적 할당)

Dan-k 2024. 1. 8. 11:00
반응형

클라이언트 측에서 동적 처리를 하는 웹페이지 예시

예시로 간단한 To-Do 리스트 애플리케이션  만들기!!

파일 구조

├── static
│   ├── script.js
│   └── styles.css
├── templates
│   └── index.html
└── web.py
  1. HTML 파일 (index.html):
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dynamic Webpage Example</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>

<div id="app">
    <h1>To-Do List</h1>
    <input type="text" id="taskInput" placeholder="Add a new task">
    <button onclick="addTask()">Add Task</button>
    <ul id="taskList"></ul>
</div>

<script src="script.js"></script>
</body>
</html>
  1. CSS 파일 (styles.css):
body {
    font-family: Arial, sans-serif;
    margin: 20px;
}

#app {
    max-width: 400px;
    margin: 0 auto;
}

ul {
    list-style-type: none;
    padding: 0;
}

li {
    margin-bottom: 8px;
}

.completed {
    text-decoration: line-through;
    color: #999;
}
  1. JavaScript 파일 (script.js):
function addTask() {
    // 입력 필드와 리스트 가져오기
    var taskInput = document.getElementById("taskInput");
    var taskList = document.getElementById("taskList");

    // 새로운 리스트 아이템 생성
    var newTask = document.createElement("li");
    newTask.textContent = taskInput.value;

    // 리스트에 아이템 추가
    taskList.appendChild(newTask);

    // 입력 필드 초기화
    taskInput.value = "";

    // 리스트 아이템에 클릭 이벤트 추가 (완료 토글)
    newTask.addEventListener("click", function () {
        newTask.classList.toggle("completed");
    });
}

이 예시에서는 사용자가 텍스트를 입력하고 "Add Task" 버튼을 클릭하면, 입력된 내용이 동적으로 리스트에 추가되고, 리스트 아이템을 클릭하면 완료 상태가 토글

-> 동적 처리를 통해 웹페이지

 

 FastAPI와 Uvicorn 설치

pip install fastapi uvicorn

 

web.py

from fastapi import FastAPI, Request
from fastapi.responses import HTMLResponse
from fastapi.templating import Jinja2Templates

app = FastAPI()
templates = Jinja2Templates(directory="templates")

@app.get("/", response_class=HTMLResponse)
async def read_root(request: Request):
    return templates.TemplateResponse("index.html", {"request": request})

이제 templates 폴더를 만들고, 그 안에 index.html 파일을 저장

static 폴더 안에 css, js 저장

 

아래 명령어를 사용해서 FastAPI 애플리케이션을 실행

uvicorn web:app --reload

 

http://127.0.0.1:8000**로 접속하면 FastAPI로 동작하는 To-Do 리스트 애플리케이션을 확인

728x90
반응형
LIST

'Web' 카테고리의 다른 글

Fast API 소개  (0) 2023.04.16
AJAX란?  (0) 2020.04.19
NGINX 504 Gateway Time-out 에러와 해결방법  (0) 2020.03.11
request.values 로 body를 분석( base64 encode --> decode)  (0) 2020.03.09
로그인 기능 추가 --> 다 만든 web에 로그인만 입히기  (0) 2020.03.06
'Web' Related Articles more
Comments