728x90
프로젝트 디렉터리 구조
| fastapi | |||||
| todoapp | |||||
| main.py database.py models.py todos.db |
templates | static | routers | ||
| todo | |||||
| css | js | ||||
| home.html add-todo.html edit-todo.html login.html register.html layout.html |
base.css bootstrap.css |
bootstrap.js jquery-slim.js popper.js |
auth.py todos.py |
||
html상 중복된 코드를 Jinja를 통해 간결하게 만들자
templates 디렉터리 하위에 layout.html 생성
1. layout.html 수정
html상 중복되었던 navbar와 script문을 기입
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="{{ url_for('static', path='/todo/css/base.css') }}">
<link rel="stylesheet" type="text/css" href="{{ url_for('static', path='/todo/css/bootstrap.css') }}">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>TodoApp</title>
</head>
<body>
<!-- navbar 생성-->
<div>
<nav class="navbar navbar-expand-md navbar-dark main-color fixed-top">
<a class="navbar-brand" href="#">Todo App</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home </a>
</li>
</ul>
</div>
</nav>
</div>
{% block content %}
{% endblock %}
<!--순서상 jquery를 먼저-->
<script src="{{ url_for('static', path='/todo/js/jquery-slim.js') }}"></script>
<script src="{{ url_for('static', path='/todo/js/popper.js') }}"></script>
<script src="{{ url_for('static', path='/todo/js/bootstrap.js') }}"></script>
</body>
</html>Jinja의 block을 이용해서 원하는 위치에 내용을 추가할 수 있다 == 상속 개념
{% block 블록명 %}으로 block을 열고 {% endblock %}으로 block을 닫는다.
2. 각각의 html 파일을 수정(예시로 home.html)
<div class="container"> 부분만 남긴다.
{% include 'layout.html' %}
<!--todo list 만들기-->
<div class="container">
<div class="card text-center">
<!--상단제목-->
<div class="card-header">
Your Todos!
</div>
<!--하단제목-->
<div class="card-body">
<h5 class="card-title">List of your Todos!</h5>
<p class="card-text">Information regarding stuff that needs to be complete</p>
<!--테이블 만들기-->
<table class="table table-hover">
<thead>
<tr>
<!--해당 셀이 column(열)-->
<th scope="col">Actions</th>
<th scope="col">Info</th>
<th scope="col">#</th>
</tr>
</thead>
<!--3가지의 다른 데이터-->
<tbody>
<!--1번 section-->
<tr class="pointer">
<td>1</td>
<td>Take out the trash</td>
<td>
<button type="button" class="btn btn-success">Complete</button>
<button type="button" class="btn btn-danger">Delete</button>
</td>
</tr>
<!--2번 section-->
<tr class="pointer">
<td>2</td>
<td>Take out the trash</td>
<td>
<button type="button" class="btn btn-success">Complete</button>
<button type="button" class="btn btn-danger">Delete</button>
</td>
</tr>
<!--3번 section-->
<tr class="pointer" >
<td>3</td>
<td >Take out the trash </td>
<td>
<button type="button" class="btn btn-success">Complete</button>
<button type="button" class="btn btn-danger">Delete</button>
</td>
</tr>
</tbody>
</table>
<a href="#" class="btn btn-primary">Add a new Todo!</a>
</div>
</div>
</div>Jinja의 include를 통해서 하나의 html에서 다른 html을 가져올 수 있도록 해준다.
내부적으로는 랜더링된 결과를 리턴한다.
3. 레이아웃 내용 정리
layout.html의 {% blcok content %} 부분에 각각의 html 파일의 container부분이 {% endblock %}까지 들어간다.
home.html을 API에서 호출할 때 layout.html의 {% block content %} 부분에 포함돼서 전체 코드가 호출된다.
728x90
SMALL
'Develop > FastAPI' 카테고리의 다른 글
| FastAPI 프로젝트 진행(HTML 렌더링, DB 연결)- 84 (0) | 2023.01.29 |
|---|---|
| FastAPI 프로젝트 진행(추가 레이아웃, 추상화) - 83 (0) | 2023.01.26 |
| FastAPI 프로젝트 진행(HTML 렌더링 API 생성)- 81 (0) | 2023.01.26 |
| FastAPI 프로젝트 진행(로그인, 회원가입 프론트 구현) - 80 (0) | 2023.01.25 |
| FastAPI 프로젝트 진행(form 생성 / 수정) - 79 (0) | 2023.01.25 |
