分類
伺服器

Flask網站架設(html+css+js)

這一篇會簡單介紹:

  • 利用flask,結合html、css、js檔案架出一個漂亮、可互動的網頁
  • 怎麼將server中的參數傳入html並秀出

Flask 專案基本架構

app.py: 主要入口,控制route
templates: 放置html,Flask default會從這邊抓取html檔案
static: 放置css, js, images,Flask default會從這邊抓取css, js, images檔案
lib: 放置其他自訂python script,執行想要的功能,例如演算法

  • app.py
  • static
    • css
      • home_pages.css
    • js
      • home_pages.js
    • images
  • templates
    • home_pages.html
  • lib

/templates/home_pages.html

<head>
...
...
## import css檔案夾下的home_page.css
<link type="text/css" rel="stylesheet" href="{{ url_for('static', filename='css/home_page.css') }}"/>
...
...
## import js套件(jquery, 沒用到可略)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
...
...
## import js檔案夾下的home_page.js
<script src="{{ url_for('static', filename='js/home_page.js') }}" type="text/javascript"></script>
...
...
</head>

<p>
## 配合app.py, 接收server的parameters並顯示
This is the params from server {{params['te']}}
</p>

/static/js/home_pages.js

## 加入這行, 會等html load完才載入js
$(document).ready(function(){
...
...
## example code, 按下button後會產生hello字樣
    $(".button").click(
        function(){
            $(".text").html('Hello')
    }
)
...
...
});

/app.py

from flask import Flask
from flask import render_template
from lib import test_algo           ## demo用, 簡單的lib

app= Flask(__name__)

@app.route('/')
def home():
    te = test_algo.test_func(5,6)
    params={'te':te}

    ## 將參數傳入並開啟home_page.html
    return render_template("home_page.html", params=params)

app.run(host='0.0.0.0', port=8000)

執行

python app.py

打開localhost:8000,網頁就可以成功秀出了

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *