大家好，我是長風青雲。今天是第十一天。
做了這麼久的圖片修改，我們今天終於進到我們的album.html了。
接下來我們來看看album.html吧～
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="{{url_for('static',filename='css/nav_bar.css')}}">
<title>ironman album</title>
</head>
<style>
body{
margin: 0;
font-family: Arial, Helvetica, sans-serif;
background-color: lavender;
}
table{
border-radius:5px;
padding-bottom: 10px;
padding-top: 0px;
margin-top:20px;
width:70%;
}
th{
border-radius:10px;
}
td{
border:1px #000 solid;
background-color: white;
}
input{
font-size: initial;
}
span {
background-color:#FFC8B4;
box-shadow:1px 1px 3px red;
margin-right:8px;
text-align: right;
}
div{
padding-top: 80px;
padding-left:20px
}
@media screen and (max-width: 400px){
table{
width:100%;
}
div{
padding-top: 80px;
padding-left:10px;
padding-right: 10px;
}
}
.button {
border:0;
background-color:darkviolet;
color:#fff;
border-radius:20px;
cursor:pointer;
width:90px;
height:30px;
}
.button:hover{
color:black;
background-color: lavender;
}
</style>
<body>
<ul class="computer" id="topnav">
<li><a href="../" class="active">首頁</a></li>
<li><a href="../album">相簿</a></li>
<li><a href="../upload">上傳</a></li>
<li><a href="../logout">登出</a></li>
<li style="float:right"><a href="javascript:void(0);" class="icon" onclick="myFunction()"><i class="fa fa-bars"></i></a></li>
</ul>
<div>
<form method="post">
<table align="center">
<tr><td style="border:none;background-color: lavender"><p>選擇你想看的相冊：</p>
<select id="folder" name=folder onchange="this.form.submit()">
{% for dir in dirs %}
<option value={{dirs.index(dir)}}>{{dir}}</option>
{% endfor %}
</select></td></tr>
{% for folder in filefolder %}
<tr>
<th colspan="7" bgcolor="darkorchid">{{folder}}</th>
</tr>
{% if files[folder]['photo'] != [] %}
<tr>
<th colspan="7" bgcolor="blueviolet">photo</th>
</tr>
{% endif %}
{% for image in files[folder]['photo'] %}
{% if files[folder]['photo'].index(image) % colspan == 0 and files[folder]['photo'].index(image) != 0 %}
<tr>
<td align="center">
<img src="../static/uploads/{{username}}/{{folder}}/album/photo/{{image}}" width="150" height="150">
</td>
{% else %}
<td align="center">
<img src="../static/uploads/{{username}}/{{folder}}/album/photo/{{image}}" width="150"height="150">
</td>
{% endif %}
{% endfor %}
{% if files[folder]['video'] != [] %}
<tr>
<th colspan="7" bgcolor="blueviolet">video</th>
</tr>
{% endif %}
{% for vlog in files[folder]['video'] %}
{% if files[folder]['video'].index(vlog) % colspan == 0 and files[folder]['video'].index(vlog) != 0 %}
<tr>
<td align="center" >
<img src="../static/uploads/{{username}}/{{folder}}/album/video/{{vlog[:-4]}}.jpg" width="150" height="150">
</td>
{% else %}
<td align="center">
<img src="../static/uploads/{{username}}/{{folder}}/album/video/{{vlog[:-4]}}.jpg" width="150" height="150">
</td>
{% endif %}
{% endfor %}
{% endfor %}
</table>
</form>
</div>
</body>
</html>
在這裡，我是使用table作為我展示圖片的方式的。
邏輯是，我的相簿裡有很多相冊，我依序打開我的相冊後可以先看我的照片，看完照片後再看我的影片，接下來看下一個相冊。
然後在這裡我要跟大家說一聲不好意思，我寫著寫著，不知道為什麼把他設定為我們無法偷看別人的相簿了。(我原先預設是可以看哈哈哈，然後雖然可以修正，但我發現修正的過程太繁雜，而且我發現我原先並沒有打算開發朋友這種功能，所以便算了。之後鐵人賽結束，有時間我會把它改回來的～)
我們預設是一次看所有的相冊，在我們的(app.py)他這一部份是這樣寫的。
colspan=int(int(session.get(‘width’))/150)
if colspan>7:
colspan=7
basepath = os.path.join(os.path.dirname(__file__), ‘static’,’uploads’)
dirs=os.listdir(os.path.join(basepath,session.get(‘username’)))
dirs.insert(0,’ALL’)
dirs.insert(0,”)
dict2={}
for dir in dirs:
if dir == “ALL” or dir == “:
continue
dict2[dir]={’photo’:[],’video’:[]}
path=os.path.join(basepath,session.get(‘username’),dir,’photo’)
for lists in os.listdir(path):
dict2[dir][’photo’].append(lists)
path=os.path.join(basepath,session.get(‘username’),dir,’video’)
for lists in os.listdir(path):
dict2[dir][’video’].append(lists)
return render_template(‘album.html’,dirs=dirs, files=dict2, filefolder=dirs[2:], username=session.get(‘username’), colspan=colspan)
我一一解釋一下，我們直接從回傳數據看，dirs是我們所擁有的全部相冊，0為空，1為ALL。(這部分是我們要放<select>裡面的)
dict2的作用是將我們所擁有的檔案紀錄下來，我把他print出來。
{’123’: {’photo’: [’15677950160409915.jpg’, ‘15677950173225784.jpg’, ‘1567795018330255.jpg’, ‘15677950194246352.jpg’, ‘156779502123567.jpg’, ‘15677950222243538.jpg’, ‘15677950228051763.jpg’, ‘15677950257820058.jpg’], ‘video’: [’15677950284507706.mp4’, ‘15677950286147187.mp4’, ‘1567795028780664.mp4’]}}
filefolder就是把不要前面兩項的dir，也就是我們實際上的相冊。他的意義便是我們所要顯示的相冊list出來，所以如果是說只要顯示一個相冊那他就會長[‘123’]這幅模樣。如若不是就可能長[‘123’,’456’]username是告訴他，我是誰，請你到我的相簿讓我顯示我的圖片。colspan這名字取得有點熟悉啊？沒錯，這是處理table每一行td數。
我們來討論一下這個，畢竟這我也走過彎路呢……
不過我要跟大家說，我這個做法還是不好，我自己不滿意，是我現在想不到更好的辦法了，所以只能這樣寫。
我之後會再去查查，然後學習後……再作補充？
(走錯路的小故事)
為了把網站改為RWD的網站，我一直在思考顯示的問題。但是這次問題有點大，我的問題是──無法在使用者進入album時，每時每刻獲取使用者屏幕大小然後傳給後端
為什麼要傳給後端？因為我要靠我的jinja2把我的td換行阿！
{% if files[folder]['photo'].index(image) % colspan == 0 and files[folder]['photo'].index(image) != 0 %}
<tr>
<td align="center">
<img src="../static/uploads/{{username}}/{{folder}}/album/photo/{{image}}" width="150" height="150">
</td>
{% else %}
<td align="center">
<img src="../static/uploads/{{username}}/{{folder}}/album/photo/{{image}}" width="150"height="150">
</td>
{% endif %}
但是可怕的是，RWD本身其實是前端的事情，所以我才會說我的做法還是失敗的。所以我的做法變為 ──先讀好進來album時使用的屏幕寬度，然後再作修正。
((也就是說，如果我進來時屏幕寬度為320，那他會分為兩格(320/150)，但是我可能將屏幕變大變小啊！(比如手機轉向？)那他就不會知道，然後維持原本的兩格，不會因此變為3格、4格。))
我一開始的作法非常的失敗，因為相簿本身是個連結，我不知道怎麼將資料post過去。我隨時都有可能會去看相簿，那該怎麼辦才好呢？
所以我寫了一個pre_album.html。
當我進入album的時候，他發現我沒有進入過pre_album，他會將我送到pre_album，然後從pre_album那個網頁知道現在網路寬度後，在把我重新導回album。
看看看、這個寫法多可怕？我還得跳轉過頁面……
於是我打開了line，很難過得跟我朋友說「我的做法很差勁……」結果打一打，突然之間靈光一閃。
雖然我還是沒有辦法解決我只能get一次屏幕寬度的問題，但是我現在的album不是已經只能看自己的相簿了嗎？
那為什麼不在login的時候讀取屏幕寬度呢？這樣至少避免了跳轉問題。
所以讓我們回到login.html還有login(app.py)那邊吧。
改動的內容不多
我在<script>裡面加入了一個新function
function screen(){
var x=document.body.clientWidth;
document.getElementById("bodywidth").value=x;
}
document.body.clientWidth這是獲取網頁寬度。
他獲取網頁寬度後，會找到id為bodywidth的input並把他的值改為我們所獲取的網頁寬度。
而我是在登入這一格把input放進來。
<td colspan="2" align="right"><input id="bodywidth" type="hidden" name="bodywidth"><input class="button" value="登入" type='submit' name="send"></td>
將他設為hidden，那別人就看不到了，一切都還像以前一樣。只是他的背後我們其實偷偷將網頁寬度也進行傳輸了。
但是我們還沒有呼叫這個function，所以我們在<body>那邊改為<body onload="screen()">讓他一進入這個頁面就先做這個動作。
而我們資料進行傳輸後，就像我們的username一樣。session['width']=request.values['bodywidth']
這樣他就記住了，然後在進入album時，他便會去計算他一行所能接受的td也就是colspan。
所以讓我們來看看全部的album(app.py)吧。
@app.route('/album/', methods=['POST', 'GET'])
def album():
colspan=int(int(session.get('width'))/150)
if colspan>7:
colspan=7
basepath = os.path.join(os.path.dirname(__file__), 'static','uploads')
dirs=os.listdir(os.path.join(basepath,session.get('username')))
dirs.insert(0,'ALL')
dirs.insert(0,'')
dict2={} #record all folder has what number name
for dir in dirs:
if dir == "ALL" or dir == '':
continue
dict2[dir]={'photo':[],'video':[]}
path=os.path.join(basepath,session.get('username'),dir,'photo')
for lists in os.listdir(path):
dict2[dir]['photo'].append(lists)
path=os.path.join(basepath,session.get('username'),dir,'video')
for lists in os.listdir(path):
dict2[dir]['video'].append(lists)
if request.method == 'POST':
if request.values['folder']!='0' and request.values['folder']!='1':
return render_template('album.html',dirs=dirs,colspan=colspan, \
filefolder=[dirs[int(request.values['folder'])]],files=dict2,username=session.get('username'))
elif request.values['folder'] =='1':
return render_template('album.html',dirs=dirs, colspan=colspan,\
filefolder=dirs[2:],files=dict2,username=session.get('username'))
return render_template('album.html',dirs=dirs, files=dict2, filefolder=dirs[2:],colspan=colspan,username=session.get('username'))
接下來讓我們看看影片～
今天就到這裡，明天我會講如何刪除照片。
所以album還會受到更改～
P.S.如果有邦友知道如何將資料傳給後端，然後有閒暇空餘，請告訴我該怎麼辦 QAQ → 第一次寫網頁的新手
裝嫩抓到 !P.S.如果有邦友知道如何將資料傳給後端，然後有閒暇空餘，請告訴我該怎麼辦 QAQ → 第一次寫網頁的新手
用 MySQL 存
我是第一次寫前端沒錯啊XD
用MySQL⋯⋯我正在學呢?
iThome鐵人賽
看影片追技術