56일차까지 알아보았던 jinja, flask, api 등을 토대로 간단한 블로그 기사 API에 접근하여 기사들을 추출하고,
플라스크 서버 가동 및 jinja 템플레이팅을 통해 웹을 가동해보았다.
<main.py>
from flask import Flask, render_template
import requests
from post import Post
# Post 클래스로 기사내용 정리
posts = requests.get("<https://api.npoint.io/ed99320662742443cc5b>").json()
post_objects = []
for post in posts :
post_obj = Post(post["id"], post["title"],post["subtitle"],post["body"])
post_objects.append(post_obj)
# 플라스크 앱 가동
app = Flask(__name__)
# 메인 페이지@app.route('/')
def home():
blog_url = "<https://api.npoint.io/ed99320662742443cc5b>"
response = requests.get(blog_url)
all_blog = response.json()
# 변수로 API로 가져온 내용 전달return render_template("index.html",all_blog=all_blog)
# 메인 페이지와 연결된 상세보기 링크@app.route('/post/<int:blog_id>')
def post(blog_id):
requested_post = None
for blog_post in post_objects :
if blog_post.id == blog_id :
requested_post = blog_post
return render_template("post.html", post=requested_post)
if __name__ == "__main__":
app.run(debug=True)
<post.py>
class Post:
def __init__(self, blog_id, title, subtitle, body):
self.id = blog_id
self.title = title
self.subtitle = subtitle
self.body = body
<index.html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="<https://fonts.googleapis.com/css2?family=Raleway>" rel="stylesheet">
<link rel="stylesheet" href="../static/css/styles.css">
</head>
<body>
<div class="wrapper">
<div class="top">
<div class="title"><h1>My Blog</h1></div>
</div>
{%for blog in all_blog :%}
<div class="content">
<div class="card">
<h2>{{blog["title"]}}</h2>
<p class="text">{{blog["subtitle"]}}</p>
<a href="{{ url_for('post', blog_id=blog['id']) }}">Read</a>
</div>
</div>
{% endfor %}
</div>
</body>
<footer>
<p>Made with ♥️ in London.</p>
</footer>
</html>
<post.html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="<https://fonts.googleapis.com/css2?family=Raleway>" rel="stylesheet">
<link rel="stylesheet" href="../static/css/styles.css">
</head>
<body>
<div class="wrapper">
<div class="top">
<div class="title"><h1>My Blog</h1></div>
</div>
<div class="content">
<div class="card">
<h1>{{ post.title }}</h1>
<h2>{{ post.subtitle }}</h2>
<p>{{ post.body }}</p>
</div>
</div>
</div>
</body>
<footer>
<p>Made with ♥️ in London.</p>
</footer>
</html>