最后就只剩下直播首頁了。
首頁布局
關(guān)于布局,這個就看個人喜好了,我是根據(jù)直播客這個平臺的大小做的,定義的盒子大小也是跟直播客差不多。
test.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Cache-Control" CONTENT="no-cache">
<META HTTP-EQUIV="Refresh" CONTENT="100">
<!--<!–禁用瀏覽器緩存–>-->
<link type="text/css" rel="stylesheet" href="{{ url_for('static', filename = 'test/main.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename = 'test/lrtk.css') }}" />
<link rel="stylesheet" href="{{ url_for('static', filename = 'css/test.css') }}">
<title>直播的名字</title>
</head>
<body>
<div class="main">
<div class="zhibo">
<div style="position: relative">
<img src="{{ url_for('static', filename = 'images/11.png') }}" height="200" width="740">
<div style="position: absolute; left: 10px; top: 50px" id="title">
<h2>介紹</h2>
</div>
</div>
<div id="zhuti">
<div id="zhiding" class="time">置頂</div>
<article class="message" id="firstMessage">現(xiàn)場直播</article>
</div>
<ul id="show">
{% for i in photo %}
<li>
<div class="patch">
<div class="patch_on">
<div class="time_info">
<strong>{{ i.create_time }}</strong>
</div>
<div class="center">
<img src="{{ url_for('static', filename = 'image/' + i.picture_path) }}" height="446" width="594" class="center_img">
<p>{{ i.content }}</p>
</div>
</div>
</div>
</li>
<p>{% endfor %}</p>
</ul>
<div class="qidai">內(nèi)容已經(jīng)加載完畢,敬請期待更多內(nèi)容</div>
</div>
</div>
<script type="text/javascript" src="{{ url_for('static', filename =
'test/jquery.min.js') }}"></script>
<script type="text/javascript" src="{{ url_for('static', filename = 'test/jquery.imgbox.pack.js') }}"></script>
{#<script type="text/javascript" src="{{ url_for('static', filename = 'test/jquery-3.2.1.js') }}"></script>#}
<script type="text/javascript" src="{{ url_for('static', filename = 'test/test.js') }}"></script>
<!--foot開始-->
<div id="foot" >
<div>
<a href=# rel="nofollow">關(guān)于我們</a>|<a
href=#>實驗室微博</a>|<a
href=#>實驗室官網(wǎng)</a>
<br/>
"DROPS攻防實驗室-安全研發(fā)小組版權(quán)所有"
</div>
</div>
</body>
<script>
</script>
</html>
這里用到了一些前端的js文件,是一些同學(xué)幫我弄得,本來他給我寫了一些json代碼,無奈wo太笨了,json一時半會沒學(xué)會,也就用了那種把圖片信息存儲進數(shù)據(jù)庫的笨辦法 o(TωT)o ,好了,下面再貼上直播主頁的功能代碼吧。
sc.py
# 直播首頁
@app.route('/')
def test():
photo_all = Article.query.order_by('-create_time').all()
content = {
'photo': photo_all # 獲取所有數(shù)據(jù)
}
return render_template('test.html', **content)
到這里就沒什么要說的了,代碼也不詳細一一解釋了,我覺得,自己慢慢探索出代碼的意義會更好。
總體看 哇!寫的很少,代碼很多,果然我還是好懶哦(?_?)