您现在的位置是：网站首页 >Flask >Flask搭建微电影视频网站 Flask

【Flask微电影】05.搭建前台页面-会员登录注册和会员中心

admin2018年10月28日 12:29 【Flask | Html | Python 】 2622人已围观

Flask搭建微电影视频网站简介 利用Flask搭建微电影视频网站 Github地址：https://github.com/xyliurui/FlaskMovie

## 搭建前台主页页面静态文件放入`static`目录下 ### 创建基础页面base.html 创建base.html用于公用的页面顶部和底部 **app/templates/home/base.html** 修改静态文件为`{{ url_for('static', filename='base/css/bootstrap.min.css') }}`格式，添加内容块`{% block content %}{% endblock %}`，用于中部内容显示 ```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') }}"> <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">  <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;"> 微电影 </a> </div>   <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> 搜索</a> </span> </div> </form> <ul class="nav navbar-nav navbar-right"> <li> <a class="curlink" href="index.html"><span class="glyphicon glyphicon-film"></span> 电影</a> </li> <li> <a class="curlink" href="login.html"><span class="glyphicon glyphicon-log-in"></span> 登录</a> </li> <li> <a class="curlink" href="register.html"><span class="glyphicon glyphicon-plus"></span> 注册</a> </li> <li> <a class="curlink" href="logout.html"><span class="glyphicon glyphicon-log-out"></span> 退出</a> </li> <li> <a class="curlink" href="user.html"><span class="glyphicon glyphicon-user"></span> 会员</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> © 2018 flaskmovie 备案 </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** ```html {% extends 'home/base.html' %} {% block content %} <h1>你好</h1> {% endblock %} ``` ### 加载模板到首页视图修改**app/home/views.py** ```python 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](/media/blog/images/2018/10/BLOG_20181028_123128_12.png "博客图集BLOG_20181028_123128_12.png") ### 知识点 1. 静态文件引入：`{{ url_for('static', filename='文件路径') }}` 2. 定义路由：`{{ url_for('模块名.视图名', 变量=参数) }}` 3. 定义数据块：`{% block 数据块名称 %}...{% endblock %}` ## 搭建会员登录页面 ### 创建登录页面login.html 创建**app/templates/home/login.html** 引入数据块，添加登录的表单 ```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> 会员登录</h3> </div> <div class="panel-body"> <form role="form"> <fieldset> <div class="form-group"> <label for="input_contact"><span class="glyphicon glyphicon-user"></span> 账号</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> 密码</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**中添加 ```python @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](/media/blog/images/2018/10/BLOG_20181028_123136_63.png "博客图集BLOG_20181028_123136_63.png") ### 修改base.html登录退出链接 ```html <li> <a class="curlink" href="{{ url_for('home.login') }}"><span class="glyphicon glyphicon-log-in"></span> 登录</a> </li> <li> <a class="curlink" href="{{ url_for('home.logout') }}"><span class="glyphicon glyphicon-log-out"></span> 退出</a> </li> ``` 这样上方的登录退出链接就会生效了。 ## 搭建会员注册页面 ### 创建注册表单register.html 新建**app/templates/home/register.html** ```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> 会员注册</h3> </div> <div class="panel-body"> <form role="form"> <fieldset> <div class="form-group"> <label for="input_name"><span class="glyphicon glyphicon-user"></span> 昵称</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> 邮箱</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> 手机</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> 密码</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> 确认密码</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**增加 ```python @home.route('/register/') def register(): return render_template('home/register.html') ``` ![BLOG_20181028_123226_90](/media/blog/images/2018/10/BLOG_20181028_123226_90.png "博客图集BLOG_20181028_123226_90.png") ### 修改base.html注册链接 ```html <li> <a class="curlink" href="{{ url_for('home.register') }}"><span class="glyphicon glyphicon-plus"></span> 注册</a> </li> ``` 这样顶部的注册链接就可用了 ## 搭建会员中心页面 ### 创建会员中心菜单usermenu.html **app/templates/usermenu.html** 用于会员中心左侧菜单栏 ```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> 会员中心 </a> <a href="{{ user_for('home.pwd') }}" class="list-group-item"> <span class="glyphicon glyphicon-lock"></span> 修改密码 </a> <a href="{{ user_for('home.comments') }}" class="list-group-item"> <span class="glyphicon glyphicon-comment"></span> 评论记录 </a> <a href="{{ user_for('home.userlog') }}" class="list-group-item"> <span class="glyphicon glyphicon-calendar"></span> 登录日志 </a> <a href="{{ user_for('home.moviecollect') }}" class="list-group-item active"> <span class="glyphicon glyphicon-heart"></span> 收藏电影 </a> </div> </div> ``` ### 修改base.html添加css数据块页面顶部style标签中 ```html  <style> .media{ padding:3px; border:1px solid #ccc } </style> {% block css %}{% endblock %} ``` ### 创建会员中心user.html 增加额外的css，用于该页面的样式 ```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> 会员中心</h3> </div> <div class="panel-body"> <form role="form"> <fieldset> <div class="form-group"> <label for="input_name"><span class="glyphicon glyphicon-user"></span> 昵称</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> 邮箱</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> 手机</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> 头像</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> 上传头像</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> 简介</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> 保存修改</a> </fieldset> </form> </div> </div> </div> {% endblock %} ``` ![BLOG_20181028_123246_88](/media/blog/images/2018/10/BLOG_20181028_123246_88.png "博客图集BLOG_20181028_123246_88.png") ### 创建修改密码pwd.html ```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> 会员中心</h3> </div> <div class="panel-body"> <form role="form"> <fieldset> <div class="form-group"> <label for="input_oldpwd"><span class="glyphicon glyphicon-lock"></span> 旧密码</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> 新密码</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> 修改密码</a> </fieldset> </form> </div> </div> </div> {% endblock %} ``` ![BLOG_20181028_123308_95](/media/blog/images/2018/10/BLOG_20181028_123308_95.png "博客图集BLOG_20181028_123308_95.png") ### 修改usermuene.html菜单激活状态切换菜单，`li`便签不是选中状态，增加id ```html <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> 会员中心 </a> <a id="m-2" href="{{ url_for('home.pwd') }}" class="list-group-item"> <span class="glyphicon glyphicon-lock"></span> 修改密码 </a> <a id="m-3" href="{{ url_for('home.comments') }}" class="list-group-item"> <span class="glyphicon glyphicon-comment"></span> 评论记录 </a> <a id="m-4" href="{{ url_for('home.userlog') }}" class="list-group-item"> <span class="glyphicon glyphicon-calendar"></span> 登录日志 </a> <a id="m-5" href="{{ url_for('home.moviecollect') }}" class="list-group-item"> <span class="glyphicon glyphicon-heart"></span> 收藏电影 </a> </div> </div> ``` ### 修改base.html创建js数据块添加到页面底部`</body>`上方，用于该页面的js添加 ```html {% block js %}{% endblock %} </body> ``` ### 修改user.html和pwd.html菜单选中active 修改user.html，底部增加以下代码，当点击会员中心后，会在`id="m-1"`上添加`active`的样式，表明激活该选项。 ```html {% block js %} <script> $(document).ready(function() { $("#m-1").addClass('active'); }); </script> {% endblock %} ``` 修改pwd.html，底部增加 ```html {% block js %} <script> $(document).ready(function() { $("#m-2").addClass('active'); }); </script> {% endblock %} ``` ![BLOG_20181028_123318_44](/media/blog/images/2018/10/BLOG_20181028_123318_44.png "博客图集BLOG_20181028_123318_44.png") ![BLOG_20181028_123337_25](/media/blog/images/2018/10/BLOG_20181028_123337_25.png "博客图集BLOG_20181028_123337_25.png") ### 创建评论记录comments.html ```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> 评论记录</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 / 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](/media/blog/images/2018/10/BLOG_20181028_123354_22.png "博客图集BLOG_20181028_123354_22.png") ### 创建用户日志userlog.html ```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> 登录日志</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](/media/blog/images/2018/10/BLOG_20181028_123413_98.png "博客图集BLOG_20181028_123413_98.png") ### 创建收藏电影moviecollect.html ```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> 收藏电影</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 / 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](/media/blog/images/2018/10/BLOG_20181028_123422_50.png "博客图集BLOG_20181028_123422_50.png") ### 创建会员中心视图在**app/home/views.py**增加 ```python @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会员和主页链接 ```html <li> <a class="curlink" href="{{ url_for('home.index') }}"><span class="glyphicon glyphicon-film"></span> 电影</a> </li> <li> <a class="curlink" href="{{ url_for('home.user') }}"><span class="glyphicon glyphicon-user"></span> 会员</a> </li> ``` ### 修改user.html和pwd.html按钮链接当用户点击按钮会自动跳转到会员中心，表单提交试用js实现，后面再增加。 **user.html** ```html <a href="{{ url_for('home.user') }}" class="btn btn-success"><span class="glyphicon glyphicon-saved"></span> 保存修改</a> ``` **pwd.html** ```html <a href="{{ url_for('home.user') }}" class="btn btn-success"><span class="glyphicon glyphicon-edit"></span> 修改密码</a> ``` ### 修改login.html和register.html按钮链接 **login.html** ```html <a href="{{ url_for('home.user') }}" class="btn btn-lg btn-success btn-block">登录</a> ``` **register.html** ```html <a href="{{ url_for('home.user') }}" class="btn btn-lg btn-success btn-block">注册</a> ```