页面完成后的最终布局

电影视频网站首页面

会员登录页面

会员注册页面

点击退出和会员按钮，直接进入会员登录页面

视频播放页面

可以看到，页面共同的部分是顶部导航和底部导航

所以我们可以把页面顶部导航和底部导航部分单独定义一个文件home.html，然后让需要使用顶部导航和底部导航的页面都继承home.html页面

1.创建父模板home.html

在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.     <style>
  15.         .navbar-brand > img {
  16.             display: inline;
  17.         }
  19.         .media {
  20.             padding: 3px;
  21.             border: 1px solid #ccc
  22.         }
  23.     </style>
  24. </head>
  26. {% block css %}
  28. {% endblock %}
  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="{{ url_for('home.index',page=1) }}" 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" id='do-search'><span
  53.                                 class="glyphicon glyphicon-search"></span>&nbsp;搜索</a>
  54.                     </span>
  55.                 </div>
  56.             </form>
  57.             <ul class="nav navbar-nav navbar-right">
  58.                 <li>
  59.                     <a class="curlink" href="{{ url_for('home.index',page=1) }}"><span
  60.                             class="glyphicon glyphicon-film"></span>&nbsp;电影</a>
  61.                 </li>
  62.                 <li>
  63.                     <a class="curlink" href="{{ url_for('home.login') }}"><span
  64.                             class="glyphicon glyphicon-log-in"></span>&nbsp;登录</a>
  65.                 </li>
  66.                 <li>
  67.                     <a class="curlink" href="{{ url_for('home.register') }}"><span
  68.                             class="glyphicon glyphicon-plus"></span>&nbsp;注册</a>
  69.                 </li>
  70.                 <li>
  71.                     <a class="curlink" href="{{ url_for('home.logout') }}"><span
  72.                             class="glyphicon glyphicon-log-out"></span>&nbsp;退出</a>
  73.                 </li>
  74.                 <li>
  75.                     <a class="curlink" href="{{ url_for('home.user') }}"><span class="glyphicon glyphicon-user"></span>&nbsp;会员</a>
  76.                 </li>
  77.             </ul>
  78.         </div>
  79.         <!--导航-->
  80.     </div>
  81. </nav>
  82. <!--导航-->
  83. <!--内容-->
  84. <div class="container" style="margin-top:76px">
  85.     {% block content %}
  87.     {% endblock %}
  88. </div>
  89. <!--内容-->
  90. <!--底部-->
  91. <footer>
  92.     <div class="container">
  93.         <div class="row">
  94.             <div class="col-md-12">
  95.                 <p>
  96.                     ©&nbsp;2017&nbsp;flaskmovie.com&nbsp;京ICP备 123456789号
  97.                 </p>
  98.             </div>
  99.         </div>
  100.     </div>
  101. </footer>
  102. <!--底部-->
  103. <script src="{{ url_for('static',filename='base/js/jquery.min.js') }}"></script>
  104. <script src="{{ url_for('static',filename='base/js/bootstrap.min.js') }}"></script>
  105. <script src="{{ url_for('static',filename='base/js/jquery.singlePageNav.min.js') }}"></script>
  106. <script src="{{ url_for('static',filename='base/js/wow.min.js') }}"></script>
  107. <script src="{{ url_for('static',filename='lazyload/jquery.lazyload.min.js') }}"></script>
  108. <script src="//cdn.bootcss.com/holder/2.9.4/holder.min.js"></script>
  109. <script>
  110.     $(function () {
  111.         new WOW().init();
  112.     })
  113. </script>
  114. <script>
  115.     $(document).ready(function () {
  116.         $("img.lazy").lazyload({
  117.             effect: "fadeIn"
  118.         });
  119.         $("#do_search").click(function () {
  120.             var key = $("#key_movie").val();
  121.             location.href = "{{ url_for('home.search',page=1) }}?key=" + key;
  122.         });
  123.     });
  124. </script>
  125. {% block js %}
  127. {% endblock %}
  128. </body>
  129. </html>

2. 完成登录页面

2.1 定义登录视图函数login

在home目录下创建forms.py文件，用来定义登录的表单LoginForm

可以通过调用LoginForm表单类直接在前端页面上渲染生成登录需要的字段标签

  1. from flask_wtf import FlaskForm
  2. from wtforms.fields import StringField, PasswordField, SubmitField, FileField, TextAreaField
  3. from wtforms.validators import DataRequired, EqualTo, Email, Regexp, ValidationError
  5. from app.models import User
  7. class LoginForm(FlaskForm):
  8.     name = StringField(
  9.         label="账号",
  10.         validators=[
  11.             DataRequired("请输入帐号！")
  12.         ],
  13.         description="账号",
  14.         render_kw={
  15.             "class": "form-control input-lg",
  16.             "placeholder": "请输入帐号！"
  17.         }
  18.     )
  19.     pwd = PasswordField(
  20.         label="密码",
  21.         validators=[
  22.             DataRequired("请输入密码！")
  23.         ],
  24.         description="密码",
  25.         render_kw={
  26.             "class": "form-control input-lg",
  27.             "placeholder": "请输入密码！",
  28.         }
  29.     )
  30.     submit = SubmitField(
  31.         "登录",
  32.         render_kw={
  33.             "class": "btn btn-lg btn-primary btn-block"
  34.         }
  35.     )
  37.     def validate_name(self, field):
  38.         name = field.data
  39.         user = User.query.filter_by(name=name).count()
  40.         if user == 0:
  41.             raise ValidationError("会员账号不存在！")
  43.     def validata_pwd(self, field):
  44.         from app.models import User
  45.         pwd = field.data
  46.         name = self.name.data
  47.         user = User.query.filter_by(name=name).count()
  48.         if not user.check_pwd(pwd):
  49.             raise ValidationError("密码错误！")

2.2 定义登录视图函数login

  1. @home.route("/login/", methods=['GET', 'POST'])
  2. def login():
  3.     form = LoginForm()
  4.     if form.validate_on_submit():     # 如果用户输入的用户名和密码符合验证条件
  5.         data = form.data              # 获取用户输入的表单数据
  6.         user = User.query.filter_by(name=data.get("name")).first()      # 根据用户名查询数据库，返回第一个查询结果
  7.         if user == None:              # 如果从数据库中查不到用户名
  8.             flash("会员账号不存在,请重新输入！", "err")
  9.             return redirect(url_for("home.login"))
  10.         elif not user.check_pwd(data.get("pwd")):         # 如果从数据库查询到用户名但密码不匹配
  11.             flash("用户名或密码错误！", "err")
  12.             return redirect(url_for("home.login"))
  13.         session['user'] = user.name             # 定义session信息
  14.         session['user_id'] = user.id
  15.         userlog = Userlog(                     # 定义用户登录日志
  16.             user_id=user.id,
  17.             ip=request.remote_addr
  18.         )
  19.         db.session.add(userlog)                 # 添加用户登录日志
  20.         db.session.commit()
  21.         return redirect(url_for("home.user"))
  22.     return render_template("home/login.html", form=form)

2.3 在home目录下创建登录前端页面login.html，继承home.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.                     <!--消息闪现-->
  12.                     {% for msg in get_flashed_messages(category_filter=["err"]) %}
  13.                         <p style="color:red">{{ msg }}</p>
  14.                     {% endfor %}
  16.                     {% for msg in get_flashed_messages(category_filter=["ok"]) %}
  17.                         <p style="color:green">{{ msg }}</p>
  18.                     {% endfor %}
  20.                     <form role="form" method="post">
  21.                         <fieldset>
  22.                             <div class="form-group">
  23.                                 <label for="input_contact"><span
  24.                                         class="glyphicon glyphicon-user"></span>&nbsp;{{ form.name.label }}</label>
  25.                                 {{ form.name }}
  26.                             </div>
  27.                             <!--错误提示-->
  28.                             {% for err in form.name.errors %}
  29.                                 <div class="col-md-12">
  30.                                     <font style="color:red">{{ err }}</font>
  31.                                 </div>
  32.                             {% endfor %}
  33.                             <div class="form-group">
  34.                                 <label for="input_password"><span
  35.                                         class="glyphicon glyphicon-lock"></span>&nbsp;{{ form.pwd.label }}</label>
  36.                                 {{ form.pwd }}
  37.                             </div>
  38.                             <!--错误提示-->
  39.                             {% for err in form.pwd.errors %}
  40.                                 <div class="col-md-12">
  41.                                     <font style="color:red">{{ err }}</font>
  42.                                 </div>
  43.                             {% endfor %}
  44.                             {{ form.csrf_token }}
  45.                             {{ form.submit }}
  46.                         </fieldset>
  47.                     </form>
  48.                 </div>
  49.             </div>
  50.         </div>
  51.     </div>
  52. {% endblock %}

3. 完成退出页面

3.1 定义退出视图函数logout

  1. @home.route("/logout/")
  2. def logout():
  3.     session.pop("user", None)            # 从session中删除用户名
  4.     session.pop("user_id", None)         # 从session中删除用户id
  5.     return redirect(url_for("home.login"))

3.2 在home目录下创建登录前端页面logout.html，继承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.     <style>
  15.         .navbar-brand > img {
  16.             display: inline;
  17.         }
  19.         .media {
  20.             padding: 3px;
  21.             border: 1px solid #ccc
  22.         }
  24.     </style>
  25.     {% block css %}{% endblock %}
  26. </head>
  28. <body>
  29. <!--导航-->
  30. <nav class="navbar navbar-default navbar-fixed-top">
  31.     <div class="container">
  32.         <!--小屏幕导航按钮和logo-->
  33.         <div class="navbar-header">
  34.             <button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
  35.                 <span class="icon-bar"></span>
  36.                 <span class="icon-bar"></span>
  37.                 <span class="icon-bar"></span>
  38.             </button>
  39.             <a href="{{ url_for('home.index',page=1) }}" class="navbar-brand" style="width:250px;">
  40.                 <img src="{{ url_for('static',filename='base/images/logo.png') }}" style="height:30px;">&nbsp;微电影
  41.             </a>
  42.         </div>
  43.         <!--小屏幕导航按钮和logo-->
  44.         <!--导航-->
  45.         <div class="navbar-collapse collapse">
  46.             <form class="navbar-form navbar-left" role="search" style="margin-top:18px;">
  47.                 <div class="form-group input-group">
  48.                     <input type="text" class="form-control" placeholder="请输入电影名！" id="key_movie">
  49.                     <span class="input-group-btn">
  50.                         <a class="btn btn-default" id="do_search"><span class="glyphicon glyphicon-search"></span>&nbsp;搜索</a>
  51.                     </span>
  52.                 </div>
  53.             </form>
  54.             <ul class="nav navbar-nav navbar-right">
  55.                 <li>
  56.                     <a class="curlink" href="{{ url_for('home.index',page=1) }}"><span
  57.                             class="glyphicon glyphicon-film"></span>&nbsp;电影</a>
  58.                 </li>
  59.                 <li>
  60.                     <a class="curlink" href="{{ url_for('home.login') }}"><span
  61.                             class="glyphicon glyphicon-log-in"></span>&nbsp;登录</a>
  62.                 </li>
  63.                 <li>
  64.                     <a class="curlink" href="{{ url_for('home.regist') }}"><span
  65.                             class="glyphicon glyphicon-plus"></span>&nbsp;注册</a>
  66.                 </li>
  67.                 <li>
  68.                     <a class="curlink" href="{{ url_for('home.logout') }}"><span
  69.                             class="glyphicon glyphicon-log-out"></span>&nbsp;退出</a>
  70.                 </li>
  71.                 <li>
  72.                     <a class="curlink" href="{{ url_for('home.user') }}"><span class="glyphicon glyphicon-user"></span>&nbsp;会员</a>
  73.                 </li>
  74.             </ul>
  75.         </div>
  76.         <!--导航-->
  78.     </div>
  79. </nav>
  80. <!--导航-->
  81. <!--内容-->
  83. {% block content %}
  84. {% endblock %}
  86. <!--内容-->
  87. <!--底部-->
  88. <footer>
  89.     <div class="container">
  90.         <div class="row">
  91.             <div class="col-md-12">
  92.                 <p>
  93.                     ©&nbsp;2017&nbsp;flaskmovie.com&nbsp;京ICP备 123456789号
  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.         $("#do_search").click(function () {
  118.             var key = $("#key_movie").val();
  119.             location.href = "{{ url_for('home.search',page=1) }}?key=" + key;
  120.         });
  121.     });
  123. </script>
  125. {% block js %}{% endblock %}
  127. </body>
  128. </html>

4. 完成注册页面

4.1 在home目录下的forms.py文件中，定义注册用的表单类RegistForm

可以通过调用RegistForm类直接在前端页面渲染生成注册使用的字段标签

  1. from flask_wtf import FlaskForm
  2. from wtforms.fields import StringField, PasswordField, SubmitField, FileField, TextAreaField
  3. from wtforms.validators import DataRequired, EqualTo, Email, Regexp, ValidationError
  5. from app.models import User
  7. class RegistForm(FlaskForm):
  8.     name = StringField(
  9.         label="呢称",
  10.         validators=[
  11.             DataRequired("请输入呢称！")
  12.         ],
  13.         description="呢称",
  14.         render_kw={
  15.             "class": "form-control input-lg",
  16.             "placeholder": "请输入呢称！",
  17.         }
  18.     )
  19.     email = StringField(
  20.         label="邮箱",
  21.         validators=[
  22.             DataRequired("请输入邮箱！"),
  23.             Email("邮箱格式不正确！"),
  24.         ],
  25.         description="邮箱",
  26.         render_kw={
  27.             "class": "form-control input-lg",
  28.             "placeholder": "请输入邮箱！"
  29.         }
  30.     )
  31.     phone = StringField(
  32.         label="手机号",
  33.         validators=[
  34.             DataRequired("请输入手机号！"),
  35.             Regexp("1[34578]\\d{9}", message="输入的手机号格式不正确！"),
  36.         ],
  37.         description="手机号",
  38.         render_kw={
  39.             "class": "form-control input-lg",
  40.             "placeholder": "请输入手机号！"
  41.         }
  42.     )
  43.     pwd = PasswordField(
  44.         label="密码",
  45.         validators=[
  46.             DataRequired("请输入密码！")
  47.         ],
  48.         description="密码",
  49.         render_kw={
  50.             "class": "form-control input-lg",
  51.             "placeholder": "请输入密码！"
  52.         }
  53.     )
  54.     repwd = PasswordField(
  55.         label="确认密码",
  56.         validators=[
  57.             DataRequired("请输入确认密码！"),
  58.             EqualTo("pwd", message="两次密码不一致！")
  59.         ],
  60.         description="确认密码",
  61.         render_kw={
  62.             "class": "form-control input-lg",
  63.             "placeholder": "请输入确认密码！"
  64.         }
  65.     )
  66.     submit = SubmitField(
  67.         "注册",
  68.         render_kw={
  69.             "class": "btn btn-lg btn-success btn-block"
  70.         }
  71.     )
  73.     def validate_name(self, field):
  74.         name = field.data
  75.         user = User.query.filter_by(name=name).count()
  76.         if user == 1:
  77.             raise ValidationError("呢称已经存在，请重新输入！")
  79.     def validate_email(self, field):
  80.         email = field.data
  81.         user = User.query.filter_by(email=email).count()
  82.         if user == 1:
  83.             raise ValidationError("邮箱已经存在，请重新输入！")
  85.     def validate_phone(self, field):
  86.         phone = field.data
  87.         user = User.query.filter_by(phone=phone).count()
  88.         if user == 1:
  89.             raise ValidationError("手机号已经存在，请重新输入！")

4.2 定义注册视图函数register

  1. @home.route("/register/", methods=["GET", "POST"])
  2. def register():
  3.     form = RegistForm()                    # 获取用户输入的注册信息数据
  4.     if form.validate_on_submit():          # 如果用户输入的注册数据通过form基础验证
  5.         data = form.data                   # 获取用户输入的表单数据
  6.         user = User(
  7.             name=data.get("name"),        # 从表单中获取用户输入的用户名
  8.             email=data.get("email"),      # 从表单中获取用户输入的邮箱地址
  9.             phone=data.get("phone"),      # 从表单中获取用户输入的手机号
  10.             pwd=generate_password_hash(data.get("pwd")),  # 从表单中获取用户输入的密码并进行加密
  11.             uuid=uuid.uuid4().hex         # 生成uuid,保证唯一性
  12.         )
  13.         db.session.add(user)             # 添加用户
  14.         db.session.commit()              # 向数据库提交用户注册信息
  15.         flash("注册成功！", "ok")
  16.         return redirect(url_for("home.login"))
  17.     return render_template("home/register.html", form=form)

4.3 在home目录下创建登录前端页面register.html，继承home.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.                     <!--消息闪现-->
  12.                     {% for msg in get_flashed_messages(category_filter=["err"]) %}
  13.                         <p style="color:red">{{ msg }}</p>
  14.                     {% endfor %}
  16.                     {% for msg in get_flashed_messages(category_filter=["ok"]) %}
  17.                         <p style="color:green">{{ msg }}</p>
  18.                     {% endfor %}
  19.                     <form role="form" method="post">
  20.                         <fieldset>
  21.                             <div class="form-group">
  22.                                 <label for="input_name"><span
  23.                                         class="glyphicon glyphicon-user"></span>&nbsp;{{ form.name.label }}</label>
  24.                                 {{ form.name }}
  25.                             </div>
  26.                             <!--错误提示-->
  27.                             {% for err in form.name.errors %}
  28.                                 <div class="col-md-12">
  29.                                     <font style="color:red">{{ err }}</font>
  30.                                 </div>
  31.                             {% endfor %}
  32.                             <div class="form-group">
  33.                                 <label for="input_email"><span
  34.                                         class="glyphicon glyphicon-envelope"></span>&nbsp;{{ form.email.label }}</label>
  35.                                 {{ form.email }}
  36.                             </div>
  37.                             <!--错误提示-->
  38.                             {% for err in form.email.errors %}
  39.                                 <div class="col-md-12">
  40.                                     <font style="color:red">{{ err }}</font>
  41.                                 </div>
  42.                             {% endfor %}
  43.                             <div class="form-group">
  44.                                 <label for="input_phone"><span
  45.                                         class="glyphicon glyphicon-phone"></span>&nbsp;{{ form.phone.label }}</label>
  46.                                 {{ form.phone }}
  47.                             </div>
  48.                             <!--错误提示-->
  49.                             {% for err in form.phone.errors %}
  50.                                 <div class="col-md-12">
  51.                                     <font style="color:red">{{ err }}</font>
  52.                                 </div>
  53.                             {% endfor %}
  54.                             <div class="form-group">
  55.                                 <label for="input_password"><span
  56.                                         class="glyphicon glyphicon-lock"></span>&nbsp;{{ form.pwd.label }}</label>
  57.                                 {{ form.pwd }}
  58.                             </div>
  59.                             <!--错误提示-->
  60.                             {% for err in form.pwd.errors %}
  61.                                 <div class="col-md-12">
  62.                                     <font style="color:red">{{ err }}</font>
  63.                                 </div>
  64.                             {% endfor %}
  65.                             <div class="form-group">
  66.                                 <label for="input_repassword"><span
  67.                                         class="glyphicon glyphicon-lock"></span>&nbsp;{{ form.repwd.label }}</label>
  68.                                 {{ form.repwd }}
  69.                             </div>
  70.                             <!--错误提示-->
  71.                             {% for err in form.repwd.errors %}
  72.                                 <div class="col-md-12">
  73.                                     <font style="color:red">{{ err }}</font>
  74.                                 </div>
  75.                             {% endfor %}
  76.                             {{ form.submit }}
  77.                             {{ form.csrf_token }}
  78.                         </fieldset>
  79.                     </form>
  80.                 </div>
  81.             </div>
  82.         </div>
  83.     </div>
  84. {% endblock %}

5. 完成index页面

5.1 定义主页视图函数index

  1. @home.route("/<int:page>/", methods=['GET'])
  2. def index(page=None):
  3.     tags = Tag.query.all()              # 获取数据库中所有的电影标签
  4.     page_data = Movie.query             # 从数据库中获取所有的电影信息
  6.     tid = request.args.get("tid", 0)    # 获取用户请求的电影标签id
  7.     if int(tid) != 0:
  8.         page_data = page_data.filter_by(tag_id=int(tid))    # 根据用户请求的页码进行过滤
  10.     star = request.args.get("star", 0)    # 获取用户请求的电影星级id
  11.     if int(star) != 0:
  12.         page_data = page_data.filter(star=int(star))    # 根据用户请求的电影星级id进行过滤
  14.     time = request.args.get("time", 0)    # 获取用户请求的电影添加时间
  15.     if int(time) != 0:
  16.         page_data = page_data.order_by(Movie.addtime)    # 获取用户请求的电影添加时间进行过滤
  18.     pm = request.args.get("pm", 0)    # 获取用户请求的电影播放次数
  19.     if int(pm) != 0:
  20.         page_data = page_data.order_by(Movie.playnum)    # 获取用户请求的电影播放次数进行过滤
  22.     cm = request.args.get("cm", 0)    # 获取用户请求的电影评论次数
  23.     if int(cm) != 0:
  24.         page_data = page_data.order_by(Movie.commentnum)    # 获取用户请求的电影评论次数进行过滤
  26.     if page is None:    # 获取用户请求的页数
  27.         page = 1
  28.     page_data = page_data.paginate(page=page, per_page=10)    # 进行分页，每页显示10条电影数据
  30.     p = dict(
  31.         tid=tid,
  32.         star=star,
  33.         time=time,
  34.         pm=pm,
  35.         cm=cm
  36.     )    # 定义返回给前端页面的字典信息
  37.     return render_template("home/index.html", tags=tags, p=p, page_data=page_data)

5.2 在templates目录下创建ui目录，在ui目录下创建home_page.html，定义分页显示组件

  1. {% macro page(data,url) -%}
  3.     {% if data %}
  4.         <nav aria-label="Page navigation">
  5.             <ul class="pagination">
  6.                 <li><a href="{{ url_for(url,page=1) }}">首页</a></li>
  7.                 {% if data.has_prev %}
  8.                     <li><a href="{{ url_for(url,page=data.prev_num) }}">上一页</a></li>
  9.                 {% else %}
  10.                     <li class="disabled"><a href="#">上一页</li>
  11.                 {% endif %}
  13.                 {% for v in data.iter_pages() %}
  14.                     {% if v == data.page %}
  15.                         <li class="active"><a href="#">{{ v }}</a></li>
  16.                     {% else %}
  17.                         <li><a href="{{ url_for(url,page=v) }}">{{ v }}</a></li>
  18.                     {% endif %}
  19.                 {% endfor %}
  21.                 {% if data.has_next %}
  22.                     <li><a href="{{ url_for(url,page=data.next_num) }}">下一页</a></li>
  23.                 {% else %}
  24.                     <li class="disabled"><a href="#">下一页</a></li>
  25.                 {% endif %}
  27.                 <li><a href="{{ url_for(url,page=data.pages) }}">尾页</a></li>
  28.             </ul>
  29.         </nav>
  30.     {% endif %}
  31. {%- endmacro %}

5.3 在home目录下创建登录前端页面index.html，继承home.html页面

  1. {% extends "home/layout.html" %}
  2. {% import "ui/home_page.html" as pg %}
  4. {% block content %}
  5.     <!--热门电影-->
  6.     <section id="hotmovie" style="margin-top:76px">
  7.         <div class="container">
  8.             <div class="row wow fadeInRight" data-wow-delay="0.6s">
  9.                 <div class="row">
  10.                     <iframe class="wow fadeIn" width="100%" height="375px" frameborder=0 scrolling=no
  11.                             src="{{ url_for('home.animation') }}"></iframe>
  12.                 </div>
  13.             </div>
  14.         </div>
  15.     </section>
  16.     <!--热门电影-->
  17.     <!--电影列表-->
  18.     <section id="movielist">
  19.         <div class="container">
  20.             <div class="row wow fadeIn" data-wow-delay="0.6s">
  21.                 <div class="col-md-12 table-responsive">
  22.                     <table class="table text-left table-bordered" id="movietags">
  23.                         <tr>
  24.                             <td style="width:10%;">电影标签</td>
  25.                             <td style="width:90%;">
  26.                                 {% for v in tags %}
  27.                                     <a href="{{ url_for('home.index',page=1) }}?tid={{ v.id }}&star={{ p['star'] }}&time={{ p['time'] }}&pm={{ p['pm'] }}&cm={{ p['cm'] }}"
  28.                                        class="label label-info"><span
  29.                                             class="glyphicon glyphicon-tag"></span>&nbsp;{{ v.name }}</a>
  30.                                 {% endfor %}
  31.                         </tr>
  32.                         <tr>
  33.                             <td>电影星级</td>
  34.                             <td>
  35.                                 {% for v in range(1,6) %}
  36.                                     <a href="{{ url_for('home.index',page=1) }}?tid={{ p['tid'] }}&star={{ v }}&time={{ p['time'] }}&pm={{ p['pm'] }}&cm={{ p['cm'] }}"
  37.                                        class="label label-warning"><span
  38.                                             class="glyphicon glyphicon-star"></span>&nbsp;{{ v }}星</a>
  39.                                 {% endfor %}
  40.                             </td>
  41.                         </tr>
  42.                         <tr>
  43.                             <td>上映时间</td>
  44.                             <td>
  45.                                 <a href="{{ url_for('home.index',page=1) }}?tid={{ p['tid'] }}&star={{ p['star'] }}&time=1&pm={{ p['pm'] }}&cm={{ p['cm'] }}"
  46.                                    class="label label-default"><span
  47.                                         class="glyphicon glyphicon-time"></span>&nbsp;最近</span></a>
  48.                                 &nbsp;&nbsp;
  49.                                 <a href="{{ url_for('home.index',page=1) }}?tid={{ p['tid'] }}&star={{ p['star'] }}&time=2&pm={{ p['pm'] }}&cm={{ p['cm'] }}"
  50.                                    class="label label-default"><span
  51.                                         class="glyphicon glyphicon-time"></span>&nbsp;更早</span></a>
  52.                             </td>
  53.                         </tr>
  54.                         <tr>
  55.                             <td>播放数量</td>
  56.                             <td>
  57.                                 <a href="{{ url_for('home.index',page=1) }}?tid={{ p['tid'] }}&star={{ p['star'] }}&time={{ p['time'] }}&pm=1&cm={{ p['cm'] }}"
  58.                                    class="label label-success"><span class="glyphicon glyphicon-arrow-down"></span>&nbsp;从高到底</span>
  59.                                 </a>
  60.                                 &nbsp;
  61.                                 <a href="{{ url_for('home.index',page=1) }}?tid={{ p['tid'] }}&star={{ p['star'] }}&time={{ p['time'] }}&pm=2&cm={{ p['cm'] }}"
  62.                                    class="label label-danger"><span class="glyphicon glyphicon-arrow-up"></span>&nbsp;从低到高</span>
  63.                                 </a>
  64.                             </td>
  65.                         </tr>
  66.                         <tr>
  67.                             <td>评论数量</td>
  68.                             <td>
  69.                                 <a href="{{ url_for('home.index',page=1) }}?tid={{ p['tid'] }}&star={{ p['star'] }}&time={{ p['time'] }}&pm={{ p['pm'] }}&cm=1"
  70.                                    class="label label-success"><span class="glyphicon glyphicon-arrow-down"></span>&nbsp;从高到底</span>
  71.                                 </a>
  72.                                 &nbsp;
  73.                                 <a href="{{ url_for('home.index',page=1) }}?tid={{ p['tid'] }}&star={{ p['star'] }}&time={{ p['time'] }}&pm={{ p['pm'] }}&cm=2"
  74.                                    class="label label-danger"><span class="glyphicon glyphicon-arrow-up"></span>&nbsp;从低到高</span>
  75.                                 </a>
  76.                             </td>
  77.                         </tr>
  78.                     </table>
  79.                 </div>
  81.                 {% for v in page_data.items %}
  82.                     <div class="col-md-3">
  83.                         <div class="movielist text-center">
  85.                             <img src="{{ url_for('static',filename='uploads/'+v.logo) }}"
  86.                                  class="img-responsive center-block" alt="">
  87.                             <div class="text-left" style="margin-left:auto;margin-right:auto;width:210px;">
  88.                                 <span style="color:#999;font-style: italic;">{{ v.title }}</span><br>
  89.                                 <div>
  90.                                     {% for val in range(1,v.star+1) %}
  91.                                         <span class="glyphicon glyphicon-star" style="color:#FFD119"></span>
  92.                                     {% endfor %}
  93.                                     {% for val in range(1,6-v.star) %}
  94.                                         <span class="glyphicon glyphicon-star-empty" style="color:#FFD119"></span>
  95.                                     {% endfor %}
  96.                                 </div>
  97.                             </div>
  98.                             <a href="{{ url_for('home.play',id=v.id,page=1) }}" class="btn btn-primary" target="_blank"
  99.                                role="button"><span
  100.                                     class="glyphicon glyphicon-play"></span>&nbsp;播放</a>
  101.                         </div>
  102.                     </div>
  103.                 {% endfor %}
  105.                 <div class="col-md-12">
  106.                     {{ pg.page(page_data,'home.index') }}
  107.                 </div>
  108.             </div>
  109.         </div>
  110.     </section>
  111.     <!--电影列表-->
  112. {% endblock %}

至此，电影网站的首页面开发完成了

Flask开发微电影网站(三)的更多相关文章

  1. Flask开发微电影网站(一)

    1.用到的Flask知识 1.使用整形,浮点型,路径型,字符串型下正则表达式路由转化器 2.使用GET与POST请求,上传文件,cookie获取与响应,404处理 3.使用模板自动转义,定义过滤器,定 ...

  2. Flask开发微电影网站(五)

    后台管理页面是系统管理员登录后对网站进行管理的前端页面 后台登录页面,如下图所示 管理员登录后的页面,如下图所示 管理员登录后,在右上角显示的管理员信息,如下图所示 管理员登录后,在页面中间部分的左侧 ...

  3. Flask开发微电影网站(七)

    1.后台管理之电影管理 1.1 定义电影表单 在app的admin目录的forms.py文件中,定义电影表单 # 电影表单 class MovieForm(FlaskForm): title = St ...

  4. Flask开发微电影网站(六)

    1. 后台管理登录功能实现 1.1 后台管理页面登录表单LoginForm 在app的admin目录下创建forms.py文件,用来保存admin蓝图中需要使用到的表单 from flask_wtf ...

  5. Flask开发微电影网站(二)

    1.安装数据库连接依赖包 pip install flask-sqlalchemy 2.创建movie数据库 在CentOS虚拟机,进入MaridDB数据库提示符,创建movie数据库 create ...

  6. Flask开发微电影网站(十)

    1.后台管理之角色管理 1.1 角色管理之定义角色表单 在app的admin目录的forms.py文件中,定义角色表单 # 角色表单 class RoleForm(FlaskForm): name = ...

  7. Flask开发微电影网站(九)

    1.后台管理之电影管理 1.1 电影管理之所有电影收藏列表 1.1.1 电影管理之电影收藏列表视图函数 在admin目录下的views.py文件中定义电影收藏列表视图函数 电影收藏列表视图函数需要被登 ...

  8. Flask开发微电影网站(八)

    1.后台管理之电影预告管理 1.1 定义电影预告表单 在app的admin目录的forms.py文件中,定义电影预告表单 # 预告表单 class PreviewForm(FlaskForm): ti ...

  9. Flask开发微电影网站(四)

    会员中心页面,如下图所示 用户登录后,修改密码页面,如下图所示 用户查看自己的评论页面,如下图所示 用户查看自己的登录日志页面,如下图所示 用户查看自己收藏的电影的页面,如下图所示 1. 定义用户主页 ...

随机推荐

  1. Mac OS X下各种文件编码的转换方法

    何曾几时本猫还在windows下编码的时候,那时ruby的源代码的编码格式都是gbk啊!导致N多中文显示为乱码.后来无奈写了个转换代码从gbk编码转为utf-8格式的小工具: #!/usr/bin/r ...

  2. WebDriver元素等待机制

    能否构建健壮和可靠的测试是UI自动化测试能否成功的关键因素之一.但实际情况是当一个测试接着一个测试执行的时候,常会遇到各种不同的状况.比如脚本去定位元素或去验证程序的运行状态时,有时会发现找不到元素, ...

  3. vue2.0-基于elementui换肤[自定义主题]

    0. 直接上 预览链接 vue2.0-基于elementui换肤[自定义主题] 1. 项目增加主题组件 在项目的src/components下添加skin文件夹 skin文件获取地址 2. 项目增加自 ...

  4. WebStorm常用快捷键总结

    在使用WebStorm的过程中,常用快捷键整理: 1.  必备快捷键 Ctrl+/:注释当前行 Ctrl+Shift+/:当前位置插入注释 Ctrl+Alt+/:块注释,并Focus到首行,写注释说明 ...

  5. Tihinkphp3.2整合最新版阿里大鱼进行短信验证码发送

    阿里大鱼最新下载地址:阿里大鱼SDK下载 或者从官网进行下载:阿里大鱼SDK官网下载 下载完成后,将压缩包内的api_sdk文件夹放到ThinkPHP\Library\Vendor目录下,修改文件名为 ...

  6. OOP的基本原则

    OOP的基本原则 点击打开链接

  7. java并发容器(Map、List、BlockingQueue)

    转发: 大海巨浪 Java库本身就有多种线程安全的容器和同步工具,其中同步容器包括两部分:一个是Vector和Hashtable.另外还有JDK1.2中加入的同步包装类,这些类都是由Collectio ...

  8. OAuth 2.0中文译本

    (一)背景知识 OAuth 2.0很可能是下一代的“用户验证和授权”标准,目前在国内还没有很靠谱的技术资料.为了弘扬“开放精神”,让业内的人更容易理解“开放平台”相关技术,进而长远地促进国内开放平台领 ...

  9. Mina框架(实战详解)

    Apache Mina Server 是一个网络通信应用框架,为开发高性能和高可用性的网络应用程序提供了非常便利的框架. 特点:异步的NIO框架,将UDP当成"面向连接"的协议 一 ...

  10. java运行机制、Jdk版本及Java环境变量

    一.语言特性 计算机高级语言按程序的执行方式可分为:编译型和解释型两种.编译型的语言是指使用专门的编译器,针对特定的平台(操作系统)一次性翻译成被该平台硬件执行的机器码,并包装成该平台可执行性程序文件 ...