還在摸索Flask中，感覺比較大的好處是直接就包含web Server了，
不用另外設定(Ngix, Apache..)。
不太確定有沒有前後端分離的概念，目前測試感覺都是由Flask包好再傳到前端，
速度似乎稍微慢一點。（也有可能是我還不會設定...）
範例程式:
從localhost:8080/ 頁面中的下拉選擇圖片並按下送出後，
進入另一個頁面顯示所選擇的圖片。
由於想要在顯示圖片時，也顯示下拉選單中的圖片名稱，
但不知道Python如何顯示，所以使用Jquery將選單文字加到隱藏欄位，
用Post表單的方式將文字帶出來。
Flask程式目錄下有：
- templete資料夾: 存放html檔案
- static資料夾：存放CSS、圖片、JS檔案...
- 其他就是python檔
檔案如下:
- python檔sample.py
- 首頁 index.html(存在template中)
- 圖片頁 showImg.html(存在template中)
- CSS檔 sample.css(存在static/css中)
- 圖片檔 sample.css(存在static/images中 請自行找圖喔)
- 另外還有JQuery檔(請自行下載)
python檔： sample.py
PS. 安裝Flask (pip install flask)
from flask import render_template (存取template html資料)
from flask import request (若有透過POST, GET 傳值 則需要request)
import time
import flask
from flask import render_template
from flask import request
import netFunc
#--Flask
app = flask.Flask(__name__)
#首頁路徑Function
@app.route('/')
def index():
#下拉選單的資料
imgs=[
{'val':'cat','text':'貓'},
{'val':'flower','text':'花'},
{'val':'rabit','text':'兔子'}
]
#顯示為template中的index.html
return render_template('index.html',**locals())
#當路徑為submit時，執行的function
@app.route('/p', methods=['POST'])
def showImg():
#取得圖片選單的value，並加上完整路徑
imgName=request.values['imgPick']
imgurl='./images/'+imgName+'.jpg'
#取得隱藏欄位的value
imgText=request.values['tmptext']
return render_template('showImg.html',**locals())
if __name__=='__main__':
ip='localhost'
app.run(host=ip,port=8080,debug=True)
首頁 index.html
<!DOCTYPE html>
<html lang='zh-TW'>
<head>
<meta charset="utf-8" />
<title>This Sample Page</title>
<link type="text/css" rel="stylesheet"
href="{{ url_for('static',filename='css/sample.css')}}" />
<script src="{{url_for('static',filename='js/jquery-3.5.1.min.js')}}" ></script>
</head>
<body>
<!--建立POST 方法的表單，並在送出後，將路徑加上submit-->
<form method="post" action="/p">
<label>選擇圖片</label>
<div id="func">
<select id="picker" name="imgPick" onchange="getSelect()">
{% for i in imgs %}
<option value={{i.val}} >{{i.text}}</option>
{% endfor %}
</select>
<!--透過隱藏的欄位記錄選項文字-->
<input type="text" name="tmptext" id="tmptext" style="display:none ;"></input>
<button type="submit">確認</button>
</div>
</form>
</body>
</html>
<script>
//一進入頁面就先取得選單文字並帶入表單tmptext
$(document).ready(function(){
selectText=$('#picker').find(':selected').text()
$('#tmptext').val(selectText)
})
//透過JS取得選擇的選項文字
function getSelect(){
selectText=$('#picker').find(':selected').text()
$('#tmptext').val(selectText)
}
</script>
圖片頁 showImg.html
<!DOCTYPE html>
<html lang='zh-TW'>
<head>
<meta charset="utf-8" />
<title>This Sample Page</title>
<link type="text/css" rel="stylesheet"
href="{{ url_for('static',filename='css/sample.css')}}" />
<script src="{{url_for('static',filename='js/jquery-3.5.1.min.js')}}" ></script>
</head>
<body>
<div id="show">
<a href="/">回前頁</a>
<label >所選擇圖片為-{{imgText}}</label>
<!--圖片會根據Python回傳得imgurl顯示-->
<img src="{{url_for('static',filename=imgurl)}}" />
</div>
</body>
</html>
CSS檔 sample.css
form{
display: block;
width: 50%;
height: auto;
margin: 1px auto;
padding: 10px;
}
#func{
margin-top: 10px;
}
label{
font-size: 18pt;
color: rgb(3, 84, 84);
margin: 10px;
}
#picker{
color: rgb(133, 50, 6);
font-size: 14pt;
}
button{
background-color: rgb(3, 84, 84);
color: white;
}
#show{
display: block;
width: 50%;
height: auto;
margin: 1px auto;
padding: 10px;
margin-top: 10px;
margin-bottom: 10px;
}
#show a{
display: block;
width: 80px;
line-height: 30px;
font-size: 14pt;
text-decoration: none;
background-color: rgb(200,210,220);
color: rgb(80,80,80);
border-radius: 5px;
text-align: center;
}
#show a:hover{
background-color: rgb(129, 168, 160);
color: white;
border-radius: 5px;
}
#show label{
margin-top: 10px;
margin-bottom: 10px;
}
img{
margin: 10px;
}
沒有留言:
張貼留言