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(): 첫번째 인자에는 html파일명을 넣어주면 그 html파일을 렌더링한다는 뜻이고,
두번째 인자는 info
라는 이름으로 getInfo
라는 데이터를 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에 장점을 알아낸 기분이었다.