Day 057

45284 단어 udemyFlaskjinjapythoncapstone projecthtml

Udemy Python Bootcamp Day 057

Using Jinja to Produce Dynamic HTML Pages

Jinja

The HTML files can actually act as a template as long as we know how to work with a templating language. The tmplating languagethat we're going to use is called Jinja.
It allows us to use some syntax like {}, %, or {{}} in order to specify inside the HTML file which parts should actually be evaluated as Python code.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My Website</title>
</head>
<body>
    <h1>Hello, World!</h1>
    <h2>{{ 5 * 6 }}</h2>
</body>
</html>

from flask import Flask, render_template
import random
import datetime

app = Flask(__name__)


@app.route('/')
def home():
    random_number = random.randint(1, 10)
    current_year = datetime.datetime.now().year
    return render_template("index.html", num=random_number, year=current_year)


if __name__ == "__main__":
    app.run(debug=True)

The most important thing is I want to be able to send this random number over to my index.html and incorporate it into this template when I render it.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My Website</title>
</head>
<body>
    <h1>Hello, World!</h1>
    <h2>{{ 5 * 6 }}</h2>
    <h3>Random number: {{ num }}</h3>
</body>
<footer>
    <p>©Copyright {{ year }}. Built by Awesome Kim.</p>
</footer>
</html>



Combining Jinja Templating with APIs

guess.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Guess</title>
</head>
<body>
    <h1>Hey {{ name.title() }},</h1>
    <h2>I think you are {{ gender }}</h2>
    <h3>And maybe {{ age }} years old.</h3>
</body>
</html>

.py

import requests

AGE_ENDPOINT = "https://api.agify.io/?name="
GENDER_ENDPOINT = "https://api.genderize.io/?name="

@app.route('/guess/<name>')
def guess(name):
    gender_response = requests.get(GENDER_ENDPOINT + name)
    gender = gender_response.json()["gender"]
    age_response = requests.get(AGE_ENDPOINT + name)
    age = age_response.json()["age"]
    return render_template("guess.html", name=name, gender=gender, age=age)


미쳐부러따.. 내가 해내버렸다......

Multiline Statements with Jinja

@app.route('/blog')
def blog():
    blog_url = "https://api.npoint.io/2fa8f877104b260d1b8b"
    response = requests.get(blog_url)
    all_posts = response.json()
    return render_template("blog.html", posts=all_posts)

blog.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Blog</title>
</head>
<body>
    {% for blog_post in posts: %}
        <h1>{{ blog_post["title"] }}</h1>
        <h2>{{ blog_post["subtitle"] }}</h2>
    {% endfor %}
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Blog</title>
</head>
<body>
    {% for blog_post in posts: %}
        {% if blog_post["id"] == 2: %}
            <h1>{{ blog_post["title"] }}</h1>
            <h2>{{ blog_post["subtitle"] }}</h2>
        {% endif %}
    {% endfor %}
</body>
</html>



URL Building with Flask

@app.route('/blog/<num>')
def get_blog(num):
    print(num)
    blog_url = "https://api.npoint.io/2fa8f877104b260d1b8b"
    response = requests.get(blog_url)
    all_posts = response.json()
    return render_template("blog.html", posts=all_posts)

index.html

    <a href="{{ url_for('get_blog', num=3) }}">Go To Blog</a>



Blog Capstone Project Part 1 - Templating


이렇게 만드는건 어렵지 않게 했는데
Read버튼 눌러서 다른 route호출하는 거에서 완전히 실패함

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 post in posts: %}
        <div class="content">
            <div class="card">
                <h2>{{ post["title"] }}</h2>
                <p>{{ post["subtitle"] }}</p>
                <a href="{{ url_for('show_post', index=post.id) }}">Read</a>
            </div>

        </div>
        {% endfor %}
</div>
</body>
<footer>
    <p>Made with ♥️ in London.</p>
</footer>
</html>

index.html에서 href="{{ url_for('show_post', index=post.id) }}"이렇게 작성하는 걸 상상도 못함..
html에서 url호출시 main.py에 있는 함수 불러올 수 있음

main.py

from flask import Flask, render_template
import requests
from post import Post

posts = requests.get("https://api.npoint.io/e82dfd36fe5719f2df6f").json()
post_objects = [Post(post["id"], post["title"], post["subtitle"], post["body"]) for post in posts]

app = Flask(__name__)


@app.route('/')
def home():
    return render_template("index.html", posts=posts)


@app.route('/post/<int:index>')
def show_post(index):
    requested_post = None
    for blog_post in post_objects:
        if blog_post.id == index:
            requested_post = blog_post
    return render_template("post.html", post=requested_post)


if __name__ == "__main__":
    app.run(debug=True)

posts에 있는 item들을 리스트로 만들어서 사용하는 것도 생각하지 못함
사실 def show_post(index)가 왜 저렇게 작성됐는지도 완벽하게 이해하지 못함..
id를 blog_post.id 이렇게 호출하는 것도 이유를 모르겠음..

+) 2022.04.06
Post()Class 호출시 속성값 반환이라 이렇게 작성함.

대충 이번 프로젝트는 엉망이라는 얘기..

post.py

class Post:
    def __init__(self, post_id, title, subtitle, body):
        self.id = post_id
        self.title = title
        self.subtitle = subtitle
        self.body = body

역시 OOP작성하는 것도,, 이렇게 __init__으로 값만 호출하는 구나,,

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>
[알고리즘] 4963 섬의 개수
[BOJ] 1546 (브론즈 1)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage