用flask写一个图文直播网页（六）
2018-05-03 本文已影响0人
reknow
最后就只剩下直播首页了。
首页布局
关于布局，这个就看个人喜好了，我是根据直播客这个平台的大小做的，定义的盒子大小也是跟直播客差不多。
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">现场直播</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">内容已经加载完毕，敬请期待更多内容</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">关于我们</a>|<a
href=#>实验室微博</a>|<a
href=#>实验室官网</a>
<br/>
"DROPS攻防实验室-安全研发小组版权所有"
</div>
</div>
</body>
<script>
</script>
</html>
这里用到了一些前端的js文件，是一些同学帮我弄得，本来他给我写了一些json代码，无奈wo太笨了，json一时半会没学会，也就用了那种把图片信息存储进数据库的笨办法 o(TωT)o ，好了，下面再贴上直播主页的功能代码吧。
sc.py
# 直播首页
@app.route('/')
def test():
photo_all = Article.query.order_by('-create_time').all()
content = {
'photo': photo_all # 获取所有数据
}
return render_template('test.html', **content)
到这里就没什么要说的了，代码也不详细一一解释了，我觉得，自己慢慢探索出代码的意义会更好。
总体看 哇！写的很少，代码很多，果然我还是好懒哦(ㅍ_ㅍ)
