[Flask] 파이썬으로 웹페이지 만들기 (1) 환경설정 및 기본 페이지 구성
[Flask] 파이썬으로 웹페이지 만들기 (2) Bootstrap 연동하기
[Flask] 파이썬으로 웹페이지 만들기 (3) URL Building(url_for)
[Flask] 파이썬으로 웹페이지 만들기 (4) 페이지 로그인 기능 만들기( 값 입력 및 출력)
[Flask] 파이썬으로 웹페이지 만들기 (5) 이미지 삽입하기
지금까지 페이지를 만들고, Bootstrap Starter Template으로 웹을 꾸며보았습니다.
결과 예시
이제 위의 icon을 누르면 starter-template이 아닌 위 페이지가 뜨도록 바꾸어봅시다.
1. url_for을 사용하는 이유
url_for을 사용하면, 기본 주소가 바뀌더라도 이를 route로 지정하여 open이 가능합니다.
2. 사용 방법
(1) index.html 고치기
경로 : Project_Name/app/templates/main/index.html
index.html에 들어가 아래 부분을 수정해줍니다.
수정할 부분
href 부분을 다음과 같이 바꾸어 줍니다.
<a class="navbar-brand" href="{{ url_for('main.index') }}">Flask 예시 - 코딩무민</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><a href="{{ url_for('main.index') }}">Home</a></li>
<li><a href="{{ url_for('main.url') }}">New_Url</a></li>
<!-- <li class="active"> 하면 icon active 가능 -->
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>-<a href ="{{ url_for('main.index') }}"> : main/index.html으로 url을 옮겨라
- <a href ="{{ url_for('main.url') }}"> : main/url.html으로 url을 옮겨라 (url.html은 만들것)
- <li class="active"> : icon active 가능
(2) 새로운 페이지 만들기 (* url.html)
경로 : Project_Name/app/templates/main/url.html
index.html을 그대로 복사해온 뒤, 아래 부분을 수정합니다.
수정할 부분
<body> 에서 <div class ="container"> 부분 수정
<div class="container">
<div class="starter-template">
<p class="lead"> 이렇게 url building 완료
<br> </p>
</div>
</div><!-- /.container -->
(3) index.py 수정
from flask import Blueprint, request, render_template, flash, redirect, url_for
from flask import current_app as app
main = Blueprint('main', __name__, url_prefix='/')
@main.route('/main', methods = ['GET'])
def index():
return render_template('/main/index.html')
#추가
@main.route('/main/url', methods = ['GET'])
def url():
return render_template('/main/url.html')
(4) 결과 예시
이제 결과를 살펴보면 다음과 같이 나옵니다.
1) 메인창
http://127.0.0.1:8001/main
2) New_Url 창
http://127.0.0.1:8001/main/url
'etc > [Python] Flask' 카테고리의 다른 글
| [Flask] 파이썬으로 웹페이지 만들기 (5) 이미지 삽입하기 (0) | 2020.12.29 |
|---|---|
| [Flask] 파이썬으로 웹페이지 만들기 (4) 페이지 로그인 기능 만들기( 값 입력 및 출력) (0) | 2020.12.28 |
| [Flask] 파이썬으로 웹페이지 만들기 (2) Bootstrap 연동하기 (0) | 2020.12.28 |
| [Flask] 파이썬으로 웹페이지 만들기 (1) 환경설정 및 기본 페이지 구성 (2) | 2020.12.28 |