美文网首页
用flask写一个图文直播网页(二)

用flask写一个图文直播网页(二)

作者: reknow | 来源:发表于2018-05-03 18:14 被阅读0次

其实我也是新手,框架结构什么的还不懂的怎么弄,然后我放的就比较简单

项目结构

其中,static里面放css跟images、image文件,image里面放的是图文直播内容的图片,images里面放的是图文直播标题的背景图。

首先说一下后台主界面吧,后台样式是从bootstrip上复制的基本模本,然后自己稍加改动形成的。

后台页面样式

这样后台做起来会更简单点,直接从bootstrip上找一个自己喜欢的后台管理模板,然后copy到templates下的base.html里就行了,然后以此作为父后台模板。

其他的页面可以使用{% extends 'base.html' %}来继承父模板的样式。

base.html中还会预留一下一些主体{% block main %}{% endblock %}、页面标题{% block head %}{% endblock %}等一些接口,这样其他的页面可以在继承了父模板的页面上随心所欲的改动其他部分

后台主界面代码展示 管理员登录界面

然后通过这种方法再加上CSS代码的一些控制,你就可以把管理界面改成自己喜欢的样子(好像我做的有点low啊 0.0,css学的不好,伤心一秒T.T)

最后再来贴一个图文管理界面代码,后面再来解释这些。

{% extends 'base.html' %}
{% block yemian %}图文管理界面{% endblock %}
{% block main %}
    <div class="row">
        <form action="" enctype="multipart/form-data" method="POST" class="form-horizontal">
        <table class="table table-hover">
            <tr>
                <th>序号</th>
                <th>图片</th>
                <th>文章</th>
                <th>提交时间</th>
                <th>操作</th>
            </tr>
                {% for item in photo %}
                <tr>
                    <td>{{ loop.index }}</td>
                    <td width="15%">
                        <img src="{{ url_for('static', filename = 'image/' + item.picture_path) }}" alt="" height="70" width="100">
                    </td>
                    <td width="50%" height="87">{{ item.content }}</td>
                    <td>{{ item.create_time }}</td>
                    <td>
                        <a href="{{ url_for('detail_a', photo_id = item.id) }}" class="btn btn-default btn-xs" title="查看"><i class="fa fa-search"></i></a>
                        <a href="{{ url_for('change_a', photo_id = item.id) }}" class="btn btn-default btn-xs" title="修改"><i class="fa fa-pencil"></i></a>
                        <a href="{{ url_for('remove', content=item.content) }}" class="btn btn-default btn-xs" title="删除"><i class="fa fa-trash"></i></a>
                    </td>
                </tr>
                {% endfor %}
        </table>
    </form>
</div>
{% endblock %}

相关文章

网友评论

      本文标题:用flask写一个图文直播网页(二)

      本文链接:https://www.haomeiwen.com/subject/peslrftx.html