-
[FLASK] 홈페이지 구현FLASK 2022. 11. 11. 09:58
이번엔 아래와 같이 HTML 코드를 작성하여
웹페이지를 표현해 보겠습니다!from flask import Flask app = Flask(__name__) @app.route('/') def index(): return '''<!doctype html> <html> <body> <h1><a href="/">WEB</a></h1> <ol> <li><a href="/read/1/">html</a></li> <li><a href="/read/1/">css</a></li> <li><a href="/read/1/">javascript</a></li> </ol> <h2>Welcome</h2> Hello, Web </body> </html> ''' @app.route('/create/') def create(): return 'Create' @app.route('/read/<id>/') def read(id): return 'Read '+id실행하면 다음과 같은 웹페이지가 나옵니다.
표시된 부분의 데이터를 분리해서
파이썬의 데이터 구조로 만들고 동적으로 표현해 보겠습니다.
topics = [ {'id':1, 'title': 'html', 'body': 'html is ...'}, {'id':2, 'title': 'css', 'body': 'css is ...'}, {'id':3, 'title': 'javascript', 'body': 'javascript is ...'} ]
순서가 있는 데이터이므로(1, 2, 3)
리스트를 사용하고
제목, id, 클릭했을 때 나오는 내용은 딕셔너리로
topics라는 변수에 담았습니다.
@app.route('/') def index(): liTags = '' for topic in topics: liTags = liTags + f'<li><a href="/read/{topic["id"]}/">{topic["title"]}</a></li>' return f'''<!doctype html> <html> <body> <h1><a href="/">WEB</a><h1> </ol> {liTags} </ol> <h2>Welcome</h2> Hello, Web </body> </html> '''위와 같이 코드를 수정합니다.
topics라는 변수에 있는 데이터들을 목록으로 표현하기 위해
반복문인 for문을 사용했습니다.
순회가 이루어질때 마다 liTags에 기존의 liTags를 더합니다.
<a>태그를 추가하여 링크를 걸고
/read/를 추가하여 클릭시
Read 1, Read 2, Read 3 문구가 출력되는 상세보기 페이지로 이동합니다.
기존 데이터 자리에 liTags를 넣어주고 실행하면
처음과 같은 웹페이지를 확인할 수 있습니다!
목록을 클릭해 보면
상세페이지 또한 잘 나오는 것을 확인할 수 있습니다~!
※ (지금은 리스트와 딕셔너리를 이용한
메모리에 올라가 있는 데이터를 사용하고 있지만
일반적인 web framework에서는
데이터를 데이터베이스에 저장합니다 !!!
나중에는 데이터베이스에 데이터를 읽어오는 코드로 변경하여 사용해야 합니다.)
출처
'FLASK' 카테고리의 다른 글
[FLASK] 쓰기(Create)_2 (0) 2022.11.12 [FLASK] 쓰기(Create)_1 (0) 2022.11.12 [FLASK] 읽기(Read) (0) 2022.11.11 [FLASK] 라우팅(Routing) (0) 2022.11.09 [FLASK] 환경셋팅하기 (0) 2022.11.09