用flask写一个图文直播网页（六）

最后就只剩下直播首页了。

首页布局

关于布局，这个就看个人喜好了，我是根据直播客这个平台的大小做的，定义的盒子大小也是跟直播客差不多。
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">
<!--&lt;!&ndash;禁用浏览器缓存&ndash;&gt;-->

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

到这里就没什么要说的了，代码也不详细一一解释了，我觉得，自己慢慢探索出代码的意义会更好。
总体看哇！写的很少，代码很多，果然我还是好懒哦(ㅍ_ㅍ)

用flask写一个图文直播网页（六）

首页布局

推荐阅读更多精彩内容