美文网首页
Flask 构建微电影视频网站(2.1)

Flask 构建微电影视频网站(2.1)

作者: 听你讲故事啊 | 来源:发表于2018-12-01 11:23 被阅读0次

    搭建前台页面

    前台布局搭建

    将static中的文件拷贝到项目的static目录下
    在app/templates/home下新建home.html,当作基础模板,并修改静态资源链接

    <!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1 , user-scalable=no">
    <title>微电影</title>
    <link rel="shortcut icon" href="{{ url_for('static', filename='base/images/logo.png') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='base/css/bootstrap.min.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='base/css/bootstrap-movie.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='base/css/animate.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='base/css/animate.css') }}">
    <style>
        .navbar-brand>img {
            display: inline;
        }

    </style>
    <style>
        .media{
            padding:3px;
            border:1px solid #ccc
        }

    </style>
</head>

<body>
<!--导航-->
<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
        <!--小屏幕导航按钮和logo-->
        <div class="navbar-header">
            <button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a href="index.html" class="navbar-brand" style="width:250px;">
                <img src="{{ url_for('static', filename='base/images/logo.png') }}" style="height:30px;">&nbsp;微电影
            </a>
        </div>
        <!--小屏幕导航按钮和logo-->
        <!--导航-->
        <div class="navbar-collapse collapse">
            <form class="navbar-form navbar-left" role="search" style="margin-top:18px;">
                <div class="form-group input-group">
                    <input type="text" class="form-control" placeholder="请输入电影名！">
                    <span class="input-group-btn">
                        <a class="btn btn-default" href="search.html"><span class="glyphicon glyphicon-search"></span>&nbsp;搜索</a>
                    </span>
                </div>
            </form>
            <ul class="nav navbar-nav navbar-right">
                <li>
                    <a class="curlink" href="index.html"><span class="glyphicon glyphicon-film"></span>&nbsp;电影</a>
                </li>
                <li>
                    <a class="curlink" href="{{ url_for('home.login') }}"><span class="glyphicon glyphicon-log-in"></span>&nbsp;登录</a>
                </li>
                <li>
                    <a class="curlink" href="register.html"><span class="glyphicon glyphicon-plus"></span>&nbsp;注册</a>
                </li>
                <li>
                    <a class="curlink" href="{{ url_for('home.lougot') }}"><span class="glyphicon glyphicon-log-out"></span>&nbsp;退出</a>
                </li>
                <li>
                    <a class="curlink" href="user.html"><span class="glyphicon glyphicon-user"></span>&nbsp;会员</a>
                </li>
            </ul>
        </div>
        <!--导航-->

    </div>
</nav>
<!--导航-->
<!--内容-->
<div class="container" style="margin-top:120px">
    {% block content %}
    
    {% endblock %}
    
</div>
<!--内容-->
<!--底部-->
<footer>
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <p>
                    ©&nbsp;2018&nbsp;movie.cht3.top&nbsp;京ICP备 13046642号-2
                </p>
            </div>
        </div>
    </div>
</footer>
<!--底部-->
<script src="{{ url_for('static', filename='base/js/jquery.min.js') }}"></script>
<script src="{{ url_for('static', filename='base/js/bootstrap.min.js') }}"></script>
<script src="{{ url_for('static', filename='base/js/jquery.singlePageNav.min.js') }}"></script>
<script src="{{ url_for('static', filename='base/js/wow.min.js') }}"></script>
<script src="{{ url_for('static', filename='lazyload/jquery.lazyload.min.js') }}"></script>
<script src="//cdn.bootcss.com/holder/2.9.4/holder.min.js"></script>
<script>
    $(function() {
        new WOW().init();
    })

</script>
<script>
    $(document).ready(function() {
        $("img.lazy").lazyload({
            effect: "fadeIn"
        });
    });

</script>
</body>
</html>

    新建index.html,继承home.html

    {% extends 'home/home.html' %}
{% block content %}
<h1>hello,world</h1>
{% endblock %}

    修改视图函数
    app/home/views.py

    @home.route('/')
def index():
    return render_template('home/index.html')

    运行,浏览器访问,就可看到主页面了

    会员登录页面搭建

    新建login.html

        {% extends 'home/home.html' %}

    {% block content %}
        <div class="row">
            <div class="col-md-4 col-md-offset-4">
                <div class="panel panel-primary">
                    <div class="panel-heading">
                        <h3 class="panel-title"><span class="glyphicon glyphicon-log-in"></span>&nbsp;会员登录</h3>
                    </div>
                    <div class="panel-body">
                        <form role="form">
                            <fieldset>
                                <div class="form-group">
                                    <label for="input_contact"><span class="glyphicon glyphicon-user"></span>&nbsp;账号</label>
                                    <input id="input_contact" class="form-control input-lg" placeholder="用户名/邮箱/手机号码" name="contact" type="text" autofocus>
                                </div>
                                <div class="col-md-12" id="error_contact"></div>
                                <div class="form-group">
                                    <label for="input_password"><span class="glyphicon glyphicon-lock"></span>&nbsp;密码</label>
                                    <input id="input_password" class="form-control input-lg" placeholder="密码" name="password" type="password" value="">
                                </div>
                                <div class="col-md-12" id="error_password"></div>
                                <a href="user.html" class="btn btn-lg btn-success btn-block">登录</a>
                            </fieldset>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    {% endblock %}

    创建视图函数

    @home.route('/login/')
def login():
    return render_template('home/login.html')


@home.route('/lougot/')
def lougot():
    return redirect(url_for('home.index'))

    浏览器访问即可看到登陆页面

    会员注册页面搭建

    新建regist.html

    {% extends 'home/home.html' %}

{% block content %}
    <div class="row">
        <div class="col-md-4 col-md-offset-4">
            <div class="panel panel-success">
                <div class="panel-heading">
                    <h3 class="panel-title"><span class="glyphicon glyphicon-plus"></span>&nbsp;会员注册</h3>
                </div>
                <div class="panel-body">
                    <form role="form">
                        <fieldset>
                            <div class="form-group">
                                <label for="input_name"><span class="glyphicon glyphicon-user"></span>&nbsp;昵称</label>
                                <input id="input_name" class="form-control input-lg" placeholder="昵称" name="name" type="text" autofocus>
                            </div>
                            <div class="col-md-12" id="error_name"></div>
                            <div class="form-group">
                                <label for="input_email"><span class="glyphicon glyphicon-envelope"></span>&nbsp;邮箱</label>
                                <input id="input_email" class="form-control input-lg" placeholder="邮箱" name="email" type="email" autofocus>
                            </div>
                            <div class="col-md-12" id="error_email"></div>
                            <div class="form-group">
                                <label for="input_phone"><span class="glyphicon glyphicon-phone"></span>&nbsp;手机</label>
                                <input id="input_phone" class="form-control input-lg" placeholder="手机" name="phone" type="text" autofocus>
                            </div>
                            <div class="col-md-12" id="error_phone"></div>
                            <div class="form-group">
                                <label for="input_password"><span class="glyphicon glyphicon-lock"></span>&nbsp;密码</label>
                                <input id="input_password" class="form-control input-lg" placeholder="密码" name="password" type="password" value="">
                            </div>
                            <div class="col-md-12" id="error_password"></div>
                            <div class="form-group">
                                <label for="input_repassword"><span class="glyphicon glyphicon-lock"></span>&nbsp;确认密码</label>
                                <input id="input_repassword" class="form-control input-lg" placeholder="确认密码" name="repassword" type="password" value="">
                            </div>
                            <div class="col-md-12" id="error_repassword"></div>
                            <a href="user.html" class="btn btn-lg btn-success btn-block">注册</a>
                        </fieldset>
                    </form>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

    创建视图函数

    @home.route('/regist/')
def regist():
    return render_template('home/regist.html')

    修改home.html中的链接

    <li>
    <a class="curlink" href="{{ url_for('home.regist') }}"><span class="glyphicon glyphicon-plus"></span>&nbsp;注册</a>
</li>

    访问即可看到注册页面

    会员中心页面搭建

    新建menu.html, 会员中心左侧菜单栏

    <div class="col-md-3">
    <div class="list-group">
        <a id="home_user" href="{{ url_for('home.user') }}" class="list-group-item">
            <span class="glyphicon glyphicon-user"></span>&nbsp;会员中心
        </a>
         <a id="home_pwd" href="{{ url_for('home.pwd') }}" class="list-group-item">
            <span class="glyphicon glyphicon-lock"></span>&nbsp;修改密码
        </a>
        <a id="home_comments" href="{{ url_for('home.comments') }}" class="list-group-item">
            <span class="glyphicon glyphicon-comment"></span>&nbsp;评论记录
        </a>
        <a id="home_loginlog" href="{{ url_for('home.loginlog') }}" class="list-group-item">
            <span class="glyphicon glyphicon-calendar"></span>&nbsp;登录日志
        </a>
        <a id="home_moviecol" href="{{ url_for('home.moviecol') }}" class="list-group-item">
            <span class="glyphicon glyphicon-heart"></span>&nbsp;收藏电影
        </a>
    </div>
</div>

    新建视图函数

    @home.route('/user/')
def user():
    return render_template('home/user.html')


@home.route('/pwd/')
def pwd():
    return render_template('home/pwd.html')


@home.route('/comments/')
def comments():
    return render_template('home/comments.html')


@home.route('/loginlog/')
def loginlog():
    return render_template('home/loginlog.html')


@home.route('/moviecol/')
def moviecol():
    return render_template('home/moviecol.html')

    根据视图函数新建HTML

    app/templates/home/user.html
    {% extends 'home/home.html' %}


{% block css %}
    <style>
        .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9{
            padding-right: 3px;
            padding-left: 3px;
        }
    </style>
{% endblock %}



{% block content %}
    {% include 'home/menu.html' %}

    <div class="col-md-9">
        <div class="panel panel-warning">
            <div class="panel-heading">
                <h3 class="panel-title"><span class="glyphicon glyphicon-map-marker"></span>&nbsp;会员中心</h3>
            </div>
            <div class="panel-body">
                <form role="form">
                    <fieldset>
                            <div class="form-group">
                                <label for="input_name"><span class="glyphicon glyphicon-user"></span>&nbsp;昵称</label>
                                <input id="input_name" class="form-control" placeholder="昵称" name="name" type="text" autofocus value="jinlong">
                            </div>
                            <div class="col-md-12" id="error_name"></div>
                            <div class="form-group">
                                <label for="input_email"><span class="glyphicon glyphicon-envelope"></span>&nbsp;邮箱</label>
                                <input id="input_email" class="form-control" placeholder="邮箱" name="email" type="email" autofocus value="1780316635@qq.com">
                            </div>
                            <div class="col-md-12" id="error_email"></div>
                            <div class="form-group">
                                <label for="input_phone"><span class="glyphicon glyphicon-phone"></span>&nbsp;手机</label>
                                <input id="input_phone" class="form-control" placeholder="手机" name="phone" type="text" autofocus value="13700632835">
                            </div>
                            <div class="col-md-12" id="error_phone"></div>
                            <div class="form-group">
                                <label for="input_face"><span class="glyphicon glyphicon-picture"></span>&nbsp;头像</label>
                                <img src="holder.js/100x100" class="img-responsive img-rounded">
                                <a class="btn btn-primary" style="margin-top:6px;"><span class="glyphicon glyphicon-open"></span>&nbsp;上传头像</a>
                                <input id="input_face" class="form-control" name="face" type="hidden" autofocus>
                            </div>
                            <div class="col-md-12" id="error_face"></div>
                            <div class="form-group">
                                <label for="input_info"><span class="glyphicon glyphicon-edit"></span>&nbsp;简介</label>
                                <textarea class="form-control" rows="10" id="input_info">十年窗下无人问，一举成名天下知</textarea>
                            </div>
                            <div class="col-md-12" id="error_info"></div>
                        <a href="user.html" class="btn btn-success"><span class="glyphicon glyphicon-saved"></span>&nbsp;保存修改</a>
                        </fieldset>
                </form>
            </div>
        </div>
    </div>
{% endblock %}

{% block js %}
<script>
    $(document).ready(function () {
        $("#home_user").addClass("active");
    })
</script>
{% endblock %}
    app/templates/home/pwd.html
    {% extends 'home/home.html' %}


{% block css %}
    <style>
        .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9{
            padding-right: 3px;
            padding-left: 3px;
        }
    </style>
{% endblock %}


{% block content %}
    {% include 'home/menu.html' %}
    <div class="col-md-9">
        <div class="panel panel-warning">
            <div class="panel-heading">
                <h3 class="panel-title"><span class="glyphicon glyphicon-map-marker"></span>&nbsp;修改密码</h3>
            </div>
            <div class="panel-body">
                <form role="form">
                    <fieldset>
                            <div class="form-group">
                                <label for="input_oldpwd"><span class="glyphicon glyphicon-lock"></span>&nbsp;旧密码</label>
                                <input id="input_oldpwd" class="form-control" placeholder="旧密码" name="oldpwd" type="password" autofocus>
                            </div>
                            <div class="col-md-12" id="error_oldpwd"></div>
                            <div class="form-group">
                                <label for="input_newpwd"><span class="glyphicon glyphicon-lock"></span>&nbsp;新密码</label>
                                <input id="input_newpwd" class="form-control" placeholder="新密码" name="newpwd" type="password" autofocus>
                            </div>
                            <div class="col-md-12" id="error_newpwd"></div>
                            <a href="login.html" class="btn btn-success"><span class="glyphicon glyphicon-edit"></span>&nbsp;修改密码</a>
                        </fieldset>
                </form>
            </div>
        </div>
    </div>
{% endblock %}

{% block js %}
<script>
    $(document).ready(function () {
        $("#home_pwd").addClass("active");
    })
</script>
{% endblock %}
    app/templates/home/comments.html
    {% extends 'home/home.html' %}


{% block css %}
    <style>
        .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9{
            padding-right: 3px;
            padding-left: 3px;
        }
    </style>
{% endblock %}


{% block content %}
    {% include 'home/menu.html' %}
    <div class="col-md-9">
        <div class="panel panel-warning">
            <div class="panel-heading">
                <h3 class="panel-title"><span class="glyphicon glyphicon-map-marker"></span>&nbsp;评论记录</h3>
            </div>
            <div class="panel-body">
                <ul class="commentList">
                        <li class="item cl">
                            <a href="user.html">
                                <i class="avatar size-L radius">
                                    <img alt="50x50" src="holder.js/50x50" class="img-circle" style="border:1px solid #abcdef;">
                                </i>
                            </a>
                            <div class="comment-main">
                                <header class="comment-header">
                                    <div class="comment-meta">
                                        <a class="comment-author" href="user.html">xiaoli</a>
                                        评论于
                                        <time title="2016-12-07 09:12:51" datetime="2016-12-07 09:12:51">2017-03-01 09:12:51</time>
                                    </div>
                                </header>
                                <div class="comment-body">
                                    <p>这电影真好看！</p>
                                </div>
                            </div>
                        </li>
                        <li class="item cl">
                            <a href="user.html">
                                <i class="avatar size-L radius">
                                    <img alt="50x50" src="holder.js/50x50" class="img-circle" style="border:1px solid #abcdef;">
                                </i>
                            </a>
                            <div class="comment-main">
                                <header class="comment-header">
                                    <div class="comment-meta">
                                        <a class="comment-author" href="user.html">xiaoli</a>
                                        评论于
                                        <time title="2016-12-07 09:12:51" datetime="2016-12-07 09:12:51">2017-03-01 09:12:51</time>
                                    </div>
                                </header>
                                <div class="comment-body">
                                    <p>这电影真好看！</p>
                                </div>
                            </div>
                        </li>
                        <li class="item cl">
                            <a href="user.html">
                                <i class="avatar size-L radius">
                                    <img alt="50x50" src="holder.js/50x50" class="img-circle" style="border:1px solid #abcdef;">
                                </i>
                            </a>
                            <div class="comment-main">
                                <header class="comment-header">
                                    <div class="comment-meta">
                                        <a class="comment-author" href="user.html">xiaoli</a>
                                        评论于
                                        <time title="2016-12-07 09:12:51" datetime="2016-12-07 09:12:51">2017-03-01 09:12:51</time>
                                    </div>
                                </header>
                                <div class="comment-body">
                                    <p>这电影真好看！</p>
                                </div>
                            </div>
                        </li>
                        <li class="item cl">
                            <a href="user.html">
                                <i class="avatar size-L radius">
                                    <img alt="50x50" src="holder.js/50x50" class="img-circle" style="border:1px solid #abcdef;">
                                </i>
                            </a>
                            <div class="comment-main">
                                <header class="comment-header">
                                    <div class="comment-meta">
                                        <a class="comment-author" href="user.html">xiaoli</a>
                                        评论于
                                        <time title="2016-12-07 09:12:51" datetime="2016-12-07 09:12:51">2017-03-01 09:12:51</time>
                                    </div>
                                </header>
                                <div class="comment-body">
                                    <p>这电影真好看！</p>
                                </div>
                            </div>
                        </li>
                        <li class="item cl">
                            <a href="user.html">
                                <i class="avatar size-L radius">
                                    <img alt="50x50" src="holder.js/50x50" class="img-circle" style="border:1px solid #abcdef;">
                                </i>
                            </a>
                            <div class="comment-main">
                                <header class="comment-header">
                                    <div class="comment-meta">
                                        <a class="comment-author" href="user.html">xiaoli</a>
                                        评论于
                                        <time title="2016-12-07 09:12:51" datetime="2016-12-07 09:12:51">2017-03-01 09:12:51</time>
                                    </div>
                                </header>
                                <div class="comment-body">
                                    <p>这电影真好看！</p>
                                </div>
                            </div>
                        </li>
                    </ul>
                    <div class="col-md-12 text-center">
                        <nav aria-label="Page navigation">
                            <ul class="pagination">
                                <li>
                                    <a href="#" aria-label="First">
                                        <span aria-hidden="true">首页</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#" aria-label="Previous">
                                        <span aria-hidden="true">上一页</span>
                                    </a>
                                </li>
                                <li><a href="#">1&nbsp;/&nbsp;10</a></li>
                                <li>
                                    <a href="#" aria-label="Next">
                                        <span aria-hidden="true">下一页</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#" aria-label="Last">
                                        <span aria-hidden="true">尾页</span>
                                    </a>
                                </li>
                            </ul>
                        </nav>
                    </div>
            </div>
        </div>
    </div>

{% endblock %}

{% block js %}
<script>
    $(document).ready(function () {
        $("#home_comments").addClass("active");
    })
</script>
{% endblock %}
    app/templates/home/loginlog.html
    {% extends 'home/home.html' %}


{% block css %}
    <style>
        .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9{
            padding-right: 3px;
            padding-left: 3px;
        }
    </style>
{% endblock %}


{% block content %}
    {% include 'home/menu.html' %}
    <div class="col-md-9">
        <div class="panel panel-warning">
            <div class="panel-heading">
                <h3 class="panel-title"><span class="glyphicon glyphicon-map-marker"></span>&nbsp;登录日志</h3>
            </div>
            <div class="panel-body">
                <table class="table table-bordered">
                    <tr>
                        <td style="width:10%">编号</td>
                        <td style="width:30%">登录时间</td>
                        <td style="width:30%">登录IP</td>
                        <td style="width:30%">登录地址</td>
                    </tr>
                    <tr>
                        <td>1</td>
                        <td>2017-01-01 12:00:00</td>
                        <td>192.168.4.1</td>
                        <td>云南昆明</td>
                    </tr>
                    <tr>
                        <td>1</td>
                        <td>2017-01-01 12:00:00</td>
                        <td>192.168.4.1</td>
                        <td>云南昆明</td>
                    </tr>
                    <tr>
                        <td>1</td>
                        <td>2017-01-01 12:00:00</td>
                        <td>192.168.4.1</td>
                        <td>云南昆明</td>
                    </tr>
                    <tr>
                        <td>1</td>
                        <td>2017-01-01 12:00:00</td>
                        <td>192.168.4.1</td>
                        <td>云南昆明</td>
                    </tr>
                    <tr>
                        <td>1</td>
                        <td>2017-01-01 12:00:00</td>
                        <td>192.168.4.1</td>
                        <td>云南昆明</td>
                    </tr>

                </table>
            </div>
        </div>
    </div>

{% endblock %}

{% block js %}
<script>
    $(document).ready(function () {
        $("#home_loginlog").addClass("active");
    })
</script>
{% endblock %}
    app/templates/home/moviecol.html
    {% extends 'home/home.html' %}


{% block css %}
    <style>
        .navbar-brand>img {
            display: inline;
        }
        .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9{
            padding-right: 3px;
            padding-left: 3px;
        }
        .media{
            padding:3px;
            border:1px solid #ccc
        }
    </style>
{% endblock %}


{% block content %}
    {% include 'home/menu.html' %}
    <div class="col-md-9">
        <div class="panel panel-warning">
            <div class="panel-heading">
                <h3 class="panel-title"><span class="glyphicon glyphicon-map-marker"></span>&nbsp;收藏电影</h3>
            </div>
            <div class="panel-body">
                <div class="col-md-12">
                    <div class="media">
                        <div class="media-left">
                            <a href="play.html">
                                <img class="media-object" src="holder.js/131x83" alt="环太平洋">
                            </a>
                        </div>
                        <div class="media-body">
                            <h4 class="media-heading">环太平洋<a href="play.html" class="label label-primary pull-right"><span class="glyphicon glyphicon-play"></span>播放影片</a></h4>
                            该片主要讲述了人类为了抵抗怪兽的进攻，研制出了高大的机器战士与来犯怪兽进行对抗的故事。
                        </div>
                    </div>
                    <div class="media">
                        <div class="media-left">
                            <a href="play.html">
                                <img class="media-object" src="holder.js/131x83" alt="环太平洋">
                            </a>
                        </div>
                        <div class="media-body">
                            <h4 class="media-heading">环太平洋<a href="play.html" class="label label-primary pull-right"><span class="glyphicon glyphicon-play"></span>播放影片</a></h4>
                            该片主要讲述了人类为了抵抗怪兽的进攻，研制出了高大的机器战士与来犯怪兽进行对抗的故事。
                        </div>
                    </div>
                    <div class="media">
                        <div class="media-left">
                            <a href="play.html">
                                <img class="media-object" src="holder.js/131x83" alt="环太平洋">
                            </a>
                        </div>
                        <div class="media-body">
                            <h4 class="media-heading">环太平洋<a href="play.html" class="label label-primary pull-right"><span class="glyphicon glyphicon-play"></span>播放影片</a></h4>
                            该片主要讲述了人类为了抵抗怪兽的进攻，研制出了高大的机器战士与来犯怪兽进行对抗的故事。
                        </div>
                    </div>
                    <div class="media">
                        <div class="media-left">
                            <a href="play.html">
                                <img class="media-object" src="holder.js/131x83" alt="环太平洋">
                            </a>
                        </div>
                        <div class="media-body">
                            <h4 class="media-heading">环太平洋<a href="play.html" class="label label-primary pull-right"><span class="glyphicon glyphicon-play"></span>播放影片</a></h4>
                            该片主要讲述了人类为了抵抗怪兽的进攻，研制出了高大的机器战士与来犯怪兽进行对抗的故事。
                        </div>
                    </div>
                    <div class="media">
                        <div class="media-left">
                            <a href="play.html">
                                <img class="media-object" src="holder.js/131x83" alt="环太平洋">
                            </a>
                        </div>
                        <div class="media-body">
                            <h4 class="media-heading">环太平洋<a href="play.html" class="label label-primary pull-right"><span class="glyphicon glyphicon-play"></span>播放影片</a></h4>
                            该片主要讲述了人类为了抵抗怪兽的进攻，研制出了高大的机器战士与来犯怪兽进行对抗的故事。
                        </div>
                    </div>
                </div>
                <div class="col-md-12 text-center" style="margin-top:6px;">
                    <nav aria-label="Page navigation">
                        <ul class="pagination">
                            <li>
                                <a href="#" aria-label="First">
                                    <span aria-hidden="true">首页</span>
                                </a>
                            </li>
                            <li>
                                <a href="#" aria-label="Previous">
                                    <span aria-hidden="true">上一页</span>
                                </a>
                            </li>
                            <li><a href="#">1&nbsp;/&nbsp;10</a></li>
                            <li>
                                <a href="#" aria-label="Next">
                                    <span aria-hidden="true">下一页</span>
                                </a>
                            </li>
                            <li>
                                <a href="#" aria-label="Last">
                                    <span aria-hidden="true">尾页</span>
                                </a>
                            </li>
                        </ul>
                    </nav>
                </div>
            </div>
        </div>
    </div>

{% endblock %}

{% block js %}
<script>
    $(document).ready(function () {
        $("#home_moviecol").addClass("active");
    })
</script>
{% endblock %}

    浏览器访问即可看到会员中心页面了

    相关文章

      网友评论

          本文标题：Flask 构建微电影视频网站(2.1)

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

          延伸阅读

          深度阅读

          • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

          栏目导航

          热点阅读

          关于我们|服务条款|联系我们|Flask 构建微电影视频网站(2.1)|投稿指南|网站地图|RSS订阅|排版工具|手机版

          提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

          Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

          备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

          本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

          所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！