learning from 100 Days of Code: The Complete Python Pro Bootcamp for 2022
- 內建在Flask中
main.py
from flask import Flask, render_template
from random import randint
from datetime import datetime
import requests
app = Flask(__name__)
# 對應 index.html
@app.route('/')
def home():
random_num = randint(0, 10)
current_year = datetime.today().year
# 將變數(name=value)傳入，供HTML讀取
return render_template("index.html", num=random_num, year=current_year)
# 對應 guess.html
@app.route('/guess/<name>')
def guess(name):
your_name = name.title()
age_url = f"https://api.agify.io?name={name}"
age_response = requests.get(url=age_url)
age_guess = age_response.json()["age"]
gender_url = f"https://api.genderize.io/?name={name}"
gender_response = requests.get(url=gender_url)
gender_guess = gender_response.json()["gender"]
return render_template("guess.html", name=your_name, age=age_guess, gender=gender_guess)
# 對應 blog.html (HTML的get_url()回傳參數: num)
@app.route('/blog/<num>')
def get_blog(num):
blog_url = "https://api.npoint.io/c790b4d5cab58020d391"
blog_response = requests.get(blog_url)
all_posts = blog_response.json()
return render_template("blog.html", posts=all_posts)
if __name__ == "__main__":
app.run(debug=True)
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Website</title>
</head>
<body>
<h1>Hello World!</h1>
<!-- HTML導入python運算 -->
<h2>{{5*6}}</h2>
<!-- HTML中導入python變數 -->
<h3>Random number: {{ num }}</h3>
<!-- HTML中傳送連結(python中函式，可附上參數) -->
<a href="{{ url_for('get_blog', num=3) }}">Go to blog</a>
</body>
<footer>
Copyright {{ year }}. Build by Penny.
</footer>
</html>
guess.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Guess</title>
</head>
<body>
<!-- HTML中導入python變數 -->
<h1>Hello {{ name }},</h1>
<h2>I think you are {{ gender }},</h2>
<h3>And maybe {{ age }} years old.</h3>
</body>
blog.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Blog</title>
</head>
<body>
<!-- HTML中使用python迴圈(for / if) -->
{% for post in posts: %}
{% if post["id"] == 2: %}
<h1>{{ post["title"] }}</h1>
<h2>{{ post["subtitle"] }}</h2>
{% endif %}
{% endfor %}
</body>
</html>
簡易 Blog 設計
blog.py
from flask import Flask, render_template
import requests
app = Flask(__name__)
BLOG_URL = " https://api.npoint.io/c790b4d5cab58020d391"
BLOG_RESPONSE = requests.get(url=BLOG_URL)
BLOG_POSTS = BLOG_RESPONSE.json()
@app.route('/')
def home():
global BLOG_POSTS
print(BLOG_POSTS)
return render_template("index.html", posts=BLOG_POSTS)
@app.route('/blog/<id>')
def get_post(id):
global BLOG_POSTS
index = int(id) - 1
return render_template("post.html", post=BLOG_POSTS[index])
if __name__ == "__main__":
app.run(debug=True)
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 class="text">{{ post["subtitle"]}}</p>
<a href="{{ url_for('get_post', id=post['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>
![[ 筆記 ] JavaScript - 01 陣列](https://mtr04-note.coderbridge.io/2020/06/18/javascript-array/?utm_source=coderbridge-io&utm_medium=blog_related_post_img&utm_campaign=learning_tech_[ 筆記 ] JavaScript - 01 陣列_@krebikshaw_https://static.coderbridge.com/img/krebikshaw/17e22d791f4a47c5aeb83cfa6dcd57bb.jpg)
![[ 筆記 ] Express 03 - ORM ＆ Sequelize](https://mtr04-note.coderbridge.io/2020/10/10/sequelize/?utm_source=coderbridge-io&utm_medium=blog_related_post_img&utm_campaign=learning_tech_[ 筆記 ] Express 03 - ORM ＆ Sequelize_@krebikshaw_https://static.coderbridge.com/img/krebikshaw/2435c265064c42358a4e8edc1a02bf7d.jpg)
