时间：2023-07-30 13:21:02 | 来源：网站运营
时间：2023-07-30 13:21:02 来源：网站运营
Python Flask构建微电影网站（五）--搭建前台页面：一、前台布局搭建
在线咨询
<!-- in home.html --><!doctype html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1 , user-scalable=no"> <title>微电影</title> <link rel="shortcut icon" href="../static/base/images/logo.png"> <link rel="stylesheet" href="../static/base/css/bootstrap.min.css"> <link rel="stylesheet" href="../static/base/css/bootstrap-movie.css"> <link rel="stylesheet" href="../static/base/css/animate.css"> <style> .navbar-brand>img { display: inline; } </style> <style> .media{ padding:3px; border:1px solid #ccc } </style></head><body><!--导航--><nav class="navbar navbar-default navbar-fixed-top"> <div class="container"> <!--小屏幕导航按钮和logo--> <div class="navbar-header"> <button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a href="index.html" class="navbar-brand" style="width:250px;"> <img src="../static/base/images/logo.png" style="height:30px;"> 微电影 </a> </div> <!--小屏幕导航按钮和logo--> <!--导航--> <div class="navbar-collapse collapse"> <form class="navbar-form navbar-left" role="search" style="margin-top:18px;"> <div class="form-group input-group"> <input type="text" class="form-control" placeholder="请输入电影名！"> <span class="input-group-btn"> <a class="btn btn-default" href="search.html"><span class="glyphicon glyphicon-search"></span> 搜索</a> </span> </div> </form> <ul class="nav navbar-nav navbar-right"> <li> <a class="curlink" href="index.html"><span class="glyphicon glyphicon-film"></span> 电影</a> </li> <li> <a class="curlink" href="login.html"><span class="glyphicon glyphicon-log-in"></span> 登录</a> </li> <li> <a class="curlink" href="register.html"><span class="glyphicon glyphicon-plus"></span> 注册</a> </li> <li> <a class="curlink" href="logout.html"><span class="glyphicon glyphicon-log-out"></span> 退出</a> </li> <li> <a class="curlink" href="user.html"><span class="glyphicon glyphicon-user"></span> 会员</a> </li> </ul> </div> <!--导航--> </div></nav><!--导航--><!--内容--><div class="container" style="margin-top:76px"></div><!--内容--><!--底部--><footer> <div class="container"> <div class="row"> <div class="col-md-12"> <p> © 2017 flaskmovie.imooc.com 京ICP备 13046642号-2 </p> </div> </div> </div></footer><!--底部--><script src="../static/base/js/jquery.min.js"></script><script src="../static/base/js/bootstrap.min.js"></script><script src="../static/base/js/jquery.singlePageNav.min.js"></script><script src="../static/base/js/wow.min.js"></script><script src="../static/lazyload/jquery.lazyload.min.js"></script><script src="//cdn.bootcss.com/holder/2.9.4/holder.min.js"></script><script> $(function() {new WOW().init(); })</script><script> $(document).ready(function() { $("img.lazy").lazyload({ effect: "fadeIn" }); });</script></body></html># home.html的展示如下，即页面header和footer{% extends 'home/home.html' %}{% block content %}<h1>hello world</h1>{% endblock %}二、会员登陆页面搭建from . import homefrom flask import render_template,redirect,url_for#首页视图@home.route("/")def index():return render_template('home/index.html')# 用户登陆视图，返回login.html页面@home.route('/login/')def login():return render_template('home/login.html')# 用户登出页面，直接返回到home模块下的login视图@home.route('/logout/')def logout():return redirect(url_for('home.login'))2.2编写前台页面：{% extends 'home/home.html' %}{% block content %} <div class="row"> <div class="col-md-4 col-md-offset-4"> <div class="panel panel-primary"> <div class="panel-heading"> <h3 class="panel-title"><span class="glyphicon glyphicon-log-in"></span> 会员登录</h3> </div> <div class="panel-body"> <form role="form"> <fieldset> <div class="form-group"> <label for="input_contact"><span class="glyphicon glyphicon-user"></span> 账号</label> <input id="input_contact" class="form-control input-lg" placeholder="用户名/邮箱/手机号码" name="contact" type="text" autofocus> </div> <div class="col-md-12" id="error_contact"></div> <div class="form-group"> <label for="input_password"><span class="glyphicon glyphicon-lock"></span> 密码</label> <input id="input_password" class="form-control input-lg" placeholder="密码" name="password" type="password" value=""> </div> <div class="col-md-12" id="error_password"></div> <a href="user.html" class="btn btn-lg btn-success btn-block">登录</a> </fieldset> </form> </div> </div> </div> </div>{% endblock %}# 此时访问http://127.0.0.1:5000/login/ 前台显示如下<!-- home中登陆和登出的url修改如下，采用{{url_for('模块名.视图函数名')}} 的方法--><ul class="nav navbar-nav navbar-right"> <li> <a class="curlink" href="index.html"><span class="glyphicon glyphicon-film"></span> 电影</a> </li> <li> <a class="curlink" href="{{ url_for('home.login') }}"><span class="glyphicon glyphicon-log-in"></span> 登录</a> </li> <li> <a class="curlink" href="register.html"><span class="glyphicon glyphicon-plus"></span> 注册</a> </li> <li> <a class="curlink" href="{{ url_for('home.logout') }}"><span class="glyphicon glyphicon-log-out"></span> 退出</a> </li> <li> <a class="curlink" href="user.html"><span class="glyphicon glyphicon-user"></span> 会员</a> </li></ul>三、会员注册页面搭建@home.route('/register/')def register():return render_template('home/register.html')3.2 定义前台页面：register.html{% extends 'home/home.html' %}{% block content %} <div class="row"> <div class="col-md-4 col-md-offset-4"> <div class="panel panel-success"> <div class="panel-heading"> <h3 class="panel-title"><span class="glyphicon glyphicon-plus"></span> 会员注册</h3> </div> <div class="panel-body"> <form role="form"> <fieldset> <div class="form-group"> <label for="input_name"><span class="glyphicon glyphicon-user"></span> 昵称</label> <input id="input_name" class="form-control input-lg" placeholder="昵称" name="name" type="text" autofocus> </div> <div class="col-md-12" id="error_name"></div> <div class="form-group"> <label for="input_email"><span class="glyphicon glyphicon-envelope"></span> 邮箱</label> <input id="input_email" class="form-control input-lg" placeholder="邮箱" name="email" type="email" autofocus> </div> <div class="col-md-12" id="error_email"></div> <div class="form-group"> <label for="input_phone"><span class="glyphicon glyphicon-phone"></span> 手机</label> <input id="input_phone" class="form-control input-lg" placeholder="手机" name="phone" type="text" autofocus> </div> <div class="col-md-12" id="error_phone"></div> <div class="form-group"> <label for="input_password"><span class="glyphicon glyphicon-lock"></span> 密码</label> <input id="input_password" class="form-control input-lg" placeholder="密码" name="password" type="password" value=""> </div> <div class="col-md-12" id="error_password"></div> <div class="form-group"> <label for="input_repassword"><span class="glyphicon glyphicon-lock"></span> 确认密码</label> <input id="input_repassword" class="form-control input-lg" placeholder="确认密码" name="repassword" type="password" value=""> </div> <div class="col-md-12" id="error_repassword"></div> <a href="user.html" class="btn btn-lg btn-success btn-block">注册</a> </fieldset> </form> </div> </div> </div> </div>{% endblock %}3.3 修改home.html中跳转url：（home模块下的register视图函数）<a class="curlink" href="{{ url_for('home.register') }}"><span class="glyphicon glyphicon-plus"></span> 注册</a>四、会员中心页面搭建：会员中心的页面比较多，在home下面新建一个user_center文件夹，专门来存放 会员中心的前端页面。<!-- 在navi.html中继承home.html，并且重新定义语句块{% extends 'home/home.html'%}{% block content %}<div class="col-md-3"> <div class="list-group"> <a href="{{ url_for('home.user') }}" class="list-group-item active"> <span class="glyphicon glyphicon-user"></span> 会员中心 </a> <a href="{{ url_for('home.pwd') }}" class="list-group-item"> <span class="glyphicon glyphicon-lock"></span> 修改密码 </a> <a href="{{ url_for('home.comments') }}" class="list-group-item"> <span class="glyphicon glyphicon-comment"></span> 评论记录 </a> <a href="{{ url_for('home.loginlog') }}" class="list-group-item"> <span class="glyphicon glyphicon-calendar"></span> 登录日志 </a> <a href="{{ url_for('home.moviecol') }}" class="list-group-item"> <span class="glyphicon glyphicon-heart"></span> 收藏电影 </a> </div> </div>{% block right %}{% endblock %}{% endblock %}# 其他的模板中只需要继承navi.html页面，并且重新载入{% block right %}<!-- user.html中 -->{% extends 'home/user_center/navi.html' %}{% block right %} <div class="col-md-9"> <div class="panel panel-warning"> <div class="panel-heading"> <h3 class="panel-title"><span class="glyphicon glyphicon-map-marker"></span> 会员中心</h3> </div> <div class="panel-body"> <form role="form"> <fieldset> <div class="form-group"> <label for="input_name"><span class="glyphicon glyphicon-user"></span> 昵称</label> <input id="input_name" class="form-control" placeholder="昵称" name="name" type="text" autofocus value="jinlong"> </div> <div class="col-md-12" id="error_name"></div> <div class="form-group"> <label for="input_email"><span class="glyphicon glyphicon-envelope"></span> 邮箱</label> <input id="input_email" class="form-control" placeholder="邮箱" name="email" type="email" autofocus value="1780316635@qq.com"> </div> <div class="col-md-12" id="error_email"></div> <div class="form-group"> <label for="input_phone"><span class="glyphicon glyphicon-phone"></span> 手机</label> <input id="input_phone" class="form-control" placeholder="手机" name="phone" type="text" autofocus value="13700632835"> </div> <div class="col-md-12" id="error_phone"></div> <div class="form-group"> <label for="input_face"><span class="glyphicon glyphicon-picture"></span> 头像</label> <img src="holder.js/100x100" class="img-responsive img-rounded"> <a class="btn btn-primary" style="margin-top:6px;"><span class="glyphicon glyphicon-open"></span> 上传头像</a> <input id="input_face" class="form-control" name="face" type="hidden" autofocus> </div> <div class="col-md-12" id="error_face"></div> <div class="form-group"> <label for="input_info"><span class="glyphicon glyphicon-edit"></span> 简介</label> <textarea class="form-control" rows="10" id="input_info">十年窗下无人问，一举成名天下知</textarea> </div> <div class="col-md-12" id="error_info"></div> <a href="user.html" class="btn btn-success"><span class="glyphicon glyphicon-saved"></span> 保存修改</a> </fieldset> </form> </div> </div> </div>{% endblock %}<!-- navi.html ，不继承任何模板，然后其他页面只需要include 该语句块就可以 --><div class="col-md-3"> <div class="list-group"> <a href="{{ url_for('home.user') }}" class="list-group-item active"> <span class="glyphicon glyphicon-user"></span> 会员中心 </a> <a href="{{ url_for('home.pwd') }}" class="list-group-item"> <span class="glyphicon glyphicon-lock"></span> 修改密码 </a> <a href="{{ url_for('home.comments') }}" class="list-group-item"> <span class="glyphicon glyphicon-comment"></span> 评论记录 </a> <a href="{{ url_for('home.loginlog') }}" class="list-group-item"> <span class="glyphicon glyphicon-calendar"></span> 登录日志 </a> <a href="{{ url_for('home.moviecol') }}" class="list-group-item"> <span class="glyphicon glyphicon-heart"></span> 收藏电影 </a> </div> </div># 举例：in pwd.html页面中：{% extends 'home/home.html' %}{% block content %}<!-- 将navi.html包含进来，这里为了与法一区别改名为menu.html--> {% include 'home/user_center/menu.html' %} <div class="col-md-9"> <div class="panel panel-warning"> <div class="panel-heading"> <h3 class="panel-title"><span class="glyphicon glyphicon-map-marker"></span> 会员中心</h3> </div> <div class="panel-body"> <form role="form"> <fieldset> <div class="form-group"> <label for="input_oldpwd"><span class="glyphicon glyphicon-lock"></span> 旧密码</label> <input id="input_oldpwd" class="form-control" placeholder="旧密码" name="oldpwd" type="password" autofocus> </div> <div class="col-md-12" id="error_oldpwd"></div> <div class="form-group"> <label for="input_newpwd"><span class="glyphicon glyphicon-lock"></span> 新密码</label> <input id="input_newpwd" class="form-control" placeholder="新密码" name="newpwd" type="password" autofocus> </div> <div class="col-md-12" id="error_newpwd"></div> <a href="login.html" class="btn btn-success"><span class="glyphicon glyphicon-edit"></span> 修改密码</a> </fieldset> </form> </div> </div> </div>{% endblock %}4.3 关于“激活样式”的控制：导航条“高亮”激活的样式<!-- in navi.html中，给每个跳转连接增加id -->{% block content %}<div class="col-md-3"> <div class="list-group"> <a id="m-1" href="{{ url_for('home.user') }}" class="list-group-item "> <span class="glyphicon glyphicon-user"></span> 会员中心 </a> <a id="m-2" href="{{ url_for('home.pwd') }}" class="list-group-item"> <span class="glyphicon glyphicon-lock"></span> 修改密码 </a> <a id="m-3" href="{{ url_for('home.comments') }}" class="list-group-item"> <span class="glyphicon glyphicon-comment"></span> 评论记录 </a> <a id="m-4" href="{{ url_for('home.loginlog') }}" class="list-group-item"> <span class="glyphicon glyphicon-calendar"></span> 登录日志 </a> <a id="m-5" href="{{ url_for('home.moviecol') }}" class="list-group-item"> <span class="glyphicon glyphicon-heart"></span> 收藏电影 </a> </div> </div>{% block right %}{% endblock %}{% endblock %}# 然后在页面中用jquery的方法去调用样式。如user.html中：{% block js %} <script> $(document).ready(function() { $("#m-1").addClass("active"); }); </script>{% endblock %}五、电影列表页面搭建# 首页@home.route("/")def index():return render_template('home/index.html')# 首页中的悬浮窗@home.route("/animation/")def animation():return render_template("home/animation.html")5.2 在index.html中，将悬浮窗的地址指向animation.html<section id="hotmovie" style="margin-top:76px"> <div class="container"> <div class="row wow fadeInRight" data-wow-delay="0.6s"> <div class="row"> <iframe class="wow fadeIn" width="100%" height="375px" frameborder=0 scrolling=no src="{{ url_for('home.animation')}}"></iframe> </div> </div> </div></section>六、电影搜索页面搭建# 电影搜索@home.route("/search/")def search(): return render_template("home/search.html")<!-- search.html -->{% extends 'home/home.html' %}{%block content %}<div class="row"> <div class="col-md-12"> <ol class="breadcrumb" style="margin-top:6px;"> <li>与"xxx"有关的电影，共x部</li> </ol> </div> <div class="col-md-12"> <div class="media"> <div class="media-left"> <a href="play.html"> <img class="media-object" src="holder.js/131x83" alt="环太平洋"> </a> </div> <div class="media-body"> <h4 class="media-heading">环太平洋<a href="play.html" class="label label-primary pull-right"><span class="glyphicon glyphicon-play"></span>播放影片</a></h4> 该片主要讲述了人类为了抵抗怪兽的进攻，研制出了高大的机器战士与来犯怪兽进行对抗的故事。</div> </div> <div class="media"> <div class="media-left"> <a href="play.html"> <img class="media-object" src="holder.js/131x83" alt="环太平洋"> </a> </div> <div class="media-body"> <h4 class="media-heading">环太平洋<a href="play.html" class="label label-primary pull-right"><span class="glyphicon glyphicon-play"></span>播放影片</a></h4> 该片主要讲述了人类为了抵抗怪兽的进攻，研制出了高大的机器战士与来犯怪兽进行对抗的故事。</div> </div> </div> <div class="col-md-12 text-center"> <nav aria-label="Page navigation"> <ul class="pagination"> <li> <a href="#" aria-label="First"> <span aria-hidden="true">首页</span> </a> </li> <li> <a href="#" aria-label="Previous"> <span aria-hidden="true">上一页</span> </a> </li> <li><a href="#">1 / 10</a></li> <li> <a href="#" aria-label="Next"> <span aria-hidden="true">下一页</span> </a> </li> <li> <a href="#" aria-label="Last"> <span aria-hidden="true">尾页</span> </a> </li> </ul> </nav> </div> </div>{%endblock%}七、404页面搭建:404在init.py中去定义，定义方法如下：# in app/init.py# 404页面搭建@app.errorhandler(404)def page_not_found(error):return render_template('home/404.html'), 404关键词：前台,电影
