Develop/FastAPI
FastAPI 프로젝트 진행(CSS 및 static 폴더 구성) - 75
동석해요
2023. 1. 25. 15:31
728x90
SMALL
프로젝트 디렉터리 구조
| fastapi | |||||
| todoapp | |||||
| main.py database.py models.py todos.db |
templates | static | routers | ||
| todo | |||||
| css | js | ||||
| home.html | base.css | auth.py todos.py |
|||
템플릿에 CSS를 추가, static 폴더 구성
static 폴더
js, css, image, font 등과 같이 개발자가 사전에 미리 서버에 저장해둔 파일들 모음집
내용이 고정되어 응답을 할 때 별도의 처리 없이 파일 내용을 그대로 보내주면 되는 정적인 파일 모음집
1. todoapp 디렉터리 하위에 static 디렉터리 생성
2. static 디렉터리 하위에 css, js 디렉터리 생성
3. css 디렉터리 하위에 base.css 생성
h1 {
color: red;
}
4. templates의 home.html 수정
<!DOCTYPE html>
<html lang="en">
<head>
#CSS 적용
<link rel="stylesheet" type="text/css"
href="{{ url_for('static', path='/todo/css/base.css') }}">
<meta charset="UTF-8">
<title>FastAPI</title>
</head>
<body>
<h1>Welcome to this FastAPI course!</h1>
</body>
</html>
5. main.py 수정
from fastapi import FastAPI, Depends
import models
from database import engine
from routers import auth, todos
from starlette.staticfiles import StaticFiles
app = FastAPI()
models.Base.metadata.create_all(bind=engine)
#mount를 통해서 static 폴더를 찾게 구성한다.
app.mount("/static", StaticFiles(directory="static"), name="static")
app.include_router(auth.router)
app.include_router(todos.router)
728x90
SMALL