1.1 前置知識

靜態(tài)文件的引入（在前臺頁面中）：{{url_for(static,filename='文件路徑')}}定義路由：{{url_for(‘模塊名.視圖名',變量=參數(shù))}}。" />

国产成人精品无码青草_亚洲国产美女精品久久久久∴_欧美人与鲁交大毛片免费_国产果冻豆传媒麻婆精东

15158846557 或 在線咨詢 在線咨詢
15158846557 或 在線咨詢
所在位置： 首頁 > 營銷資訊 > 網(wǎng)站運營 > Python Flask構(gòu)建微電影網(wǎng)站（五）--搭建前臺頁面

Python Flask構(gòu)建微電影網(wǎng)站（五）--搭建前臺頁面

時間：2023-07-30 13:21:02 | 來源：網(wǎng)站運營

時間：2023-07-30 13:21:02 來源：網(wǎng)站運營

Python Flask構(gòu)建微電影網(wǎng)站（五）--搭建前臺頁面：一、前臺布局搭建

1.1 前置知識

1.1 前臺布局搭建：

1.1.1 分析：定義base.html頁面，即頁面公用的部分，后續(xù)子頁面用繼承的方式就可以擴展額外的模塊。分析有page_header和page_footer，如下：




1.1.2 定義前臺的base.html頁面，即前臺布局頁面。

home.html的代碼如下：

<!-- 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><!--導(dǎo)航--><nav class="navbar navbar-default navbar-fixed-top"> <div class="container"> <!--小屏幕導(dǎo)航按鈕和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;">&nbsp;微電影 </a> </div> <!--小屏幕導(dǎo)航按鈕和logo--> <!--導(dǎo)航--> <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>&nbsp;搜索</a> </span> </div> </form> <ul class="nav navbar-nav navbar-right"> <li> <a class="curlink" href="index.html"><span class="glyphicon glyphicon-film"></span>&nbsp;電影</a> </li> <li> <a class="curlink" href="login.html"><span class="glyphicon glyphicon-log-in"></span>&nbsp;登錄</a> </li> <li> <a class="curlink" href="register.html"><span class="glyphicon glyphicon-plus"></span>&nbsp;注冊</a> </li> <li> <a class="curlink" href="logout.html"><span class="glyphicon glyphicon-log-out"></span>&nbsp;退出</a> </li> <li> <a class="curlink" href="user.html"><span class="glyphicon glyphicon-user"></span>&nbsp;會員</a> </li> </ul> </div> <!--導(dǎo)航--> </div></nav><!--導(dǎo)航--><!--內(nèi)容--><div class="container" style="margin-top:76px"></div><!--內(nèi)容--><!--底部--><footer> <div class="container"> <div class="row"> <div class="col-md-12"> <p> ?&nbsp;2017&nbsp;flaskmovie.imooc.com&nbsp;京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

1.1.3 用url_for的方法修改其中的靜態(tài)文件的地址。我們用{{url_for(static,filename='文件路徑')}}的目的是假如將來更換服務(wù)器，僅僅修改static文件夾的路徑即可，不用逐一的在前臺頁面對靜態(tài)文件的引用路徑做修改。在templates/home中新建index.html并繼承home.html。注意這里繼承是“{% extends 'home/home.html' %}”

{% extends 'home/home.html' %}{% block content %}<h1>hello world</h1>{% endblock %}二、會員登陸頁面搭建

2.1 定義視圖

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>&nbsp;會員登錄</h3> </div> <div class="panel-body"> <form role="form"> <fieldset> <div class="form-group"> <label for="input_contact"><span class="glyphicon glyphicon-user"></span>&nbsp;賬號</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>&nbsp;密碼</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('模塊名.視圖函數(shù)名')}} 的方法--><ul class="nav navbar-nav navbar-right"> <li> <a class="curlink" href="index.html"><span class="glyphicon glyphicon-film"></span>&nbsp;電影</a> </li> <li> <a class="curlink" href="{{ url_for('home.login') }}"><span class="glyphicon glyphicon-log-in"></span>&nbsp;登錄</a> </li> <li> <a class="curlink" href="register.html"><span class="glyphicon glyphicon-plus"></span>&nbsp;注冊</a> </li> <li> <a class="curlink" href="{{ url_for('home.logout') }}"><span class="glyphicon glyphicon-log-out"></span>&nbsp;退出</a> </li> <li> <a class="curlink" href="user.html"><span class="glyphicon glyphicon-user"></span>&nbsp;會員</a> </li></ul>三、會員注冊頁面搭建

3.1 定義view

@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>&nbsp;會員注冊</h3> </div> <div class="panel-body"> <form role="form"> <fieldset> <div class="form-group"> <label for="input_name"><span class="glyphicon glyphicon-user"></span>&nbsp;昵稱</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>&nbsp;郵箱</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>&nbsp;手機</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>&nbsp;密碼</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>&nbsp;確認(rèn)密碼</label> <input id="input_repassword" class="form-control input-lg" placeholder="確認(rèn)密碼" 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中跳轉(zhuǎn)url：（home模塊下的register視圖函數(shù)）

<a class="curlink" href="{{ url_for('home.register') }}"><span class="glyphicon glyphicon-plus"></span>&nbsp;注冊</a>四、會員中心頁面搭建：會員中心的頁面比較多，在home下面新建一個user_center文件夾，專門來存放 會員中心的前端頁面。

4.1 會員中心頁面布局：觀察會員中心在home.html的基礎(chǔ)上，還增加了頁面的公共部分。所有可以單獨把這部分抽取出來。

4.2 新建navi.html頁面，將左側(cè)導(dǎo)航欄的代碼放入其中。這里navi.html代碼有兩種處理方式，一種是用模板傳遞繼承的方式，即：comments、loginlog等頁面繼承自-->navi.html繼承自-->home.html

<!-- 在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>&nbsp;會員中心 </a> <a href="{{ url_for('home.pwd') }}" class="list-group-item"> <span class="glyphicon glyphicon-lock"></span>&nbsp;修改密碼 </a> <a href="{{ url_for('home.comments') }}" class="list-group-item"> <span class="glyphicon glyphicon-comment"></span>&nbsp;評論記錄 </a> <a href="{{ url_for('home.loginlog') }}" class="list-group-item"> <span class="glyphicon glyphicon-calendar"></span>&nbsp;登錄日志 </a> <a href="{{ url_for('home.moviecol') }}" class="list-group-item"> <span class="glyphicon glyphicon-heart"></span>&nbsp;收藏電影 </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>&nbsp;會員中心</h3> </div> <div class="panel-body"> <form role="form"> <fieldset> <div class="form-group"> <label for="input_name"><span class="glyphicon glyphicon-user"></span>&nbsp;昵稱</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>&nbsp;郵箱</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>&nbsp;手機</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>&nbsp;頭像</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>&nbsp;上傳頭像</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>&nbsp;簡介</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>&nbsp;保存修改</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>&nbsp;會員中心 </a> <a href="{{ url_for('home.pwd') }}" class="list-group-item"> <span class="glyphicon glyphicon-lock"></span>&nbsp;修改密碼 </a> <a href="{{ url_for('home.comments') }}" class="list-group-item"> <span class="glyphicon glyphicon-comment"></span>&nbsp;評論記錄 </a> <a href="{{ url_for('home.loginlog') }}" class="list-group-item"> <span class="glyphicon glyphicon-calendar"></span>&nbsp;登錄日志 </a> <a href="{{ url_for('home.moviecol') }}" class="list-group-item"> <span class="glyphicon glyphicon-heart"></span>&nbsp;收藏電影 </a> </div> </div># 舉例：in pwd.html頁面中：

{% extends 'home/home.html' %}{% block content %}<!-- 將navi.html包含進來，這里為了與法一區(qū)別改名為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>&nbsp;會員中心</h3> </div> <div class="panel-body"> <form role="form"> <fieldset> <div class="form-group"> <label for="input_oldpwd"><span class="glyphicon glyphicon-lock"></span>&nbsp;舊密碼</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>&nbsp;新密碼</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>&nbsp;修改密碼</a> </fieldset> </form> </div> </div> </div>{% endblock %}4.3 關(guān)于“激活樣式”的控制：導(dǎo)航條“高亮”激活的樣式







<!-- in navi.html中，給每個跳轉(zhuǎn)連接增加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>&nbsp;會員中心 </a> <a id="m-2" href="{{ url_for('home.pwd') }}" class="list-group-item"> <span class="glyphicon glyphicon-lock"></span>&nbsp;修改密碼 </a> <a id="m-3" href="{{ url_for('home.comments') }}" class="list-group-item"> <span class="glyphicon glyphicon-comment"></span>&nbsp;評論記錄 </a> <a id="m-4" href="{{ url_for('home.loginlog') }}" class="list-group-item"> <span class="glyphicon glyphicon-calendar"></span>&nbsp;登錄日志 </a> <a id="m-5" href="{{ url_for('home.moviecol') }}" class="list-group-item"> <span class="glyphicon glyphicon-heart"></span>&nbsp;收藏電影 </a> </div> </div>{% block right %}{% endblock %}{% endblock %}# 然后在頁面中用jquery的方法去調(diào)用樣式。如user.html中：

{% block js %} <script> $(document).ready(function() { $("#m-1").addClass("active"); }); </script>{% endblock %}五、電影列表頁面搭建

5.1創(chuàng)建視圖函數(shù)

# 首頁@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>六、電影搜索頁面搭建

6.1 新建視圖：

# 電影搜索@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"有關(guān)的電影，共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="環(huán)太平洋"> </a> </div> <div class="media-body"> <h4 class="media-heading">環(huán)太平洋<a href="play.html" class="label label-primary pull-right"><span class="glyphicon glyphicon-play"></span>播放影片</a></h4> 該片主要講述了人類為了抵抗怪獸的進攻，研制出了高大的機器戰(zhàn)士與來犯怪獸進行對抗的故事。</div> </div> <div class="media"> <div class="media-left"> <a href="play.html"> <img class="media-object" src="holder.js/131x83" alt="環(huán)太平洋"> </a> </div> <div class="media-body"> <h4 class="media-heading">環(huán)太平洋<a href="play.html" class="label label-primary pull-right"><span class="glyphicon glyphicon-play"></span>播放影片</a></h4> 該片主要講述了人類為了抵抗怪獸的進攻，研制出了高大的機器戰(zhàn)士與來犯怪獸進行對抗的故事。</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&nbsp;/&nbsp;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



關(guān)鍵詞：前臺,電影

74
73
25
news

版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。

為了最佳展示效果，本站不支持IE9及以下版本的瀏覽器，建議您使用谷歌Chrome瀏覽器。 點擊下載Chrome瀏覽器
關(guān)閉