我們怎麼看到網頁的

假設你今天想要訪問http://www.example.com/

DNS(Domain Name System)

利用 HTTP/HTTPS 請求網頁內容

接收檔案

1. 程式檔 (Code files): HTML , CSS , Javascript , webassembly
2. 資產檔 (Asset): 圖片 , 影片 , 音樂 …

渲染頁面

那Python去哪裡了？

前端、後端？

前端是瀏覽器上運行的程式碼。由於瀏覽器上只能執行HTML、CSS、Javascript、webassembly，因此前端只以這四種語言構成。

後端是伺服器上運行的程式碼。基本上可以使用任何程式語言。

Why 框架

1. 提供函式庫、應用程式架構
2. 易於維護、更新
3. 其他人也在用

Which 框架

source

前置作業

1. 安裝套件 pip install flask
2. 準備一個獨立的資料夾裝所有檔案

Hello Sprout !

from flask import Flask
app = Flask(__name__)
 
@app.route("/")
def hello_sprout():
    return "<h1>Hello, Sprout! My name is 超級貓貓男</h1>"
 
 
if __name__ == "__main__":
    app.run()

初始化

from flask import Flask
app = Flask(__name__)

建立路由(route)與頁面(view)

@app.route("/")
def hello_sprout():
    return "<h1>Hello, Sprout! My name is 超級貓貓男</h1>"

執行網路應用程式

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

另外一個方法

1. 設定環境變數。

   • Windows cmd: set FLASK_APP=sprout-1
   • Windows Powershell: $env:FLASK_APP = "sprout-1"
   • Mac/Linux: export FLASK_APP=sprout-1

2. 執行flask run

現在是…練習時間

讓伺服器顯示自己的名字。
執行的時候使用app.run(host="0.0.0.0")。

補充說明

<h1>Hello, Sprout! My name is 超級貓貓男</h1>

這東西超怪對吧

看看資芽官網

<div id="back">
      <img class="logo" src="/spt/index_bk1.png"></img>
      <div id="nav">
        <ul class="rside">
          <li class="plan"><a href="javascript:reload_page('/spt/')">計劃</a></li>
          <li class="about"><a href="javascript:reload_page('/spt/about/')">關於</a></li>
          <li class="qa"><a href="javascript:reload_page('/spt/qa/')">Q&amp;A</a></li>
        </ul>
        <ul class="lside">
          <li class="rule"><a href="javascript:reload_page('/spt/rule/')">規則</a></li>
          <li class="poll"><a href="javascript:reload_page('/spt/poll/')">評價</a></li>
          <li class="indiv"><a href="javascript:reload_page('/spt/indiv/');">個人</a></li>
        </ul>
      </div>
      <div class="foot">
        <span>訊息公告暨粉絲專頁: <a href="https://www.facebook.com/ntucsiesprout"><u>資訊之芽培訓計畫</u></a></span><br>
        <span>電子郵件地址: <a href="mailto:sprout@csie.ntu.edu.tw">sprout@csie.ntu.edu.tw</a></span><br>
        <span></span><br>
      </div>
    </div>
    <div id="main"></div>
    <div id="overlay">
      <img src="/spt/ring-alt.svg" id="loading"></img>
    </div> 
    

HTML

ref: https://developer.mozilla.org/en-US/docs/Glossary/Element

因為我們是教Python，所以不會太深入講。有興趣的學員可以參考這裡。

網站上可以有很多頁面(view)，可以通過不同路由(route)存取

@app.route("/lecturer")
def lecturer():
    return '<blockquote class="imgur-embed-pub" lang="en" data-id="a/5Hh8HRm" data-context="false" ><a href="//imgur.com/a/5Hh8HRm"></a></blockquote><script async src="//s.imgur.com/min/embed.js" charset="utf-8"></script>'
 
@app.route("/price")
def fee():
    return "<p>兩個階段都1700</p>"

動態路由

@app.route("/student/<studentName>")
def hello_student(studentName):
    return f"<h1>Hello, {studentName}!</h1>"

HTTP 協定

@app.route("/secret")
def getSecret():
    try:
        inputPassword = request.args.get("password")
        if (password != inputPassword ):
            raise Exception("Password incorrect")
        return "<h1>我的房子還蠻大的</h1>"
    except Exception as e:
        return f"403 Forbidden : {e}" , 403

HTTP 有用的小知識

parameters

status code

Redirect

@app.route("/rick")
def rickroll():
    return redirect("https://www.youtube.com/watch?v=dQw4w9WgXcQ")

現在是…練習時間

做一個網站顯示造訪人次

前置作業

1. 建立名為templates的資料夾放模板檔案（一字不差）

邏輯與頁面分離

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

<h1>Hello Sprout!</h1>

Jinja2 模板引擎

動態渲染網頁內容

變數

@app.route("/jay")
def jaySayHi():
    return render_template("jay.html" , longName = "阿傑" , shortName = "傑哥")

<h1>對了，我叫{{ longName }}，我也常來這裡玩，痾，他們都叫我{{ shortName }}。</h1>

條件

@app.route("/adult")
def adult():
    age = 0
    try:
        age = int( request.args.get("age"))
    except Exception as e:
        print(e)
    return render_template("adult.html" , age = age )

<h1>都{{ age }}歲了還那麼害羞</h1>
{% if age > 18 %}
<h1>還可以教你登大人喔</h1>
{% else %}
<h1>但是你不能登大人。</h1>
{% endif %}

迴圈

@app.route("/store")
def store():
    cart = {"酒":10 , "麵包":20 , "南瓜":887414}
    return render_template("store.html" , cart = cart )

<h1>什麼都可以拿嗎杰哥？</h1>
{%for item , quantity in cart.items() %}
 <p>{{item}} 買了 {{quantity}} 個。</p>
{% endfor %}

繼承

{% block title %}
<h1>國立臺灣大學</h1>
<p>
    國立臺灣大學是一所積極新創、學科齊全、學術實力雄厚、辦學特色鮮明，在國際上具有重要影響力與競爭力的大學，在多個學術領域具有非常前瞻的科技實力，擁有世界一流的實驗室與師資力量，各種排名均位於全球前列。歡迎大家報考國立臺灣大學。
</p>
<a href="{{url_for("ntu")}}">返回主頁</a>
{% endblock %}
 
{% block content %}
{% endblock %}

@app.route("/ntu")
def ntu():
    return render_template("ntu.html")

{% extends "ntuBase.html" %}
{% block title %}
{{super()}}
<style>
    h1{
        color: red;
    }
</style>
{% endblock %}
 
{% block content %}
<p>國立臺灣大學前身為日治時期之「臺北帝國大學」（創立於日本昭和3年、西元1928年、民國17年）。當時首任校長為幣原坦總長；至民國34年（1945年）二次世界大戰結束，日本投降、臺灣光復，同年11月15日我政府完成接收臺北帝國大學，改制更名為「國立臺灣大學」，由羅宗洛博士任首任校長。</p>
{% endblock %}

安裝套件pip install xlrd

@app.route("/ntu/<departmentCode>")
def department(departmentCode):
    workbook = xlrd.open_workbook_xls("dpt_code.xls")
    worksheet = workbook[0]
    info = f"{departmentCode} 沒有這個科系"
    for  row , code in enumerate(worksheet.col(1)):
        if (code.value == departmentCode):
            info = f"{departmentCode}－{worksheet.cell_value(row , 2)} {worksheet.cell_value(row , 6)}"
    return render_template("department.html" , info = info)

{% extends "ntuBase.html" %}
{% block title %}
{{super()}}
{% endblock %}
 
{% block content %}
<p>{{info}}</p>
{% endblock %}

現在是…練習時間

嘗試利用前面的內容，製作一個高中學校代碼查詢系統。

可以參考99hscode.xls。

前置作業

1. 安裝套件 pip install flask-wtf

我們可能需要什麼？

資料雙向的流通

HTTP method

1. GET 從伺服器拿資料。
2. POST 把資料給伺服器。

Form

from flask_wtf import FlaskForm
from wtforms import StringField , SubmitField , IntegerField
from wtforms.validators import DataRequired
 
class rollcallForm(FlaskForm):
    name = StringField("你的名字：" , validators=[DataRequired()])
    email = StringField("你的電子信箱：" , validators=[DataRequired()])
    studentId = IntegerField("你的學號：" , validators=[DataRequired()])
    message = StringField("其他建議：")
    submit = SubmitField("送出")

<h2>資訊之芽簽到表單</h2>
<h1>Hello {{name}}!</h1>
 
<form method="POST">
    {{ form.hidden_tag() }}
    <div>
        {{form.name.label}} {{form.name()}}
    </div>
    <div>
        {{form.email.label}} {{form.email()}}
    </div>
    <div>
        {{form.studentId.label}} {{form.studentId()}}
    </div>
    <div>
        {{form.message.label}} {{form.message()}}
    </div>
    <div>
        {{form.submit()}}
    </div>
 
</form>

Session & Flash

@app.route("/", methods=["GET", "POST"])
def index():
    if session.get("name") is None:
        flash("歡迎來到資訊之芽！")
        session["name"] = "資芽新學員"
    form = rollcallForm()
    if form.validate_on_submit():
        session["name"] = form.name.data
        print(form.data)
        return redirect(url_for("index"))
    return render_template("sproutForm.html", form=form, name=session.get("name"))
 
@app.route("/clear")
def clear():
    session.clear()
    return redirect(url_for("index"))

<a href="{{url_for("clear")}}">清除Session</a>

現在是…練習時間

用一個頁面顯示同一個學員在同一個 Session 的簽到記錄

試試看用不同的電腦連接到自己的網站

pythonanywhere

網頁非常好

參考事項

1. https://help.pythonanywhere.com/pages/Flask/

延伸學習資料

1. SQL資料庫 https://flask-sqlalchemy.palletsprojects.com/en/2.x/

2. Email發送 https://pythonhosted.org/Flask-Mail/

3. 一堆酷東西 https://www.fullstackpython.com/flask-extensions-plug-ins-related-libraries.html

4. 編教材時用的工具書 https://www.books.com.tw/products/0010793455?sloc=main