（8）Flask微电影项目会员中心其他页面搭建

太过爱你忘了你带给我的痛 2021-12-16 13:03 238阅读 0赞

会员中心修改密码、评论、登录日志和收藏电影4个页面的内容。

一、修改密码页面：

修改密码页面效果图：

![667699-20190620013022172-272032691.png][]

二、评论页面：

1 {% extends "home/home.html" %}
      2 
      3 {% block css %}
      4 <style>
      5     .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 {
         
      6         padding-right: 3px;
      7         padding-left: 3px;
      8     }
      9 </style>
     10 {% endblock %}
     11 
     12 {% block content %}
     13 {% include "home/menu.html" %}
     14 <div class="col-md-9">
     15     <div class="panel panel-warning">
     16         <div class="panel-heading">
     17             <h3 class="panel-title"><span class="glyphicon glyphicon-map-marker"></span> 评论记录</h3>
     18         </div>
     19         <div class="panel-body">
     20             <ul class="commentList">
     21                 <li class="item cl">
     22                     <a href="user.html">
     23                         <i class="avatar size-L radius">
     24                             <img alt="50x50" src="holder.js/50x50" class="img-circle" style="border:1px solid #abcdef;">
     25                         </i>
     26                     </a>
     27                     <div class="comment-main">
     28                         <header class="comment-header">
     29                             <div class="comment-meta">
     30                                 <a class="comment-author" href="user.html">xiaoli</a>
     31                                 评论于
     32                                 <time title="2016-12-07 09:12:51" datetime="2016-12-07 09:12:51">2017-03-01 09:12:51
     33                                 </time>
     34                             </div>
     35                         </header>
     36                         <div class="comment-body">
     37                             <p>这电影真好看！</p>
     38                         </div>
     39                     </div>
     40                 </li>
     41                 <li class="item cl">
     42                     <a href="user.html">
     43                         <i class="avatar size-L radius">
     44                             <img alt="50x50" src="holder.js/50x50" class="img-circle" style="border:1px solid #abcdef;">
     45                         </i>
     46                     </a>
     47                     <div class="comment-main">
     48                         <header class="comment-header">
     49                             <div class="comment-meta">
     50                                 <a class="comment-author" href="user.html">xiaoli</a>
     51                                 评论于
     52                                 <time title="2016-12-07 09:12:51" datetime="2016-12-07 09:12:51">2017-03-01 09:12:51
     53                                 </time>
     54                             </div>
     55                         </header>
     56                         <div class="comment-body">
     57                             <p>这电影真好看！</p>
     58                         </div>
     59                     </div>
     60                 </li>
     61                 <li class="item cl">
     62                     <a href="user.html">
     63                         <i class="avatar size-L radius">
     64                             <img alt="50x50" src="holder.js/50x50" class="img-circle" style="border:1px solid #abcdef;">
     65                         </i>
     66                     </a>
     67                     <div class="comment-main">
     68                         <header class="comment-header">
     69                             <div class="comment-meta">
     70                                 <a class="comment-author" href="user.html">xiaoli</a>
     71                                 评论于
     72                                 <time title="2016-12-07 09:12:51" datetime="2016-12-07 09:12:51">2017-03-01 09:12:51
     73                                 </time>
     74                             </div>
     75                         </header>
     76                         <div class="comment-body">
     77                             <p>这电影真好看！</p>
     78                         </div>
     79                     </div>
     80                 </li>
     81                 <li class="item cl">
     82                     <a href="user.html">
     83                         <i class="avatar size-L radius">
     84                             <img alt="50x50" src="holder.js/50x50" class="img-circle" style="border:1px solid #abcdef;">
     85                         </i>
     86                     </a>
     87                     <div class="comment-main">
     88                         <header class="comment-header">
     89                             <div class="comment-meta">
     90                                 <a class="comment-author" href="user.html">xiaoli</a>
     91                                 评论于
     92                                 <time title="2016-12-07 09:12:51" datetime="2016-12-07 09:12:51">2017-03-01 09:12:51
     93                                 </time>
     94                             </div>
     95                         </header>
     96                         <div class="comment-body">
     97                             <p>这电影真好看！</p>
     98                         </div>
     99                     </div>
    100                 </li>
    101                 <li class="item cl">
    102                     <a href="user.html">
    103                         <i class="avatar size-L radius">
    104                             <img alt="50x50" src="holder.js/50x50" class="img-circle" style="border:1px solid #abcdef;">
    105                         </i>
    106                     </a>
    107                     <div class="comment-main">
    108                         <header class="comment-header">
    109                             <div class="comment-meta">
    110                                 <a class="comment-author" href="user.html">xiaoli</a>
    111                                 评论于
    112                                 <time title="2016-12-07 09:12:51" datetime="2016-12-07 09:12:51">2017-03-01 09:12:51
    113                                 </time>
    114                             </div>
    115                         </header>
    116                         <div class="comment-body">
    117                             <p>这电影真好看！</p>
    118                         </div>
    119                     </div>
    120                 </li>
    121             </ul>
    122             <div class="col-md-12 text-center">
    123                 <nav aria-label="Page navigation">
    124                     <ul class="pagination">
    125                         <li>
    126                             <a href="#" aria-label="First">
    127                                 <span aria-hidden="true">首页</span>
    128                             </a>
    129                         </li>
    130                         <li>
    131                             <a href="#" aria-label="Previous">
    132                                 <span aria-hidden="true">上一页</span>
    133                             </a>
    134                         </li>
    135                         <li><a href="#">1 / 10</a></li>
    136                         <li>
    137                             <a href="#" aria-label="Next">
    138                                 <span aria-hidden="true">下一页</span>
    139                             </a>
    140                         </li>
    141                         <li>
    142                             <a href="#" aria-label="Last">
    143                                 <span aria-hidden="true">尾页</span>
    144                             </a>
    145                         </li>
    146                     </ul>
    147                 </nav>
    148             </div>
    149         </div>
    150     </div>
    151 </div>
    152 {% endblock %}
    153 
    154 {% block js %}
    155 <script>
    156     $(document).ready(function () {
    157         $("#m-3").addClass("active");
    158     });
    159 </script>
    160 {% endblock %}

评论页面效果图：

![667699-20190620012644479-1217681072.png][]

三、登录日志页面：

登录日志页面效果图：

![667699-20190620012952608-1418699035.png][]

四、收藏电影页面：

1 {% extends "home/home.html" %}
      2 
      3 {% block css %}
      4 <style>
      5     .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 {
         
      6         padding-right: 3px;
      7         padding-left: 3px;
      8     }
      9 </style>
     10 {% endblock %}
     11 
     12 {% block content %}
     13 {% include "home/menu.html" %}
     14 <div class="col-md-9">
     15     <div class="panel panel-warning">
     16         <div class="panel-heading">
     17             <h3 class="panel-title"><span class="glyphicon glyphicon-map-marker"></span> 收藏电影</h3>
     18         </div>
     19         <div class="panel-body">
     20             <div class="col-md-12">
     21                 <div class="media">
     22                     <div class="media-left">
     23                         <a href="play.html">
     24                             <img class="media-object" src="holder.js/131x83" alt="环太平洋">
     25                         </a>
     26                     </div>
     27                     <div class="media-body">
     28                         <h4 class="media-heading">环太平洋<a href="play.html" class="label label-primary pull-right"><span
     29                                 class="glyphicon glyphicon-play"></span>播放影片</a></h4>
     30                         该片主要讲述了人类为了抵抗怪兽的进攻，研制出了高大的机器战士与来犯怪兽进行对抗的故事。
     31                     </div>
     32                 </div>
     33                 <div class="media">
     34                     <div class="media-left">
     35                         <a href="play.html">
     36                             <img class="media-object" src="holder.js/131x83" alt="环太平洋">
     37                         </a>
     38                     </div>
     39                     <div class="media-body">
     40                         <h4 class="media-heading">环太平洋<a href="play.html" class="label label-primary pull-right"><span
     41                                 class="glyphicon glyphicon-play"></span>播放影片</a></h4>
     42                         该片主要讲述了人类为了抵抗怪兽的进攻，研制出了高大的机器战士与来犯怪兽进行对抗的故事。
     43                     </div>
     44                 </div>
     45                 <div class="media">
     46                     <div class="media-left">
     47                         <a href="play.html">
     48                             <img class="media-object" src="holder.js/131x83" alt="环太平洋">
     49                         </a>
     50                     </div>
     51                     <div class="media-body">
     52                         <h4 class="media-heading">环太平洋<a href="play.html" class="label label-primary pull-right"><span
     53                                 class="glyphicon glyphicon-play"></span>播放影片</a></h4>
     54                         该片主要讲述了人类为了抵抗怪兽的进攻，研制出了高大的机器战士与来犯怪兽进行对抗的故事。
     55                     </div>
     56                 </div>
     57                 <div class="media">
     58                     <div class="media-left">
     59                         <a href="play.html">
     60                             <img class="media-object" src="holder.js/131x83" alt="环太平洋">
     61                         </a>
     62                     </div>
     63                     <div class="media-body">
     64                         <h4 class="media-heading">环太平洋<a href="play.html" class="label label-primary pull-right"><span
     65                                 class="glyphicon glyphicon-play"></span>播放影片</a></h4>
     66                         该片主要讲述了人类为了抵抗怪兽的进攻，研制出了高大的机器战士与来犯怪兽进行对抗的故事。
     67                     </div>
     68                 </div>
     69                 <div class="media">
     70                     <div class="media-left">
     71                         <a href="play.html">
     72                             <img class="media-object" src="holder.js/131x83" alt="环太平洋">
     73                         </a>
     74                     </div>
     75                     <div class="media-body">
     76                         <h4 class="media-heading">环太平洋<a href="play.html" class="label label-primary pull-right"><span
     77                                 class="glyphicon glyphicon-play"></span>播放影片</a></h4>
     78                         该片主要讲述了人类为了抵抗怪兽的进攻，研制出了高大的机器战士与来犯怪兽进行对抗的故事。
     79                     </div>
     80                 </div>
     81             </div>
     82             <div class="col-md-12 text-center" style="margin-top:6px;">
     83                 <nav aria-label="Page navigation">
     84                     <ul class="pagination">
     85                         <li>
     86                             <a href="#" aria-label="First">
     87                                 <span aria-hidden="true">首页</span>
     88                             </a>
     89                         </li>
     90                         <li>
     91                             <a href="#" aria-label="Previous">
     92                                 <span aria-hidden="true">上一页</span>
     93                             </a>
     94                         </li>
     95                         <li><a href="#">1 / 10</a></li>
     96                         <li>
     97                             <a href="#" aria-label="Next">
     98                                 <span aria-hidden="true">下一页</span>
     99                             </a>
    100                         </li>
    101                         <li>
    102                             <a href="#" aria-label="Last">
    103                                 <span aria-hidden="true">尾页</span>
    104                             </a>
    105                         </li>
    106                     </ul>
    107                 </nav>
    108             </div>
    109         </div>
    110     </div>
    111 </div>
    112 {% endblock %}
    113 
    114 {% block js %}
    115 <script>
    116     $(document).ready(function () {
    117         $("#m-5").addClass("active");
    118     });
    119 </script>
    120 {% endblock %}

收藏电影页面效果图：

![667699-20190620012826770-1547051262.png][]

【结束】

转载于:https://www.cnblogs.com/jun1019/p/11056221.html

[667699-20190620013022172-272032691.png]: /images/20211214/225c42a5aa83435fb097675a0e4af374.png
[667699-20190620012644479-1217681072.png]: /images/20211214/bf9c71d6038b4e80a1928b190ee4d6cc.png
[667699-20190620012952608-1418699035.png]: /images/20211214/d12064b1e8ec4d3a82b350b517ebc3cf.png
[667699-20190620012826770-1547051262.png]: /images/20211214/ebaae64b743d469fb0ff8cf6d49cede5.png