iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 27
1
Modern Web

🍐放學後的網頁開發系列 第 27

[Day27] 柚子放學後的網頁生活 - Flask render

上一篇簡介了Flask的優點,以及介紹最基本的用法,但要這麼把他跟網頁結合呢 ~~

Render

先複習上次的hello world

from flask import Flask, render_template
app = Flask(__name__)

@app.route('/hello')
def hello():
    return 'hello!'

if __name__ == "__main__":
    app.run(port=9000)

接著用

python XXX.py

讓他run起來

確認成功後,我們來動點手腳

建立Templates

我們建立一個Templates資料夾,來放HTML

建議資料夾名為Templates防止出錯哦

待會我們會用Flask內建package來抓這資料夾的資料

建立HTML

建立完Templates資料夾後
在裡面建立HTML檔,Ex : index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>FLASK / HTML</title>
  </head>
  <body>
    <h1> FLASK / HTML <h1>
  </body>
</html>

render_template

from flask import Flask, render_template

@app.route('/')
def index():
    return render_template('index.html')

先import render_template進來,
我們在另外用一個route,來 render 剛剛所建立的index.html,有沒有感覺跟Django很像呢 ~

Test

http://127.0.0.1:9000/
看到這個畫面就成功囉 ~

傳入參數

還沒結束,我們來看看怎麼傳值呢

def index():
    title = 'Good Flask'
    return render_template('index.html',title=title)

類似Django的寫法,設title為想傳入的值

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>FLASK / HTML</title>
  </head>
  <body>
    <h1> {{title}} <h1>
  </body>
</html>

這邊一樣用雙大括號{{}}去接

就可以看到結果囉!!
是不是更快速呢

下課囉 ~ 請鎖定柚子放學後的網頁生活


上一篇
[Day26] 柚子放學後的網頁生活 - Flask intro
下一篇
[Day28] 柚子放學後的網頁生活 - Flask project
系列文
🍐放學後的網頁開發30

尚未有邦友留言

立即登入留言