FastAPI 프로젝트 진행(DB 데이터 화면 뿌리기) -86

PostgreSQL user 테이블

PostgreSQL todos 테이블

 

1. API 수정

@router.get("/edit-todo/{todo_id}", response_class=HTMLResponse)
async def edit_todo(request: Request, todo_id: int, db: Session = Depends(get_db)):

    todo = db.query(models.Todos).filter(models.Todos.id == todo_id).first()

    return templates.TemplateResponse("edit-todo.html", {"request":request, "todo": todo})

 

2. edit-todo.html 수정

{% include 'layout.html' %}

<div class="container">
    <div class="card">
       <!--상단 타이틀-->
        <div class="card-header">
            Let's edit your todo!
        </div>
       <!--줄바꿈-->
        <div class="card-body">
            <form>
                <div class="form-group">
                    <label>Title</label>
                   <!--text 박스-->
                    <input type="text" class="form-control" name="title" value="{{todo.title}}"
                           required>
                </div>
                <div class="form-group">
                    <label>Description</label>
                    <!--text 공간박스-->
                    <textarea class="form-control"rows="3" name="description" required>{{todo.description}}
                    </textarea>
                </div>
                <div class="form-group">
                    <label>Priority</label>
                   <!--옵션선택-->
                    <select class="form-control" name="priority">
                        <option {% if todo.priority == 1%} selected="selected" {% endif %}>1</option>
                        <option {% if todo.priority == 2%} selected="selected" {% endif %}>2</option>
                        <option {% if todo.priority == 3%} selected="selected" {% endif %}>3</option>
                        <option {% if todo.priority == 4%} selected="selected" {% endif %}>4</option>
                        <option {% if todo.priority == 5%} selected="selected" {% endif %}>5</option>
                        <option {% if todo.priority == 6%} selected="selected" {% endif %}>6</option>

                    </select>
                </div>
               <!--제출버튼-->
                <button type="submit" class="btn btn-primary">Edit your todo</button>
               <button type="button" class="btn btn-danger"> Delete</button>
            </form>
        </div>
    </div>
</div>

value = "{{todo.title}}" todo테이블의 첫 번째 데이터의 title 값을 가져온다.
{{todo.description}} todo테이블의 첫번째 데이터의 description 값을 가져온다.
{% if todo.priority == 1 %} todo테이블의 첫 번째 데이터의 priority가 1일 경우 == python의 if 문과 동일
selected = "selected" 선택
{% endif %} if문 종료

http://127.0.0.1:8000/todos/edit-todo/2

url의 edit-todo/2의 2는 테이블의 id값을 이야기한다.