Flask 教程

5、Flask构建弹幕微电影网站-搭建前台页面-会员登录注册和会

2019-04-13  本文已影响4人  攻城狮笔记

【百度云搜索，搜各种资料:http://www.81ad.cn】

Flask 构建微电影视频网站

已上线演示地址: http://movie.tbquan.cn

搭建前台主页页面

静态文件放入static目录下

创建基础页面base.html

创建base.html用于公用的页面顶部和底部

app/templates/home/base.html

修改静态文件为{{ url_for('static', filename='base/css/bootstrap.min.css') }}格式，添加内容块{% block content %}{% endblock %}，用于中部内容显示

<!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') }}">
    <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="login.html"><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="logout.html"><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:76px">
    {% block content %}{% endblock %}
</div>
<!--内容-->
<!--底部-->
<footer>
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <p>
                    ©&nbsp;2018&nbsp;flaskmovie&nbsp;备案
                </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模板

app/templates/home/index.html

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

{% block content %}
    <h1>你好</h1>
{% endblock %}

加载模板到首页视图

修改app/home/views.py

from . import home
from flask import render_template

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

访问 http://127.0.0.1:5000/ 即可看到index页面

BLOG_20181028_123128_12

知识点

  1. 静态文件引入：{{ url_for('static', filename='文件路径') }}
  2. 定义路由：{{ url_for('模块名.视图名', 变量=参数) }}
  3. 定义数据块：{% block 数据块名称 %}...{% endblock %}

搭建会员登录页面

创建登录页面login.html

创建app/templates/home/login.html

引入数据块，添加登录的表单

{% extends 'home/base.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 %}

创建登录和登出视图

在app/home/views.py中添加

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

@home.route('/logout/')
def logout():
    return redirect(url_for('home.login'))

访问 http://127.0.0.1:5000/login/ 或 http://127.0.0.1:5000/login/ 即可看到登录表单

BLOG_20181028_123136_63

修改base.html登录退出链接

<li>
    <a class="curlink" href="{{ url_for('home.login') }}"><span class="glyphicon glyphicon-log-in"></span>&nbsp;登录</a>
</li>
<li>
    <a class="curlink" href="{{ url_for('home.logout') }}"><span class="glyphicon glyphicon-log-out"></span>&nbsp;退出</a>
</li>

这样上方的登录退出链接就会生效了。

搭建会员注册页面

创建注册表单register.html

新建app/templates/home/register.html

{% extends 'home/base.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 %}

创建注册视图

在app/home/views.py增加

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

修改base.html注册链接

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

这样顶部的注册链接就可用了

搭建会员中心页面

创建会员中心菜单usermenu.html

app/templates/usermenu.html

用于会员中心左侧菜单栏

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

修改base.html添加css数据块

页面顶部style标签中

    <!--........-->
    <style>
        .media{
            padding:3px;
            border:1px solid #ccc
        }
    </style>
    {% block css %}{% endblock %}

创建会员中心user.html

增加额外的css，用于该页面的样式

{% extends 'home/base.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/usermenu.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="">
                        </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="">
                        </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="">
                        </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 %}
BLOG_20181028_123246_88

创建修改密码pwd.html

{% extends 'home/base.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/usermenu.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 %}
BLOG_20181028_123308_95

修改usermuene.html菜单激活状态

切换菜单，li便签不是选中状态，增加id

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

修改base.html创建js数据块

添加到页面底部</body>上方，用于该页面的js添加

{% block js %}{% endblock %}
</body>

修改user.html和pwd.html菜单选中active

修改user.html，底部增加以下代码，当点击会员中心后，会在id="m-1"上添加active的样式，表明激活该选项。

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

修改pwd.html，底部增加

{% block js %}
    <script>
        $(document).ready(function() {
            $("#m-2").addClass('active');
        });
    </script>
{% endblock %}
BLOG_20181028_123318_44 BLOG_20181028_123337_25

创建评论记录comments.html

{% extends 'home/base.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/usermenu.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>
                </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 () {
            $("#m-3").addClass('active');
        });
    </script>
{% endblock %}
BLOG_20181028_123354_22

创建用户日志userlog.html

{% extends 'home/base.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/usermenu.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>
                </table>
            </div>
        </div>
    </div>
{% endblock %}

{% block js %}
    <script>
        $(document).ready(function () {
            $("#m-4").addClass('active');
        });
    </script>
{% endblock %}
BLOG_20181028_123413_98

创建收藏电影moviecollect.html

{% extends 'home/base.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/usermenu.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>
                <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 () {
            $("#m-5").addClass('active');
        });
    </script>
{% endblock %}
BLOG_20181028_123422_50

创建会员中心视图

在app/home/views.py增加

@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('/userlog/')
def userlog():
    return render_template('home/userlog.html')

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

修改base.html会员和主页链接

<li>
    <a class="curlink" href="{{ url_for('home.index') }}"><span class="glyphicon glyphicon-film"></span>&nbsp;电影</a>
</li>
<li>
    <a class="curlink" href="{{ url_for('home.user') }}"><span class="glyphicon glyphicon-user"></span>&nbsp;会员</a>
</li>

修改user.html和pwd.html按钮链接

当用户点击按钮会自动跳转到会员中心，表单提交试用js实现，后面再增加。

user.html

<a href="{{ url_for('home.user') }}" class="btn btn-success"><span class="glyphicon glyphicon-saved"></span>&nbsp;保存修改</a>

pwd.html

<a href="{{ url_for('home.user') }}" class="btn btn-success"><span class="glyphicon glyphicon-edit"></span>&nbsp;修改密码</a>

修改login.html和register.html按钮链接

login.html

<a href="{{ url_for('home.user') }}" class="btn btn-lg btn-success btn-block">登录</a>

register.html

<a href="{{ url_for('home.user') }}" class="btn btn-lg btn-success btn-block">注册</a>
上一篇下一篇

猜你喜欢

热点阅读