Python으로 HTML을 렌더링 할 때 데이터 보내기 with. render_template

jangdu·2023년 5월 17일
0

Flask

목록 보기
1/2

MongoDB CRUD를 사용해서 팀원들을 소개하는 미니 프로젝트를 Python의 웹 프레임워크인 Flask로 구현해보는 과정에서 db에 담긴 내용을 읽어와서 html에 전송하는 방식으로 진행했는데

flask에서 렌더링 할 때,
즉, html GET요청을 받을때 response에 데이터를 넣는 방법을 알아보자.

이 글은 mongoDB에는

{name: 이름, _id: 고유id, image: 이미지url, github: gitgub주소}

대충 이런식으로 데이터들이 여러개 저장되어 있고
venv 가상환경에서 진행하며,
각 라이브러리들은 이미 설치되고 mongoDB도 세팅한 상태
라고 가정하고 작성했다.

서버에서 렌더요청 처리

MongoDB Data Service에서 connect부분을 확인해보면 mongoDB주소를 확인할 수 있다

몽고디비를 통해서 가져온 데이터들을 index.html을 렌더링하는 요청을 처리할 때 보내는 방식을 알아보면 아래처럼 할 수 있다.

# app.py
from flask import Flask, render_template, jsonify, request, json
from pymongo import MongoClient

app = Flask(__name__)

# MongoDB Data Service에서 connect부분을 확인
client = MongoClient('mongodb+srv://어쩌고 저쩌고')

db = client.db이름

@app.route('/')
def home():
    getInfo = list(db.colection이름.find({}, {'_id':False}))
    return render_template('index.html', info=getInfo)

if __name__ == '__main__':
    app.run('0.0.0.0', port=5501, debug=True)

def home()안을 살펴보면

getInfo = list(db.colection이름.find({}, {'_id':False}))

db에서 받아온 데이터들을 list형태로 getInfo에 넣었고

return render_template('index.html', info=getInfo)

받은 데이터를 render_template()을 통해서 보내는 방식을 사용했다.

render_template()

render_template(): 첫번째 인자에는 html파일명을 넣어주면 그 html파일을 렌더링한다는 뜻이고,
두번째 인자는 info라는 이름으로 getInfo라는 데이터를 html렌더링 할 때 넘겨줄게~ 라는 말임

html에서 받은 데이터 써보기

위처럼 요청을 잘 처리하고 나서 html을 작성할 때,
{{info[0].name}}이런식으로 걍 아무데나 넣어서 사용하면 알아서 그 info내의 데이터를 사용할 수 있다.

예를 들어서 우리 팀원을 소개하는 페이지에서
이름과, 사진, github주소를 보여주는 페이지를 작성한다면,

// index.html
<div class="card c2">
  	// 사진
  	<img src="{{info[0].image}}" class="card-img-top" alt="bi">
    <div class="card-body">
      // 이름
      <h5 class="card-title">{{info[0].name}}</h5>
	  // git주소
      <p>{{info[0].github}}</p>
    </div>
</div>

이런식으로 사용 할 수 있다.
본인은 이런 방식에서 특히 img태그에 src부분에서도 {{}}이거로 처리할 수 있다는 부분에서 좀 놀랐고 생각보다 간단해서 Flask에 장점을 알아낸 기분이었다.

profile
대충적음 전부 나만 볼래

0개의 댓글