搭建前台页面

前台布局搭建

将static中的文件拷贝到项目的static目录下

在app/templates/home下新建home.html,当作基础模板,并修改静态资源链接

  1. <!doctype html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="renderer" content="webkit">
  7.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  8.     <meta name="viewport" content="width=device-width, initial-scale=1 , user-scalable=no">
  9.     <title>微电影</title>
  10.     <link rel="shortcut icon" href="{{ url_for('static', filename='base/images/logo.png') }}">
  11.     <link rel="stylesheet" href="{{ url_for('static', filename='base/css/bootstrap.min.css') }}">
  12.     <link rel="stylesheet" href="{{ url_for('static', filename='base/css/bootstrap-movie.css') }}">
  13.     <link rel="stylesheet" href="{{ url_for('static', filename='base/css/animate.css') }}">
  14.     <link rel="stylesheet" href="{{ url_for('static', filename='base/css/animate.css') }}">
  15.     <style>
  16.         .navbar-brand>img {
  17.             display: inline;
  18.         }
  20.     </style>
  21.     <style>
  22.         .media{
  23.             padding:3px;
  24.             border:1px solid #ccc
  25.         }
  27.     </style>
  28. </head>
  30. <body>
  31. <!--导航-->
  32. <nav class="navbar navbar-default navbar-fixed-top">
  33.     <div class="container">
  34.         <!--小屏幕导航按钮和logo-->
  35.         <div class="navbar-header">
  36.             <button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
  37.                 <span class="icon-bar"></span>
  38.                 <span class="icon-bar"></span>
  39.                 <span class="icon-bar"></span>
  40.             </button>
  41.             <a href="index.html" class="navbar-brand" style="width:250px;">
  42.                 <img src="{{ url_for('static', filename='base/images/logo.png') }}" style="height:30px;">&nbsp;微电影
  43.             </a>
  44.         </div>
  45.         <!--小屏幕导航按钮和logo-->
  46.         <!--导航-->
  47.         <div class="navbar-collapse collapse">
  48.             <form class="navbar-form navbar-left" role="search" style="margin-top:18px;">
  49.                 <div class="form-group input-group">
  50.                     <input type="text" class="form-control" placeholder="请输入电影名！">
  51.                     <span class="input-group-btn">
  52.                         <a class="btn btn-default" href="search.html"><span class="glyphicon glyphicon-search"></span>&nbsp;搜索</a>
  53.                     </span>
  54.                 </div>
  55.             </form>
  56.             <ul class="nav navbar-nav navbar-right">
  57.                 <li>
  58.                     <a class="curlink" href="index.html"><span class="glyphicon glyphicon-film"></span>&nbsp;电影</a>
  59.                 </li>
  60.                 <li>
  61.                     <a class="curlink" href="{{ url_for('home.login') }}"><span class="glyphicon glyphicon-log-in"></span>&nbsp;登录</a>
  62.                 </li>
  63.                 <li>
  64.                     <a class="curlink" href="register.html"><span class="glyphicon glyphicon-plus"></span>&nbsp;注册</a>
  65.                 </li>
  66.                 <li>
  67.                     <a class="curlink" href="{{ url_for('home.lougot') }}"><span class="glyphicon glyphicon-log-out"></span>&nbsp;退出</a>
  68.                 </li>
  69.                 <li>
  70.                     <a class="curlink" href="user.html"><span class="glyphicon glyphicon-user"></span>&nbsp;会员</a>
  71.                 </li>
  72.             </ul>
  73.         </div>
  74.         <!--导航-->
  76.     </div>
  77. </nav>
  78. <!--导航-->
  79. <!--内容-->
  80. <div class="container" style="margin-top:120px">
  81.     {% block content %}
  83.     {% endblock %}
  85. </div>
  86. <!--内容-->
  87. <!--底部-->
  88. <footer>
  89.     <div class="container">
  90.         <div class="row">
  91.             <div class="col-md-12">
  92.                 <p>
  93.                     ©&nbsp;2018&nbsp;movie.cht3.top&nbsp;京ICP备 13046642号-2
  94.                 </p>
  95.             </div>
  96.         </div>
  97.     </div>
  98. </footer>
  99. <!--底部-->
  100. <script src="{{ url_for('static', filename='base/js/jquery.min.js') }}"></script>
  101. <script src="{{ url_for('static', filename='base/js/bootstrap.min.js') }}"></script>
  102. <script src="{{ url_for('static', filename='base/js/jquery.singlePageNav.min.js') }}"></script>
  103. <script src="{{ url_for('static', filename='base/js/wow.min.js') }}"></script>
  104. <script src="{{ url_for('static', filename='lazyload/jquery.lazyload.min.js') }}"></script>
  105. <script src="//cdn.bootcss.com/holder/2.9.4/holder.min.js"></script>
  106. <script>
  107.     $(function() {
  108.         new WOW().init();
  109.     })
  111. </script>
  112. <script>
  113.     $(document).ready(function() {
  114.         $("img.lazy").lazyload({
  115.             effect: "fadeIn"
  116.         });
  117.     });
  119. </script>
  120. </body>
  121. </html>

新建index.html,继承home.html

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

修改视图函数

app/home/views.py

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

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

会员登录页面搭建

新建login.html

  1.     {% extends 'home/home.html' %}
  3.     {% block content %}
  4.         <div class="row">
  5.             <div class="col-md-4 col-md-offset-4">
  6.                 <div class="panel panel-primary">
  7.                     <div class="panel-heading">
  8.                         <h3 class="panel-title"><span class="glyphicon glyphicon-log-in"></span>&nbsp;会员登录</h3>
  9.                     </div>
  10.                     <div class="panel-body">
  11.                         <form role="form">
  12.                             <fieldset>
  13.                                 <div class="form-group">
  14.                                     <label for="input_contact"><span class="glyphicon glyphicon-user"></span>&nbsp;账号</label>
  15.                                     <input id="input_contact" class="form-control input-lg" placeholder="用户名/邮箱/手机号码" name="contact" type="text" autofocus>
  16.                                 </div>
  17.                                 <div class="col-md-12" id="error_contact"></div>
  18.                                 <div class="form-group">
  19.                                     <label for="input_password"><span class="glyphicon glyphicon-lock"></span>&nbsp;密码</label>
  20.                                     <input id="input_password" class="form-control input-lg" placeholder="密码" name="password" type="password" value="">
  21.                                 </div>
  22.                                 <div class="col-md-12" id="error_password"></div>
  23.                                 <a href="user.html" class="btn btn-lg btn-success btn-block">登录</a>
  24.                             </fieldset>
  25.                         </form>
  26.                     </div>
  27.                 </div>
  28.             </div>
  29.         </div>
  30.     {% endblock %}

创建视图函数

  1. @home.route('/login/')
  2. def login():
  3.     return render_template('home/login.html')
  5. @home.route('/lougot/')
  6. def lougot():
  7.     return redirect(url_for('home.index'))

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

会员注册页面搭建

新建regist.html

  1. {% extends 'home/home.html' %}
  3. {% block content %}
  4.     <div class="row">
  5.         <div class="col-md-4 col-md-offset-4">
  6.             <div class="panel panel-success">
  7.                 <div class="panel-heading">
  8.                     <h3 class="panel-title"><span class="glyphicon glyphicon-plus"></span>&nbsp;会员注册</h3>
  9.                 </div>
  10.                 <div class="panel-body">
  11.                     <form role="form">
  12.                         <fieldset>
  13.                             <div class="form-group">
  14.                                 <label for="input_name"><span class="glyphicon glyphicon-user"></span>&nbsp;昵称</label>
  15.                                 <input id="input_name" class="form-control input-lg" placeholder="昵称" name="name" type="text" autofocus>
  16.                             </div>
  17.                             <div class="col-md-12" id="error_name"></div>
  18.                             <div class="form-group">
  19.                                 <label for="input_email"><span class="glyphicon glyphicon-envelope"></span>&nbsp;邮箱</label>
  20.                                 <input id="input_email" class="form-control input-lg" placeholder="邮箱" name="email" type="email" autofocus>
  21.                             </div>
  22.                             <div class="col-md-12" id="error_email"></div>
  23.                             <div class="form-group">
  24.                                 <label for="input_phone"><span class="glyphicon glyphicon-phone"></span>&nbsp;手机</label>
  25.                                 <input id="input_phone" class="form-control input-lg" placeholder="手机" name="phone" type="text" autofocus>
  26.                             </div>
  27.                             <div class="col-md-12" id="error_phone"></div>
  28.                             <div class="form-group">
  29.                                 <label for="input_password"><span class="glyphicon glyphicon-lock"></span>&nbsp;密码</label>
  30.                                 <input id="input_password" class="form-control input-lg" placeholder="密码" name="password" type="password" value="">
  31.                             </div>
  32.                             <div class="col-md-12" id="error_password"></div>
  33.                             <div class="form-group">
  34.                                 <label for="input_repassword"><span class="glyphicon glyphicon-lock"></span>&nbsp;确认密码</label>
  35.                                 <input id="input_repassword" class="form-control input-lg" placeholder="确认密码" name="repassword" type="password" value="">
  36.                             </div>
  37.                             <div class="col-md-12" id="error_repassword"></div>
  38.                             <a href="user.html" class="btn btn-lg btn-success btn-block">注册</a>
  39.                         </fieldset>
  40.                     </form>
  41.                 </div>
  42.             </div>
  43.         </div>
  44.     </div>
  45. {% endblock %}

创建视图函数

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

修改home.html中的链接

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

访问即可看到注册页面

会员中心页面搭建

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

  1. <div class="col-md-3">
  2.     <div class="list-group">
  3.         <a id="home_user" href="{{ url_for('home.user') }}" class="list-group-item">
  4.             <span class="glyphicon glyphicon-user"></span>&nbsp;会员中心
  5.         </a>
  6.          <a id="home_pwd" href="{{ url_for('home.pwd') }}" class="list-group-item">
  7.             <span class="glyphicon glyphicon-lock"></span>&nbsp;修改密码
  8.         </a>
  9.         <a id="home_comments" href="{{ url_for('home.comments') }}" class="list-group-item">
  10.             <span class="glyphicon glyphicon-comment"></span>&nbsp;评论记录
  11.         </a>
  12.         <a id="home_loginlog" href="{{ url_for('home.loginlog') }}" class="list-group-item">
  13.             <span class="glyphicon glyphicon-calendar"></span>&nbsp;登录日志
  14.         </a>
  15.         <a id="home_moviecol" href="{{ url_for('home.moviecol') }}" class="list-group-item">
  16.             <span class="glyphicon glyphicon-heart"></span>&nbsp;收藏电影
  17.         </a>
  18.     </div>
  19. </div>

新建视图函数

  1. @home.route('/user/')
  2. def user():
  3.     return render_template('home/user.html')
  5. @home.route('/pwd/')
  6. def pwd():
  7.     return render_template('home/pwd.html')
  9. @home.route('/comments/')
  10. def comments():
  11.     return render_template('home/comments.html')
  13. @home.route('/loginlog/')
  14. def loginlog():
  15.     return render_template('home/loginlog.html')
  17. @home.route('/moviecol/')
  18. def moviecol():
  19.     return render_template('home/moviecol.html')

根据视图函数新建HTML

app/templates/home/user.html
  1. {% extends 'home/home.html' %}
  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 %}
  12. {% block content %}
  13.     {% include 'home/menu.html' %}
  15.     <div class="col-md-9">
  16.         <div class="panel panel-warning">
  17.             <div class="panel-heading">
  18.                 <h3 class="panel-title"><span class="glyphicon glyphicon-map-marker"></span>&nbsp;会员中心</h3>
  19.             </div>
  20.             <div class="panel-body">
  21.                 <form role="form">
  22.                     <fieldset>
  23.                             <div class="form-group">
  24.                                 <label for="input_name"><span class="glyphicon glyphicon-user"></span>&nbsp;昵称</label>
  25.                                 <input id="input_name" class="form-control" placeholder="昵称" name="name" type="text" autofocus value="jinlong">
  26.                             </div>
  27.                             <div class="col-md-12" id="error_name"></div>
  28.                             <div class="form-group">
  29.                                 <label for="input_email"><span class="glyphicon glyphicon-envelope"></span>&nbsp;邮箱</label>
  30.                                 <input id="input_email" class="form-control" placeholder="邮箱" name="email" type="email" autofocus value="1780316635@qq.com">
  31.                             </div>
  32.                             <div class="col-md-12" id="error_email"></div>
  33.                             <div class="form-group">
  34.                                 <label for="input_phone"><span class="glyphicon glyphicon-phone"></span>&nbsp;手机</label>
  35.                                 <input id="input_phone" class="form-control" placeholder="手机" name="phone" type="text" autofocus value="13700632835">
  36.                             </div>
  37.                             <div class="col-md-12" id="error_phone"></div>
  38.                             <div class="form-group">
  39.                                 <label for="input_face"><span class="glyphicon glyphicon-picture"></span>&nbsp;头像</label>
  40.                                 <img src="holder.js/100x100" class="img-responsive img-rounded">
  41.                                 <a class="btn btn-primary" style="margin-top:6px;"><span class="glyphicon glyphicon-open"></span>&nbsp;上传头像</a>
  42.                                 <input id="input_face" class="form-control" name="face" type="hidden" autofocus>
  43.                             </div>
  44.                             <div class="col-md-12" id="error_face"></div>
  45.                             <div class="form-group">
  46.                                 <label for="input_info"><span class="glyphicon glyphicon-edit"></span>&nbsp;简介</label>
  47.                                 <textarea class="form-control" rows="10" id="input_info">十年窗下无人问，一举成名天下知</textarea>
  48.                             </div>
  49.                             <div class="col-md-12" id="error_info"></div>
  50.                         <a href="user.html" class="btn btn-success"><span class="glyphicon glyphicon-saved"></span>&nbsp;保存修改</a>
  51.                         </fieldset>
  52.                 </form>
  53.             </div>
  54.         </div>
  55.     </div>
  56. {% endblock %}
  58. {% block js %}
  59. <script>
  60.     $(document).ready(function () {
  61.         $("#home_user").addClass("active");
  62.     })
  63. </script>
  64. {% endblock %}
app/templates/home/pwd.html
  1. {% extends 'home/home.html' %}
  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 %}
  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>&nbsp;修改密码</h3>
  18.             </div>
  19.             <div class="panel-body">
  20.                 <form role="form">
  21.                     <fieldset>
  22.                             <div class="form-group">
  23.                                 <label for="input_oldpwd"><span class="glyphicon glyphicon-lock"></span>&nbsp;旧密码</label>
  24.                                 <input id="input_oldpwd" class="form-control" placeholder="旧密码" name="oldpwd" type="password" autofocus>
  25.                             </div>
  26.                             <div class="col-md-12" id="error_oldpwd"></div>
  27.                             <div class="form-group">
  28.                                 <label for="input_newpwd"><span class="glyphicon glyphicon-lock"></span>&nbsp;新密码</label>
  29.                                 <input id="input_newpwd" class="form-control" placeholder="新密码" name="newpwd" type="password" autofocus>
  30.                             </div>
  31.                             <div class="col-md-12" id="error_newpwd"></div>
  32.                             <a href="login.html" class="btn btn-success"><span class="glyphicon glyphicon-edit"></span>&nbsp;修改密码</a>
  33.                         </fieldset>
  34.                 </form>
  35.             </div>
  36.         </div>
  37.     </div>
  38. {% endblock %}
  40. {% block js %}
  41. <script>
  42.     $(document).ready(function () {
  43.         $("#home_pwd").addClass("active");
  44.     })
  45. </script>
  46. {% endblock %}
app/templates/home/comments.html
  1. {% extends 'home/home.html' %}
  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 %}
  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>&nbsp;评论记录</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</time>
  33.                                     </div>
  34.                                 </header>
  35.                                 <div class="comment-body">
  36.                                     <p>这电影真好看！</p>
  37.                                 </div>
  38.                             </div>
  39.                         </li>
  40.                         <li class="item cl">
  41.                             <a href="user.html">
  42.                                 <i class="avatar size-L radius">
  43.                                     <img alt="50x50" src="holder.js/50x50" class="img-circle" style="border:1px solid #abcdef;">
  44.                                 </i>
  45.                             </a>
  46.                             <div class="comment-main">
  47.                                 <header class="comment-header">
  48.                                     <div class="comment-meta">
  49.                                         <a class="comment-author" href="user.html">xiaoli</a>
  50.                                         评论于
  51.                                         <time title="2016-12-07 09:12:51" datetime="2016-12-07 09:12:51">2017-03-01 09:12:51</time>
  52.                                     </div>
  53.                                 </header>
  54.                                 <div class="comment-body">
  55.                                     <p>这电影真好看！</p>
  56.                                 </div>
  57.                             </div>
  58.                         </li>
  59.                         <li class="item cl">
  60.                             <a href="user.html">
  61.                                 <i class="avatar size-L radius">
  62.                                     <img alt="50x50" src="holder.js/50x50" class="img-circle" style="border:1px solid #abcdef;">
  63.                                 </i>
  64.                             </a>
  65.                             <div class="comment-main">
  66.                                 <header class="comment-header">
  67.                                     <div class="comment-meta">
  68.                                         <a class="comment-author" href="user.html">xiaoli</a>
  69.                                         评论于
  70.                                         <time title="2016-12-07 09:12:51" datetime="2016-12-07 09:12:51">2017-03-01 09:12:51</time>
  71.                                     </div>
  72.                                 </header>
  73.                                 <div class="comment-body">
  74.                                     <p>这电影真好看！</p>
  75.                                 </div>
  76.                             </div>
  77.                         </li>
  78.                         <li class="item cl">
  79.                             <a href="user.html">
  80.                                 <i class="avatar size-L radius">
  81.                                     <img alt="50x50" src="holder.js/50x50" class="img-circle" style="border:1px solid #abcdef;">
  82.                                 </i>
  83.                             </a>
  84.                             <div class="comment-main">
  85.                                 <header class="comment-header">
  86.                                     <div class="comment-meta">
  87.                                         <a class="comment-author" href="user.html">xiaoli</a>
  88.                                         评论于
  89.                                         <time title="2016-12-07 09:12:51" datetime="2016-12-07 09:12:51">2017-03-01 09:12:51</time>
  90.                                     </div>
  91.                                 </header>
  92.                                 <div class="comment-body">
  93.                                     <p>这电影真好看！</p>
  94.                                 </div>
  95.                             </div>
  96.                         </li>
  97.                         <li class="item cl">
  98.                             <a href="user.html">
  99.                                 <i class="avatar size-L radius">
  100.                                     <img alt="50x50" src="holder.js/50x50" class="img-circle" style="border:1px solid #abcdef;">
  101.                                 </i>
  102.                             </a>
  103.                             <div class="comment-main">
  104.                                 <header class="comment-header">
  105.                                     <div class="comment-meta">
  106.                                         <a class="comment-author" href="user.html">xiaoli</a>
  107.                                         评论于
  108.                                         <time title="2016-12-07 09:12:51" datetime="2016-12-07 09:12:51">2017-03-01 09:12:51</time>
  109.                                     </div>
  110.                                 </header>
  111.                                 <div class="comment-body">
  112.                                     <p>这电影真好看！</p>
  113.                                 </div>
  114.                             </div>
  115.                         </li>
  116.                     </ul>
  117.                     <div class="col-md-12 text-center">
  118.                         <nav aria-label="Page navigation">
  119.                             <ul class="pagination">
  120.                                 <li>
  121.                                     <a href="#" aria-label="First">
  122.                                         <span aria-hidden="true">首页</span>
  123.                                     </a>
  124.                                 </li>
  125.                                 <li>
  126.                                     <a href="#" aria-label="Previous">
  127.                                         <span aria-hidden="true">上一页</span>
  128.                                     </a>
  129.                                 </li>
  130.                                 <li><a href="#">1&nbsp;/&nbsp;10</a></li>
  131.                                 <li>
  132.                                     <a href="#" aria-label="Next">
  133.                                         <span aria-hidden="true">下一页</span>
  134.                                     </a>
  135.                                 </li>
  136.                                 <li>
  137.                                     <a href="#" aria-label="Last">
  138.                                         <span aria-hidden="true">尾页</span>
  139.                                     </a>
  140.                                 </li>
  141.                             </ul>
  142.                         </nav>
  143.                     </div>
  144.             </div>
  145.         </div>
  146.     </div>
  148. {% endblock %}
  150. {% block js %}
  151. <script>
  152.     $(document).ready(function () {
  153.         $("#home_comments").addClass("active");
  154.     })
  155. </script>
  156. {% endblock %}
app/templates/home/loginlog.html
  1. {% extends 'home/home.html' %}
  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 %}
  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>&nbsp;登录日志</h3>
  18.             </div>
  19.             <div class="panel-body">
  20.                 <table class="table table-bordered">
  21.                     <tr>
  22.                         <td style="width:10%">编号</td>
  23.                         <td style="width:30%">登录时间</td>
  24.                         <td style="width:30%">登录IP</td>
  25.                         <td style="width:30%">登录地址</td>
  26.                     </tr>
  27.                     <tr>
  28.                         <td>1</td>
  29.                         <td>2017-01-01 12:00:00</td>
  30.                         <td>192.168.4.1</td>
  31.                         <td>云南昆明</td>
  32.                     </tr>
  33.                     <tr>
  34.                         <td>1</td>
  35.                         <td>2017-01-01 12:00:00</td>
  36.                         <td>192.168.4.1</td>
  37.                         <td>云南昆明</td>
  38.                     </tr>
  39.                     <tr>
  40.                         <td>1</td>
  41.                         <td>2017-01-01 12:00:00</td>
  42.                         <td>192.168.4.1</td>
  43.                         <td>云南昆明</td>
  44.                     </tr>
  45.                     <tr>
  46.                         <td>1</td>
  47.                         <td>2017-01-01 12:00:00</td>
  48.                         <td>192.168.4.1</td>
  49.                         <td>云南昆明</td>
  50.                     </tr>
  51.                     <tr>
  52.                         <td>1</td>
  53.                         <td>2017-01-01 12:00:00</td>
  54.                         <td>192.168.4.1</td>
  55.                         <td>云南昆明</td>
  56.                     </tr>
  58.                 </table>
  59.             </div>
  60.         </div>
  61.     </div>
  63. {% endblock %}
  65. {% block js %}
  66. <script>
  67.     $(document).ready(function () {
  68.         $("#home_loginlog").addClass("active");
  69.     })
  70. </script>
  71. {% endblock %}
app/templates/home/moviecol.html
  1. {% extends 'home/home.html' %}
  3. {% block css %}
  4.     <style>
  5.         .navbar-brand>img {
  6.             display: inline;
  7.         }
  8.         .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{
  9.             padding-right: 3px;
  10.             padding-left: 3px;
  11.         }
  12.         .media{
  13.             padding:3px;
  14.             border:1px solid #ccc
  15.         }
  16.     </style>
  17. {% endblock %}
  19. {% block content %}
  20.     {% include 'home/menu.html' %}
  21.     <div class="col-md-9">
  22.         <div class="panel panel-warning">
  23.             <div class="panel-heading">
  24.                 <h3 class="panel-title"><span class="glyphicon glyphicon-map-marker"></span>&nbsp;收藏电影</h3>
  25.             </div>
  26.             <div class="panel-body">
  27.                 <div class="col-md-12">
  28.                     <div class="media">
  29.                         <div class="media-left">
  30.                             <a href="play.html">
  31.                                 <img class="media-object" src="holder.js/131x83" alt="环太平洋">
  32.                             </a>
  33.                         </div>
  34.                         <div class="media-body">
  35.                             <h4 class="media-heading">环太平洋<a href="play.html" class="label label-primary pull-right"><span class="glyphicon glyphicon-play"></span>播放影片</a></h4>
  36.                             该片主要讲述了人类为了抵抗怪兽的进攻，研制出了高大的机器战士与来犯怪兽进行对抗的故事。
  37.                         </div>
  38.                     </div>
  39.                     <div class="media">
  40.                         <div class="media-left">
  41.                             <a href="play.html">
  42.                                 <img class="media-object" src="holder.js/131x83" alt="环太平洋">
  43.                             </a>
  44.                         </div>
  45.                         <div class="media-body">
  46.                             <h4 class="media-heading">环太平洋<a href="play.html" class="label label-primary pull-right"><span class="glyphicon glyphicon-play"></span>播放影片</a></h4>
  47.                             该片主要讲述了人类为了抵抗怪兽的进攻，研制出了高大的机器战士与来犯怪兽进行对抗的故事。
  48.                         </div>
  49.                     </div>
  50.                     <div class="media">
  51.                         <div class="media-left">
  52.                             <a href="play.html">
  53.                                 <img class="media-object" src="holder.js/131x83" alt="环太平洋">
  54.                             </a>
  55.                         </div>
  56.                         <div class="media-body">
  57.                             <h4 class="media-heading">环太平洋<a href="play.html" class="label label-primary pull-right"><span class="glyphicon glyphicon-play"></span>播放影片</a></h4>
  58.                             该片主要讲述了人类为了抵抗怪兽的进攻，研制出了高大的机器战士与来犯怪兽进行对抗的故事。
  59.                         </div>
  60.                     </div>
  61.                     <div class="media">
  62.                         <div class="media-left">
  63.                             <a href="play.html">
  64.                                 <img class="media-object" src="holder.js/131x83" alt="环太平洋">
  65.                             </a>
  66.                         </div>
  67.                         <div class="media-body">
  68.                             <h4 class="media-heading">环太平洋<a href="play.html" class="label label-primary pull-right"><span class="glyphicon glyphicon-play"></span>播放影片</a></h4>
  69.                             该片主要讲述了人类为了抵抗怪兽的进攻，研制出了高大的机器战士与来犯怪兽进行对抗的故事。
  70.                         </div>
  71.                     </div>
  72.                     <div class="media">
  73.                         <div class="media-left">
  74.                             <a href="play.html">
  75.                                 <img class="media-object" src="holder.js/131x83" alt="环太平洋">
  76.                             </a>
  77.                         </div>
  78.                         <div class="media-body">
  79.                             <h4 class="media-heading">环太平洋<a href="play.html" class="label label-primary pull-right"><span class="glyphicon glyphicon-play"></span>播放影片</a></h4>
  80.                             该片主要讲述了人类为了抵抗怪兽的进攻，研制出了高大的机器战士与来犯怪兽进行对抗的故事。
  81.                         </div>
  82.                     </div>
  83.                 </div>
  84.                 <div class="col-md-12 text-center" style="margin-top:6px;">
  85.                     <nav aria-label="Page navigation">
  86.                         <ul class="pagination">
  87.                             <li>
  88.                                 <a href="#" aria-label="First">
  89.                                     <span aria-hidden="true">首页</span>
  90.                                 </a>
  91.                             </li>
  92.                             <li>
  93.                                 <a href="#" aria-label="Previous">
  94.                                     <span aria-hidden="true">上一页</span>
  95.                                 </a>
  96.                             </li>
  97.                             <li><a href="#">1&nbsp;/&nbsp;10</a></li>
  98.                             <li>
  99.                                 <a href="#" aria-label="Next">
  100.                                     <span aria-hidden="true">下一页</span>
  101.                                 </a>
  102.                             </li>
  103.                             <li>
  104.                                 <a href="#" aria-label="Last">
  105.                                     <span aria-hidden="true">尾页</span>
  106.                                 </a>
  107.                             </li>
  108.                         </ul>
  109.                     </nav>
  110.                 </div>
  111.             </div>
  112.         </div>
  113.     </div>
  115. {% endblock %}
  117. {% block js %}
  118. <script>
  119.     $(document).ready(function () {
  120.         $("#home_moviecol").addClass("active");
  121.     })
  122. </script>
  123. {% endblock %}

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

电影列表页面搭建

新建视图函数,index的视图函数前面已经写过了

  1. @home.route('/animation/')
  2. def animation():
  3.     return render_template('home/animation.html')

新建app/templates/home/layout.html文件,当作index.html的基模板

  1. <!doctype html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="renderer" content="webkit">
  7.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  8.     <meta name="viewport" content="width=device-width, initial-scale=1 , user-scalable=no">
  9.     <title>微电影</title>
  10.     <link rel="shortcut icon" href="{{ url_for('static', filename='base/images/logo.png') }}">
  11.     <link rel="stylesheet" href="{{ url_for('static', filename='base/css/bootstrap.min.css') }}">
  12.     <link rel="stylesheet" href="{{ url_for('static', filename='base/css/bootstrap-movie.css') }}">
  13.     <link rel="stylesheet" href="{{ url_for('static', filename='base/css/animate.css') }}">
  14.     <link rel="stylesheet" href="{{ url_for('static', filename='base/css/animate.css') }}">
  15.     <style>
  16.         .navbar-brand>img {
  17.             display: inline;
  18.         }
  19.         .media{
  20.             padding:3px;
  21.             border:1px solid #ccc
  22.         }
  23.     </style>
  24.     {% block css %}{% endblock %}
  25. </head>
  27. <body>
  28. <!--导航-->
  29. <nav class="navbar navbar-default navbar-fixed-top">
  30.     <div class="container">
  31.         <!--小屏幕导航按钮和logo-->
  32.         <div class="navbar-header">
  33.             <button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
  34.                 <span class="icon-bar"></span>
  35.                 <span class="icon-bar"></span>
  36.                 <span class="icon-bar"></span>
  37.             </button>
  38.             <a href="index.html" class="navbar-brand" style="width:250px;">
  39.                 <img src="{{ url_for('static', filename='base/images/logo.png') }}" style="height:30px;">&nbsp;微电影
  40.             </a>
  41.         </div>
  42.         <!--小屏幕导航按钮和logo-->
  43.         <!--导航-->
  44.         <div class="navbar-collapse collapse">
  45.             <form class="navbar-form navbar-left" role="search" style="margin-top:18px;">
  46.                 <div class="form-group input-group">
  47.                     <input type="text" class="form-control" placeholder="请输入电影名！">
  48.                     <span class="input-group-btn">
  49.                         <a class="btn btn-default" href="search.html"><span class="glyphicon glyphicon-search"></span>&nbsp;搜索</a>
  50.                     </span>
  51.                 </div>
  52.             </form>
  53.             <ul class="nav navbar-nav navbar-right">
  54.                 <li>
  55.                     <a class="curlink" href="{{ url_for('home.index') }}"><span class="glyphicon glyphicon-film"></span>&nbsp;电影</a>
  56.                 </li>
  57.                 <li>
  58.                     <a class="curlink" href="{{ url_for('home.login') }}"><span class="glyphicon glyphicon-log-in"></span>&nbsp;登录</a>
  59.                 </li>
  60.                 <li>
  61.                     <a class="curlink" href="{{ url_for('home.regist') }}"><span class="glyphicon glyphicon-plus"></span>&nbsp;注册</a>
  62.                 </li>
  63.                 <li>
  64.                     <a class="curlink" href="{{ url_for('home.lougot') }}"><span class="glyphicon glyphicon-log-out"></span>&nbsp;退出</a>
  65.                 </li>
  66.                 <li>
  67.                     <a class="curlink" href="{{ url_for('home.user') }}"><span class="glyphicon glyphicon-user"></span>&nbsp;会员</a>
  68.                 </li>
  69.             </ul>
  70.         </div>
  71.         <!--导航-->
  73.     </div>
  74. </nav>
  75. <!--导航-->
  76. <!--内容-->
  78. {% block content %}
  80. {% endblock %}
  82. <!--内容-->
  83. <!--底部-->
  84. <footer>
  85.     <div class="container">
  86.         <div class="row">
  87.             <div class="col-md-12">
  88.                 <p>
  89.                     ©&nbsp;2018&nbsp;movie.cht3.top&nbsp;京ICP备 13046642号-2
  90.                 </p>
  91.             </div>
  92.         </div>
  93.     </div>
  94. </footer>
  95. <!--底部-->
  96. <script src="{{ url_for('static', filename='base/js/jquery.min.js') }}"></script>
  97. <script src="{{ url_for('static', filename='base/js/bootstrap.min.js') }}"></script>
  98. <script src="{{ url_for('static', filename='base/js/jquery.singlePageNav.min.js') }}"></script>
  99. <script src="{{ url_for('static', filename='base/js/wow.min.js') }}"></script>
  100. <script src="{{ url_for('static', filename='lazyload/jquery.lazyload.min.js') }}"></script>
  101. <script src="//cdn.bootcss.com/holder/2.9.4/holder.min.js"></script>
  102. <script>
  103.     $(function() {
  104.         new WOW().init();
  105.     })
  107. </script>
  108. <script>
  109.     $(document).ready(function() {
  110.         $("img.lazy").lazyload({
  111.             effect: "fadeIn"
  112.         });
  113.     });
  115. </script>
  117. {% block js %}
  119. {% endblock %}
  120. </body>
  121. </html>

新建app/templates/home/animation.html,轮播图

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>热映电影</title>
  6. <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='anim/css/style.css') }}">
  7. </head>
  8. <body>
  9. <!--轮播图 开始 -->
  10. <div class="main_banner">
  11.     <div class="main_banner_wrap">
  12.         <canvas id="myCanvas" width="150" height="150"></canvas>
  13.         <div class="main_banner_box" id="m_box">
  14.             <a href="javascript:void(0)" class="banner_btn js_pre">
  15.                 <span class="banner_btn_arrow"><i></i></span>
  16.             </a>
  17.             <a href="javascript:void(0)" class="banner_btn btn_next js_next">
  18.                 <span class="banner_btn_arrow"><i></i></span>
  19.             </a>
  20.             <ul>
  21.                 <li id="imgCard0">
  22.                     <a href=""><span style="opacity:0;"></span></a>
  23.                     <img src="{{ url_for('static', filename='anim/main_banner/big0020150102211033.jpg') }}" alt="">
  24.                     <p style="bottom:0">周杰伦粉丝版MV</p>
  25.                 </li>
  26.                 <li id="imgCard1">
  27.                     <a href=""><span style="opacity:0.4;"></span></a>
  28.                     <img src="{{ url_for('static', filename='anim/main_banner/big0120150101183428.jpg') }}" alt="">
  29.                     <p>乐侃有声节目第二期</p>
  30.                 </li>
  31.                 <li id="imgCard2">
  32.                     <a href=""><span style="opacity:0.4;" ></span></a>
  33.                     <img src="{{ url_for('static', filename='anim/main_banner/big0320150101183351.jpg') }}" alt="">
  34.                     <p>乐见大牌：”荣“耀之声，”维“我独尊</p>
  35.                 </li>
  36.                 <li id="imgCard3">
  37.                     <a href=""><span style="opacity:0.4;"></span></a>
  38.                     <img src="{{ url_for('static', filename='anim/main_banner/big0420150101224343.jpg') }}" alt="">
  39.                     <p>王力宏四年心血结晶</p>
  40.                 </li>
  41.                 <li id="imgCard4">
  42.                     <a href=""><span style="opacity:0.4;"></span></a>
  43.                     <img src="{{ url_for('static', filename='anim/main_banner/big0720150102210934.jpg') }}" alt="">
  44.                     <p>MV精选：《武媚》女神团美艳大比拼</p>
  45.                 </li>
  46.             </ul>
  47.             <!--火狐倒影图层-->
  48.             <p id="rflt"></p>
  49.             <!--火狐倒影图层-->
  50.         </div>
  51.         <!--序列号按钮-->
  52.         <div class="btn_list">
  53.             <span class="curr"></span><span></span><span></span><span></span><span></span>
  54.         </div>
  55.     </div>
  57. </div>
  58. <!--轮播图 结束 -->
  60. <script type="text/javascript" src="{{ url_for('static', filename='anim/js/jquery.js') }}"></script>
  61. <script type="text/javascript" src="{{ url_for('static', filename='anim/js/script.js') }}"></script>
  63. </body>
  64. </html>

新建app/static/anim文件夹,将animation中的静态资源拷贝到这个文件夹下

修改index.html内容

  1. {% extends 'home/layout.html' %}
  3. {% block content %}
  4. <!--热门电影-->
  5. <section id="hotmovie" style="margin-top:76px">
  6.     <div class="container">
  7.         <div class="row wow fadeInRight" data-wow-delay="0.6s">
  8.             <div class="row">
  9.                 <iframe class="wow fadeIn" width="100%" height="375px" frameborder=0 scrolling=no src="{{ url_for('home.animation') }}"></iframe>
  10.             </div>
  11.         </div>
  12.     </div>
  13. </section>
  14. <!--热门电影-->
  15. <!--电影列表-->
  16. <section id="movielist">
  17.     <div class="container">
  18.         <div class="row wow fadeIn" data-wow-delay="0.6s">
  19.             <div class="col-md-12 table-responsive">
  20.                 <table class="table text-left table-bordered" id="movietags">
  21.                     <tr>
  22.                         <td style="width:10%;">电影标签</td>
  23.                         <td style="width:90%;">
  24.                             <a class="label label-info"><span class="glyphicon glyphicon-tag">&nbsp;标签一</span></a>
  25.                             &nbsp;
  26.                             <a class="label label-info"><span class="glyphicon glyphicon-tag">&nbsp;标签一</span></a>
  27.                             &nbsp;
  28.                             <a class="label label-info"><span class="glyphicon glyphicon-tag">&nbsp;标签一</span></a>
  29.                             &nbsp;
  30.                             <a class="label label-info"><span class="glyphicon glyphicon-tag">&nbsp;标签一</span></a>
  31.                             &nbsp;
  32.                             <a class="label label-info"><span class="glyphicon glyphicon-tag">&nbsp;标签一</span></a>
  33.                     </tr>
  34.                     <tr>
  35.                         <td>电影星级</td>
  36.                         <td>
  37.                             <a class="label label-warning"><span class="glyphicon glyphicon-star">&nbsp;一星</span></a>
  38.                             &nbsp;
  39.                             <a class="label label-warning"><span class="glyphicon glyphicon-star">&nbsp;二星</span></a>
  40.                             &nbsp;
  41.                             <a class="label label-warning"><span class="glyphicon glyphicon-star">&nbsp;三星</span></a>
  42.                             &nbsp;
  43.                             <a class="label label-warning"><span class="glyphicon glyphicon-star">&nbsp;四星</span></a>
  44.                             &nbsp;
  45.                             <a class="label label-warning"><span class="glyphicon glyphicon-star">&nbsp;五星</span></a>
  46.                         </td>
  47.                     </tr>
  48.                     <tr>
  49.                         <td>上映时间</td>
  50.                         <td>
  51.                             <a class="label label-default"><span class="glyphicon glyphicon-time">&nbsp;最近</span></a>
  52.                             &nbsp;
  53.                             <a class="label label-default"><span class="glyphicon glyphicon-time">&nbsp;2017</span></a>
  54.                             &nbsp;
  55.                             <a class="label label-default"><span class="glyphicon glyphicon-time">&nbsp;2016</span></a>
  56.                             &nbsp;
  57.                             <a class="label label-default"><span class="glyphicon glyphicon-time">&nbsp;2015</span></a>
  58.                             &nbsp;
  59.                             <a class="label label-default"><span class="glyphicon glyphicon-time">&nbsp;更早</span></a>
  60.                         </td>
  61.                     </tr>
  62.                     <tr>
  63.                         <td>播放数量</td>
  64.                         <td>
  65.                             <a class="label label-success"><span class="glyphicon glyphicon-arrow-down">&nbsp;从高到底</span></a>
  66.                             &nbsp;
  67.                             <a class="label label-danger"><span class="glyphicon glyphicon-arrow-up">&nbsp;从低到高</span></a>
  68.                         </td>
  69.                     </tr>
  70.                     <tr>
  71.                         <td>评论数量</td>
  72.                         <td>
  73.                             <a class="label label-success"><span class="glyphicon glyphicon-arrow-down">&nbsp;从高到底</span></a>
  74.                             &nbsp;
  75.                             <a class="label label-danger"><span class="glyphicon glyphicon-arrow-up">&nbsp;从低到高</span></a>
  76.                         </td>
  77.                     </tr>
  78.                 </table>
  79.             </div>
  80.             <div class="col-md-3">
  81.                 <div class="movielist text-center">
  82.                     <!--<img data-original="holder.js/262x166"
  83.                              class="img-responsive lazy center-block" alt="">-->
  84.                     <img src="holder.js/262x166" class="img-responsive center-block" alt="">
  85.                     <div class="text-left" style="margin-left:auto;margin-right:auto;width:210px;">
  86.                         <span style="color:#999;font-style: italic;">环太平洋</span><br>
  87.                         <div>
  88.                             <span class="glyphicon glyphicon-star" style="color:#FFD119"></span>
  89.                             <span class="glyphicon glyphicon-star" style="color:#FFD119"></span>
  90.                             <span class="glyphicon glyphicon-star" style="color:#FFD119"></span>
  91.                             <span class="glyphicon glyphicon-star-empty" style="color:#FFD119"></span>
  92.                             <span class="glyphicon glyphicon-star-empty" style="color:#FFD119"></span>
  93.                         </div>
  94.                     </div>
  95.                     <a href="play.html" class="btn btn-primary" target="_blank" role="button"><span class="glyphicon glyphicon-play"></span>&nbsp;播放</a>
  96.                 </div>
  97.             </div>
  98.             <div class="col-md-3">
  99.                 <div class="movielist text-center">
  100.                     <!--<img data-original="holder.js/262x166"
  101.                              class="img-responsive lazy center-block" alt="">-->
  102.                     <img src="holder.js/262x166" class="img-responsive center-block" alt="">
  103.                     <div class="text-left" style="margin-left:auto;margin-right:auto;width:210px;">
  104.                         <span style="color:#999;font-style: italic;">环太平洋</span><br>
  105.                         <div>
  106.                             <span class="glyphicon glyphicon-star" style="color:#FFD119"></span>
  107.                             <span class="glyphicon glyphicon-star" style="color:#FFD119"></span>
  108.                             <span class="glyphicon glyphicon-star" style="color:#FFD119"></span>
  109.                             <span class="glyphicon glyphicon-star-empty" style="color:#FFD119"></span>
  110.                             <span class="glyphicon glyphicon-star-empty" style="color:#FFD119"></span>
  111.                         </div>
  112.                     </div>
  113.                     <a href="play.html" class="btn btn-primary" target="_blank" role="button"><span class="glyphicon glyphicon-play"></span>&nbsp;播放</a>
  114.                 </div>
  115.             </div>
  116.             <div class="col-md-3">
  117.                 <div class="movielist text-center">
  118.                     <!--<img data-original="holder.js/262x166"
  119.                              class="img-responsive lazy center-block" alt="">-->
  120.                     <img src="holder.js/262x166" class="img-responsive center-block" alt="">
  121.                     <div class="text-left" style="margin-left:auto;margin-right:auto;width:210px;">
  122.                         <span style="color:#999;font-style: italic;">环太平洋</span><br>
  123.                         <div>
  124.                             <span class="glyphicon glyphicon-star" style="color:#FFD119"></span>
  125.                             <span class="glyphicon glyphicon-star" style="color:#FFD119"></span>
  126.                             <span class="glyphicon glyphicon-star" style="color:#FFD119"></span>
  127.                             <span class="glyphicon glyphicon-star-empty" style="color:#FFD119"></span>
  128.                             <span class="glyphicon glyphicon-star-empty" style="color:#FFD119"></span>
  129.                         </div>
  130.                     </div>
  131.                     <a href="play.html" class="btn btn-primary" target="_blank" role="button"><span class="glyphicon glyphicon-play"></span>&nbsp;播放</a>
  132.                 </div>
  133.             </div>
  134.             <div class="col-md-12">
  135.                 <nav aria-label="Page navigation">
  136.                     <ul class="pagination">
  137.                         <li>
  138.                             <a href="#" aria-label="First">
  139.                                 <span aria-hidden="true">首页</span>
  140.                             </a>
  141.                         </li>
  142.                         <li>
  143.                             <a href="#" aria-label="Previous">
  144.                                 <span aria-hidden="true">上一页</span>
  145.                             </a>
  146.                         </li>
  147.                         <li><a href="#">1&nbsp;/&nbsp;10</a></li>
  148.                         <li>
  149.                             <a href="#" aria-label="Next">
  150.                                 <span aria-hidden="true">下一页</span>
  151.                             </a>
  152.                         </li>
  153.                         <li>
  154.                             <a href="#" aria-label="Last">
  155.                                 <span aria-hidden="true">尾页</span>
  156.                             </a>
  157.                         </li>
  158.                     </ul>
  159.                 </nav>
  160.             </div>
  161.         </div>
  162.     </div>
  163. </section>
  164. <!--电影列表-->
  165. {% endblock %}

浏览器访问即可看到主页面

电影搜索页面搭建

视图函数

  1. @home.route('/search/')
  2. def search():
  3.     return render_template('home/search.html')

新建app/templates/home/search.html

  1. {% extends 'home/home.html' %}
  3. {% block content %}
  4.     <div class="row">
  5.         <div class="col-md-12">
  6.             <ol class="breadcrumb" style="margin-top:6px;">
  7.                 <li>与"xxx"有关的电影，共x部</li>
  8.             </ol>
  9.         </div>
  10.         <div class="col-md-12">
  11.             <div class="media">
  12.                 <div class="media-left">
  13.                     <a href="play.html">
  14.                         <img class="media-object" src="holder.js/131x83" alt="环太平洋">
  15.                     </a>
  16.                 </div>
  17.                 <div class="media-body">
  18.                     <h4 class="media-heading">环太平洋<a href="play.html" class="label label-primary pull-right"><span class="glyphicon glyphicon-play"></span>播放影片</a></h4>
  19.                     该片主要讲述了人类为了抵抗怪兽的进攻，研制出了高大的机器战士与来犯怪兽进行对抗的故事。
  20.                 </div>
  21.             </div>
  22.             <div class="media">
  23.                 <div class="media-left">
  24.                     <a href="play.html">
  25.                         <img class="media-object" src="holder.js/131x83" alt="环太平洋">
  26.                     </a>
  27.                 </div>
  28.                 <div class="media-body">
  29.                     <h4 class="media-heading">环太平洋<a href="play.html" class="label label-primary pull-right"><span 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 class="glyphicon glyphicon-play"></span>播放影片</a></h4>
  41.                     该片主要讲述了人类为了抵抗怪兽的进攻，研制出了高大的机器战士与来犯怪兽进行对抗的故事。
  42.                 </div>
  43.             </div>
  44.             <div class="media">
  45.                 <div class="media-left">
  46.                     <a href="play.html">
  47.                         <img class="media-object" src="holder.js/131x83" alt="环太平洋">
  48.                     </a>
  49.                 </div>
  50.                 <div class="media-body">
  51.                     <h4 class="media-heading">环太平洋<a href="play.html" class="label label-primary pull-right"><span class="glyphicon glyphicon-play"></span>播放影片</a></h4>
  52.                     该片主要讲述了人类为了抵抗怪兽的进攻，研制出了高大的机器战士与来犯怪兽进行对抗的故事。
  53.                 </div>
  54.             </div>
  55.             <div class="media">
  56.                 <div class="media-left">
  57.                     <a href="play.html">
  58.                         <img class="media-object" src="holder.js/131x83" alt="环太平洋">
  59.                     </a>
  60.                 </div>
  61.                 <div class="media-body">
  62.                     <h4 class="media-heading">环太平洋<a href="play.html" class="label label-primary pull-right"><span class="glyphicon glyphicon-play"></span>播放影片</a></h4>
  63.                     该片主要讲述了人类为了抵抗怪兽的进攻，研制出了高大的机器战士与来犯怪兽进行对抗的故事。
  64.                 </div>
  65.             </div>
  66.         </div>
  67.         <div class="col-md-12 text-center">
  68.             <nav aria-label="Page navigation">
  69.                 <ul class="pagination">
  70.                     <li>
  71.                         <a href="#" aria-label="First">
  72.                             <span aria-hidden="true">首页</span>
  73.                         </a>
  74.                     </li>
  75.                     <li>
  76.                         <a href="#" aria-label="Previous">
  77.                             <span aria-hidden="true">上一页</span>
  78.                         </a>
  79.                     </li>
  80.                     <li><a href="#">1&nbsp;/&nbsp;10</a></li>
  81.                     <li>
  82.                         <a href="#" aria-label="Next">
  83.                             <span aria-hidden="true">下一页</span>
  84.                         </a>
  85.                     </li>
  86.                     <li>
  87.                         <a href="#" aria-label="Last">
  88.                             <span aria-hidden="true">尾页</span>
  89.                         </a>
  90.                     </li>
  91.                 </ul>
  92.             </nav>
  93.         </div>
  94.     </div>
  95. {% endblock %}

修改home.html和layout.html文件中的search链接

  1. <div class="form-group input-group">
  2.     <input type="text" class="form-control" placeholder="请输入电影名！">
  3.     <span class="input-group-btn">
  4.         <a class="btn btn-default" href="{{ url_for('home.search') }}"><span class="glyphicon glyphicon-search"></span>&nbsp;搜索</a>
  5.     </span>
  6. </div>

浏览器访问即可进行查询

电影详情页面搭建

视图函数

  1. @home.route('/play/')
  2. def play():
  3.     return render_template('home/play.html')

新建app/templates/home/play.html

  1. {% extends 'home/home.html' %}
  3. {% block css %}
  4.     <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='jwplayer/skins/stormtrooper.css') }}">
  5.     <script>
  6.         SyntaxHighlighter.all();
  7.     </script>
  8.     <!--播放页面-->
  9.     <style>
  10.         .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{
  11.             padding-right: 3px;
  12.             padding-left: 3px;
  13.         }
  14.     </style>
  15. {% endblock %}
  17. {% block content %}
  18.     <div class="row">
  19.         <div class="col-md-8">
  20.             <div id="moviecontainer"></div>
  21.         </div>
  22.         <div class="col-md-4" style="height:500px;">
  23.             <div class="panel panel-info">
  24.                 <div class="panel-heading">
  25.                     <h3 class="panel-title"><span class="glyphicon glyphicon-facetime-video"></span>&nbsp;电影介绍</h3>
  26.                 </div>
  27.                 <div class="panel-body" style="height:459px;">
  28.                     <table class="table">
  29.                         <tr>
  30.                             <td style="width:30%;color:#ccc;font-weight:bold;font-style:italic;">
  31.                                 <span class="glyphicon glyphicon-film"></span>&nbsp;片名
  32.                             </td>
  33.                             <td>环太平洋</td>
  34.                         </tr>
  35.                         <tr>
  36.                             <td style="color:#ccc;font-weight:bold;font-style:italic;">
  37.                                 <span class="glyphicon glyphicon-tag"></span>&nbsp;标签
  38.                             </td>
  39.                             <td>科幻</td>
  40.                         </tr>
  41.                         <tr>
  42.                             <td style="color:#ccc;font-weight:bold;font-style:italic;">
  43.                                 <span class="glyphicon glyphicon-time"></span>&nbsp;片长
  44.                             </td>
  45.                             <td>05:04</td>
  46.                         </tr>
  47.                         <tr>
  48.                             <td style="color:#ccc;font-weight:bold;font-style:italic;">
  49.                                 <span class="glyphicon glyphicon-map-marker"></span>&nbsp;地区
  50.                             </td>
  51.                             <td>美国</td>
  52.                         </tr>
  53.                         <tr>
  54.                             <td style="color:#ccc;font-weight:bold;font-style:italic;">
  55.                                 <span class="glyphicon glyphicon-star"></span>&nbsp;星级
  56.                             </td>
  57.                             <td>
  58.                                 <div>
  59.                                     <span class="glyphicon glyphicon-star" style="color:#FFD119"></span>
  60.                                     <span class="glyphicon glyphicon-star" style="color:#FFD119"></span>
  61.                                     <span class="glyphicon glyphicon-star" style="color:#FFD119"></span>
  62.                                     <span class="glyphicon glyphicon-star-empty" style="color:#FFD119"></span>
  63.                                     <span class="glyphicon glyphicon-star-empty" style="color:#FFD119"></span>
  64.                                 </div>
  65.                             </td>
  66.                         </tr>
  67.                         <tr>
  68.                             <td style="color:#ccc;font-weight:bold;font-style:italic;">
  69.                                 <span class="glyphicon glyphicon-calendar"></span>&nbsp;上映时间
  70.                             </td>
  71.                             <td>2013年7月12日</td>
  72.                         </tr>
  73.                         <tr>
  74.                             <td style="color:#ccc;font-weight:bold;font-style:italic;">
  75.                                 <span class="glyphicon glyphicon-play"></span>&nbsp;播放数量
  76.                             </td>
  77.                             <td>1000</td>
  78.                         </tr>
  79.                         <tr>
  80.                             <td style="color:#ccc;font-weight:bold;font-style:italic;">
  81.                                 <span class="glyphicon glyphicon-comment"></span>&nbsp;评论数量
  82.                             </td>
  83.                             <td>1000</td>
  84.                         </tr>
  85.                         <tr>
  86.                             <td style="color:#ccc;font-weight:bold;font-style:italic;">
  87.                                 <span class="glyphicon glyphicon-picture"></span>&nbsp;影片介绍
  88.                             </td>
  89.                             <td>
  90.                             该片主要讲述了人类为了抵抗怪兽的进攻，研制出了高大的机器战士与来犯怪兽进行对抗的故事。
  91.                             </td>
  92.                         </tr>
  93.                     </table>
  94.                 </div>
  95.             </div>
  96.         </div>
  97.         <div class="col-md-12" style="margin-top:6px;">
  98.             <div class="panel panel-danger">
  99.                 <div class="panel-heading">
  100.                     <h3 class="panel-title"><span class="glyphicon glyphicon-comment"></span>&nbsp;电影评论</h3>
  101.                 </div>
  102.                 <div class="panel-body">
  103.                     <div class="alert alert-danger alert-dismissible" role="alert">
  104.                         <button type="button" class="close" data-dismiss="alert">
  105.                             <span aria-hidden="true">×</span>
  106.                             <span class="sr-only">Close</span>
  107.                         </button>
  108.                         <strong>请先<a href="login.html" target="_blank" class="text-info">登录</a>，才可参与评论！</strong>
  109.                     </div>
  110.                     <ol class="breadcrumb" style="margin-top:6px;">
  111.                         <li>全部评论(5)</li>
  112.                     </ol>
  113.                     <form role="form" style="margin-bottom:6px;">
  114.                         <div class="form-group">
  115.                             <div>
  116.                                 <label for="input_content">内容</label>
  117.                                 <textarea id="input_content"></textarea>
  118.                             </div>
  119.                             <div class="col-xs-12" id="error_content"></div>
  120.                         </div>
  121.                         <a class="btn btn-success" id="btn-sub"><span class="glyphicon glyphicon-edit"></span>&nbsp;提交评论</a>
  122.                         &nbsp;
  123.                         <a class="btn btn-danger" id="btn-col"><span class="glyphicon glyphicon-heart"></span>&nbsp;收藏电影</a>
  124.                     </form>
  125.                     <ul class="commentList">
  126.                         <li class="item cl">
  127.                             <a href="user.html">
  128.                                 <i class="avatar size-L radius">
  129.                                     <img alt="50x50" src="holder.js/50x50" class="img-circle" style="border:1px solid #abcdef;">
  130.                                 </i>
  131.                             </a>
  132.                             <div class="comment-main">
  133.                                 <header class="comment-header">
  134.                                     <div class="comment-meta">
  135.                                         <a class="comment-author" href="user.html">xiaoli</a>
  136.                                         评论于
  137.                                         <time title="2016-12-07 09:12:51" datetime="2016-12-07 09:12:51">2017-03-01 09:12:51</time>
  138.                                     </div>
  139.                                 </header>
  140.                                 <div class="comment-body">
  141.                                     <p>这电影真好看！</p>
  142.                                 </div>
  143.                             </div>
  144.                         </li>
  145.                         <li class="item cl">
  146.                             <a href="user.html">
  147.                                 <i class="avatar size-L radius">
  148.                                     <img alt="50x50" src="holder.js/50x50" class="img-circle" style="border:1px solid #abcdef;">
  149.                                 </i>
  150.                             </a>
  151.                             <div class="comment-main">
  152.                                 <header class="comment-header">
  153.                                     <div class="comment-meta">
  154.                                         <a class="comment-author" href="user.html">xiaoli</a>
  155.                                         评论于
  156.                                         <time title="2016-12-07 09:12:51" datetime="2016-12-07 09:12:51">2017-03-01 09:12:51</time>
  157.                                     </div>
  158.                                 </header>
  159.                                 <div class="comment-body">
  160.                                     <p>这电影真好看！</p>
  161.                                 </div>
  162.                             </div>
  163.                         </li>
  164.                         <li class="item cl">
  165.                             <a href="user.html">
  166.                                 <i class="avatar size-L radius">
  167.                                     <img alt="50x50" src="holder.js/50x50" class="img-circle" style="border:1px solid #abcdef;">
  168.                                 </i>
  169.                             </a>
  170.                             <div class="comment-main">
  171.                                 <header class="comment-header">
  172.                                     <div class="comment-meta">
  173.                                         <a class="comment-author" href="user.html">xiaoli</a>
  174.                                         评论于
  175.                                         <time title="2016-12-07 09:12:51" datetime="2016-12-07 09:12:51">2017-03-01 09:12:51</time>
  176.                                     </div>
  177.                                 </header>
  178.                                 <div class="comment-body">
  179.                                     <p>这电影真好看！</p>
  180.                                 </div>
  181.                             </div>
  182.                         </li>
  183.                         <li class="item cl">
  184.                             <a href="user.html">
  185.                                 <i class="avatar size-L radius">
  186.                                     <img alt="50x50" src="holder.js/50x50" class="img-circle" style="border:1px solid #abcdef;">
  187.                                 </i>
  188.                             </a>
  189.                             <div class="comment-main">
  190.                                 <header class="comment-header">
  191.                                     <div class="comment-meta">
  192.                                         <a class="comment-author" href="user.html">xiaoli</a>
  193.                                         评论于
  194.                                         <time title="2016-12-07 09:12:51" datetime="2016-12-07 09:12:51">2017-03-01 09:12:51</time>
  195.                                     </div>
  196.                                 </header>
  197.                                 <div class="comment-body">
  198.                                     <p>这电影真好看！</p>
  199.                                 </div>
  200.                             </div>
  201.                         </li>
  202.                         <li class="item cl">
  203.                             <a href="user.html">
  204.                                 <i class="avatar size-L radius">
  205.                                     <img alt="50x50" src="holder.js/50x50" class="img-circle" style="border:1px solid #abcdef;">
  206.                                 </i>
  207.                             </a>
  208.                             <div class="comment-main">
  209.                                 <header class="comment-header">
  210.                                     <div class="comment-meta">
  211.                                         <a class="comment-author" href="user.html">xiaoli</a>
  212.                                         评论于
  213.                                         <time title="2016-12-07 09:12:51" datetime="2016-12-07 09:12:51">2017-03-01 09:12:51</time>
  214.                                     </div>
  215.                                 </header>
  216.                                 <div class="comment-body">
  217.                                     <p>这电影真好看！</p>
  218.                                 </div>
  219.                             </div>
  220.                         </li>
  221.                     </ul>
  222.                     <div class="col-md-12 text-center">
  223.                         <nav aria-label="Page navigation">
  224.                             <ul class="pagination">
  225.                                 <li>
  226.                                     <a href="#" aria-label="First">
  227.                                         <span aria-hidden="true">首页</span>
  228.                                     </a>
  229.                                 </li>
  230.                                 <li>
  231.                                     <a href="#" aria-label="Previous">
  232.                                         <span aria-hidden="true">上一页</span>
  233.                                     </a>
  234.                                 </li>
  235.                                 <li><a href="#">1&nbsp;/&nbsp;10</a></li>
  236.                                 <li>
  237.                                     <a href="#" aria-label="Next">
  238.                                         <span aria-hidden="true">下一页</span>
  239.                                     </a>
  240.                                 </li>
  241.                                 <li>
  242.                                     <a href="#" aria-label="Last">
  243.                                         <span aria-hidden="true">尾页</span>
  244.                                     </a>
  245.                                 </li>
  246.                             </ul>
  247.                         </nav>
  248.                     </div>
  249.                 </div>
  250.             </div>
  251.         </div>
  252.     </div>
  253. {% endblock %}
  255. {% block js %}
  256. <script type="text/javascript" src="{{ url_for('static', filename='ueditor/ueditor.config.js') }}"></script>
  257. <script type="text/javascript" src="{{ url_for('static', filename='ueditor/ueditor.all.js') }}"></script>
  258. <script type="text/javascript" src="{{ url_for('static', filename='ueditor/lang/zh-cn/zh-cn.js') }}"></script>
  259. <script type="text/javascript" src="{{ url_for('static', filename='jwplayer/jwplayer.js') }}"></script>
  260. <script>
  261. var ue = UE.getEditor('input_content',{
  262.     toolbars: [
  263.         ['fullscreen', 'emotion', 'preview', 'link']
  264.     ],
  265.     initialFrameWidth:"100%",
  266.     initialFrameHeight:"100",
  267. });
  268. </script>
  269. <script type="text/javascript">
  270.     jwplayer.key = "P9VTqT/X6TSP4gi/hy1wy23BivBhjdzVjMeOaQ==";
  271. </script>
  272. <script type="text/javascript">
  273.     jwplayer("moviecontainer").setup({
  274.         flashplayer: "{{ url_for('static', filename='jwplayer/jwplayer.flash.swf') }}",
  275.         playlist: [{
  276.             file: "{{ url_for('static', filename='video/htpy.mp4') }}",
  277.             title: "环太平洋"
  278.         }],
  279.         modes: [{
  280.             type: "html5"
  281.         }, {
  282.             type: "flash",
  283.             src: "{{ url_for('static', filename='jwplayer/jwplayer.flash.swf') }}"
  284.         }, {
  285.             type: "download"
  286.         }],
  287.         skin: {
  288.             name: "vapor"
  289.         },
  290.         "playlist.position": "left",
  291.         "playlist.size": 400,
  292.         height: 500,
  293.         width: 774,
  294.     });
  295. </script>
  296. <!--播放页面-->
  297. <script>
  298.     $(function() {
  299.         new WOW().init();
  300.     })
  301. </script>
  302. <script>
  303.     $(document).ready(function() {
  304.         $("img.lazy").lazyload({
  305.             effect: "fadeIn"
  306.         });
  307.     });
  308. </script>
  309. {% endblock %}

修改其它页面的播放视频按钮链接

  1. play.html -> {{ url_for('home.play') }}

404页面搭建

视图函数,放在__init__文件中

全局404(AOP)

app/__init__.py

  1. @app.errorhandler(404)
  2. def page_not_found(err):
  3.     return render_template('home/404.html'), 404

新建app/templates/home/404.html

  1. <!doctype html>
  2. <html lang="zh-cn">
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>消失在宇宙星空中的404页面</title>
  6.     <link href="{{ url_for('static', filename='404/404.css') }}" rel="stylesheet" type="text/css">
  7. </head>
  8. <body>
  9. <!-- 代码 开始 -->
  10. <div class="fullScreen" id="fullScreen">
  11.     <img class="rotating" src="{{ url_for('static', filename='404/spaceman.svg') }}">
  12.     <div class="pagenotfound-text">
  13.         <h1>迷失在太空中！</h1>
  14.         <h2><a href="{{ url_for('home.index') }}">返回首页</a></h2>
  15.     </div>
  16.     <canvas id="canvas2d"></canvas>
  17. </div>
  18. <script type="text/javascript" src="{{ url_for('static', filename='404/404.js') }}"></script>
  19. <!-- 代码 结束 -->
  20. </body>
  21. </html>

浏览器随便输入一个不存在的url进行查看

Flask 构建微电影视频网站(二)的更多相关文章

  1. Python flask 构建微电影视频网站☝☝☝

    Python flask 构建微电影视频网站☝☝☝ 1.安装数据库连接依赖包 pip install flask-sqlalchemy 2.创建movie数据库 在CentOS虚拟机,进入MaridD ...

  2. Python flask 构建微电影视频网站✍✍✍

    Python flask 构建微电影视频网站  整个课程都看完了,这个课程的分享可以往下看,下面有链接,之前做java开发也做了一些年头,也分享下自己看这个视频的感受,单论单个知识点课程本身没问题,大 ...

  3. Flask 构建微电影视频网站(一)

    Flask构建电影视频网站 Python MTV模型 Flask微内核 Flask扩展插件配置及使用方法 根据业务开发网站前后台功能 Flask结合MySQL数据库 你将可以独立开发网站 独立部署运维 ...

  4. Python Flask 构建微电影视频网站

    前言 学完本教程,你将掌握: 1.学会使用整形.浮点型.路径型.字符串型正则表达式路由转化器 2.学会使用post与get请求.上传文件.cookie获取与相应.404处理 3.学会适应模板自动转义. ...

  5. Flask 构建微电影视频网站(四)

    后台管理 实现后台管理系统使用flask sqlalchemy结合mysql数据库进行增删改查操作.分页的使用.路由装饰器定义.模板中变量调用.登录会话机制.上传文件.flask wtforms表单使 ...

  6. Flask 构建微电影视频网站(八)

    评论收藏及弹幕 实现电影评论添加及列表.数据查询实现统计播放量和评论量.jquery ajax实现收藏电影,flask结合redis消息队列实现电影弹幕,bug处理等功能. 电影评论-统计 class ...

  7. Flask 构建微电影视频网站(三)

    搭建后台页面 视图函数位于admin文件夹下, app/admin/views.py 管理员登录页面搭建 视图函数 @admin.route('/') def index(): return '后台主 ...

  8. Flask 构建微电影视频网站(七)

    电影模块实现 上映预告 @home.route("/animation/") def animation(): """ 首页轮播动画 "&q ...

  9. Flask 构建微电影视频网站(六)

    会员模块实现 会员注册 class RegistForm(FlaskForm): name = StringField( label="昵称", validators=[ Data ...

随机推荐

  1. 朱晔的互联网架构实践心得S1E10：数据的权衡和折腾【系列完】

    朱晔的互联网架构实践心得S1E10:数据的权衡和折腾[系列完] [下载本文PDF进行阅读] 本文站在数据的维度谈一下在架构设计中的一些方案对数据的权衡以及数据流转过程中的折腾这两个事情.最后进行系列文 ...

  2. LeetCode 965. Univalued Binary Tree

    A binary tree is univalued if every node in the tree has the same value. Return true if and only if ...

  3. Pandas基础使用

    Pandas是基于NumPy的一种工具,该工具是为了解决数据分析任务而创建的. 1.导入pandas import pandas as pd 2.pandas数据类型: 1)Series:一维数据类型 ...

  4. 1003: [ZJOI2006]物流运输 = DP+SBFA

    题意就是告诉你有n个点,e条边,m天,每天都会从起点到终点走一次最短路,但是有些点在某些时间段是不可走的,因此在某些天需要改变路径,每次改变路径的成本是K,总成本=n天运输路线长度之和+K*改变运输路 ...

  5. 【转】安装ambari的时候遇到的ambari和hadoop问题集

    5.在安装的时候遇到的问题 5.1使用ambari-server start的时候出现ERROR: Exiting with exit code -1. 5.1.1REASON: Ambari Ser ...

  6. Linux的基本解读

    Linux是一套免费使用和自由传播的类Unix操作系统,是一个基于POSIX和UNIX的多用户.多任务.支持多线程和多CPU的操作系统 而严格来讲,Linux这个词本身只表示Linux内核,但实际上人 ...

  7. Laravel 门面实例教程 —— 创建自定义 Facades 类

    我们首先创建一个需要绑定到服务容器的Test类: <?php namespace App\Facades; class Test { public function doSomething() ...

  8. python之路--线程的其他方法

    一 . current_thread的用法 import threading import time from threading import Thread, current_thread def ...

  9. 收藏一个带动画效果的ScrollViewer以及ScrollBar的模板

    这里介绍一个带动画效果的ScrollViewer和ScrollBar,总共分为两个资源字典,直接拿来引用即可: 1 ScrollBarStyle.xaml <ResourceDictionary ...

  10. 转 在PowerDesigner的PDM图形窗口中显示数据列的中文注释

    Name是名称(字段描述),Code是字段名称,Comment是注释名称,ER图中显示的是Name.一般设计时,Name跟comment都设计成描述, 而设计时候常把comment写成中文,name保 ...