iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 13
0
Modern Web

慢慢帶你了解Flask系列 第 13

慢慢帶你了解Flask - Day13 網路相簿(9):照片影片串流

大家好,我是長風青雲。
今天是參加鐵人賽的第十三天,恭喜,我們今天是講網路相簿的最後一天了!
排版方面,其實我的預想便是像以前無名小站那樣的形式。(聽說比我再小,就不會聽過無名了哈哈哈)。

所以先讓我們來寫他的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>
html{
  height:100%;
  }
body{
	margin: 0;
	font-family: Arial, Helvetica, sans-serif;
  background-color: lavender;
  height: 100%;
  }

table{
  border:none;
  width:70%;
  height: 95%;
  padding-top: 5%;
}

td{
  text-align: center;
}

img,video{
  max-width: 100%;
  max-height:400px; 
}
video{
  border:1px solid #aaa;
}

@media screen and (max-width: 400px)
{
  ul{
    z-index: 100;
  }
  table{
    border:none;
    width:90%;
    height: 100%;
    padding-top: 10%;
  }
  img,video{
    max-width: 100%;
    max-height: 300px;
  }
  video{
    border:1px solid #aaa;
  }
}



.button {
  border:0;
  background-color:darkviolet;
  color:#fff;
  border-radius:20px;
  cursor:pointer;
  width:90px;
  height:30px;
}
.present{
}
.button:hover{
  color:black;
  background-color: lavender;
}

.up {
  border:none;
  background-color: lavender;
  height: 10%;
  width:50%;
}
.left{
  text-align: left;
  padding-left: 10%;
}
.right{
  text-align: right;
  padding-right: 10%;
}



</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>

<table align="center">
  <form action="" enctype='multipart/form-data' method='POST'>    
    <tr>
      <td class="up" style="text-align: left;">
          Folder:<select id="folder" name=folder onchange="this.form.submit()">
              {% for dir in dirs %}
                <option value={{dirs.index(dir)}}>{{dir}}</option>
              {% endfor %}
            </select>
      </td>
    </tr>
    <tr>
      {% if name == fileName[0] and name == fileName[-1] %}
        <td class="up left"><input class='button' value='往前' name='next' type='submit' disabled></td>
        <td class="up right"><input class='button' value='往後' name='next' type='submit' disabled></td>
      {% elif name == fileName[0] %}
        <td class="up left"><input class='button' value='往前' name='next' type='submit' disabled></td>
        <td class="up right"><input class='button' value='往後' name='next' type='submit'></td>
      {% elif name == fileName[-1] %}
        <td class="up left"><input class='button' value='往前' name='next' type='submit'></td>
        <td class="up right"><input class='button' value='往後' name='next' type='submit' disabled></td>
      {% else %}
        <td class="up left"><input class='button' value='往前' name='next' type='submit'></td>
        <td class="up right"><input class='button' value='往後' name='next' type='submit'></td>
      {% endif %}
    </tr>
  </form>
  <tr>
  <td colspan="2" class="present">
    {% if name[-3::] == 'jpg' %}
    <img src="../../static/uploads/{{username}}/{{folder}}/photo/{{name}}">
    {% else %}
    <video controls="controls">
      <source src="../../static/uploads/{{username}}/{{folder}}/video/{{name}}" type="video/mp4">
    </video>
    {% endif %}
  </td>
  </tr>
</table>
	
<script>
function myFunction() {
  var x = document.getElementById("topnav");
  if (x.className === "computer") {
    x.className = "phone";
  } else {
    x.className = "computer";
  }
}
</script>

</body>
</html>

這裡就很像album那邊顯示圖片、選相簿而已。
往前往後的部分,我們留等一下app.py時說,於是比較值得注意的就只剩CSS RWD的部分。跟之前很像,但剛剛我在進行測試的時候發現了一個狀況。
Yes
我們disable的button居然會比我們的navbar還要上層!
這時就用到z-index,層數高的會蓋過低的。而我就很隨意的設為100((懶
接著就顯示正常了……但是我其實並不滿意。他還是有bug的……

在我原先的預想中,當我手機進行轉向,他將會依我屏幕的大小變長相。
是的,又是跟album顯示時遇見類似的問題。
所以前天無法解決問題的我,當然還是沒辦法解決問題。
只能依照自己的視窗大小設定max-height。(因為我在td用比例他不裡我QAQ)
非常地不美觀!所以我覺得我做的還不夠好。
如果有人能告訴我怎麼修改,我會非常感謝你!(為什麼我腦海中突然冒出三隻眼睛的綠色外星人
https://ithelp.ithome.com.tw/upload/images/20190909/201201163lCkS0aSFF.jpg因為你救了我們,我們永遠感謝你!

然後我來跟你們說說app.py的部分。(後端還是比較可愛的……只需要程式碼的秩序美)

@app.route('/stream/<folder>/<name>',methods=['GET','POST'])
def stream(folder,name):
	basepath = os.path.join(os.path.dirname(__file__),'static','uploads')
	dirs=os.listdir(os.path.join(basepath,session.get('username')))
	dirs.insert(0,'')

	fileName=[]
	for lists in os.listdir(os.path.join(basepath,session.get('username'),folder,'photo')):
		sub_path = os.path.join(os.path.join(basepath,session.get('username'),folder,'photo'),lists)
		fileName.append(lists)
	for lists in os.listdir(os.path.join(basepath,session.get('username'),folder,'video')):
		sub_path = os.path.join(os.path.join(basepath,session.get('username'),folder,'video'),lists)
		fileName.append(lists)

	if request.method=='POST':
		if request.values['folder'] !='0':
			folder=dirs[int(request.values['folder'])]
			fileName.clear()
			fileName=[]
			for lists in os.listdir(os.path.join(basepath,session.get('username'),folder,'photo')):
				sub_path = os.path.join(os.path.join(basepath,session.get('username'),folder,'photo'),lists)
				fileName.append(lists)
			for lists in os.listdir(os.path.join(basepath,session.get('username'),folder,'video')):
				sub_path = os.path.join(os.path.join(basepath,session.get('username'),folder,'video'),lists)
				fileName.append(lists)
			name=fileName[0]
		elif request.values['next']=='往前':
			name=fileName[(fileName.index(name))-1]
		elif request.values['next']=='往後':
			name=fileName[(fileName.index(name))+1]
		return redirect(url_for('stream',folder=folder,name=name))
	return render_template('stream.html',dirs=dirs,name=name,folder=folder,fileName=fileName,username=session.get('username'))

這裡fileName的作用就是將相冊中的影片和圖片一起彙整。
然後request.value[‘folder’]!=’0’就代表我們選擇換新相冊,所以fileName要重新彙整,而預設先顯示第一張。
往前與往後,就是抓初原先的照片位於fileName哪個位置,往前往後找便是。
在html裡,如果我們現在是第一張,往前就會disable,同樣最後一張時往後也會disable,如果這個相簿只有一個檔案,那麼就無法往前往後。
Yes

Yes
想想,其實也已經沒什麼特別好說的了。其實album部分到這裡已經算是完成50%左右了吧。
而我也打算這是我在鐵人賽中網路相簿的最後一篇。
完整的程式碼我會放到github上,之後如果有時間我會進行更新。
(Fatube便是這次網路相簿的原型,但當我深入探索後,發現那是個絕對的失敗品)
如果有興趣追這個album的人……應該沒有人?
好了好了,廢話不多說,明天我們要講我們第二個實例 ── 個人單字書。
https://ithelp.ithome.com.tw/upload/images/20190909/20120116LtToq1ckEt.png


上一篇
慢慢帶你了解Flask - Day12 網路相簿(8):刪除相片
下一篇
慢慢帶你了解Flask - Day14 個人單字書(1):前言+Flask-Login
系列文
慢慢帶你了解Flask30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言