Flask 構建微電影視訊網站

已上線演示地址: http://movie.mtianyan.cn
專案原始碼地址：https://github.com/mtianyan/movie_project

上一節教程地址：http://www.jianshu.com/p/387360c9c4b1
本節教程對應github : commit：首頁搭建-0

持續更新教程與程式碼commit。歡迎大家一起學習，star。

前端搭建

實現前臺後臺html佈局頁面搭建

前臺頁面原始碼連結：
https://github.com/mtianyan/movie_project_html

• 將整個前臺頁面原始碼放入我們的staic/tpl目錄下。

• 開啟tpl/2-movie/index.html.

點選右上角在瀏覽器裡預覽網頁。可以看到首頁。

網頁整體分為：

• 幻燈片banner展示
• 標籤的篩選
• 卡片的電影展覽
• 分頁效果
• 頂部的導航
• 底部的版權資訊。
• 搜尋
• 搜尋結果的分頁。點選播放
• 播放介面：電影介紹，評論。評論列表分頁
• 會員登入註冊介面
• 會員中心：修改資料，密碼。評論記錄修改
• 收藏電影。

前臺佈局搭建：

• 靜態檔案的引入

{{ url_for(`static`,filename=`檔案路徑`)}}

• 定義路由：

{{ url_for(`模組名.檢視名`,變數=引數)}}

• 定義資料塊：

{%block 資料塊名稱%} .... {% endblock %}

1. 首先在templated/home目錄下建立home.html

網站共用的部分是頂部和底部。

tpl/2-movie/nav.html就是我們需要的導航和底部。

將10-13行link標籤修改為靜態檔案

 <link rel="shortcut icon" href="{{ url_for(`static`,filename=`base/images/logo.png`) }}">
    <link rel="stylesheet" href="{{ url_for(`static`,filename=`base/css/bootstrap.min.css`) }}">
    <link rel="stylesheet" href="{{ url_for(`static`,filename=`base/css/bootstrap-movie.css`) }}">
    <link rel="stylesheet" href="{{ url_for(`static`,filename=`base/css/animate.css`) }}">
 <script src="{{ url_for(`static`,filename=`base/js/jquery.min.js`) }}"></script>
<script src="{{ url_for(`static`,filename=`base/js/bootstrap.min.js`) }}"></script>
<script src="{{ url_for(`static`,filename=`base/js/jquery.singlePageNav.min.js`) }}"></script>
<script src="{{ url_for(`static`,filename=`base/js/wow.min.js`) }}"></script>
<script src="{{ url_for(`static`,filename=`lazyload/jquery.lazyload.min.js`) }}"></script>

將原本的引用外部的css/圖片/js的部分。改寫為static靜態目錄下檔名。
filename 應該是staic之後的相對地址。

<!--內容-->
<div class="container" style="margin-top:76px">
    {% block content %}{% endblock %}
</div>
<!--內容-->

開啟home模組的檢視處理器（views.py）：

• 定義我們的路由。

home/view,py

from . import home
from flask import render_template

@home.route("/")
def index():
    return render_template("home/index.html")

此時我們該去建立我們的index.html.（home/index.html）

{% extends "home.html" %}

{% block %}
<h1>helloworld</h1>
{% endblock %}

繼承home.html，然後寫一個塊。

開啟入口指令碼。執行manage.py

改為：繼承home/重寫content塊

{% extends "home.html" %}

{% block content %}
<h1>helloworld</h1>
{% endblock %}

報錯：

jinja2.exceptions.TemplateNotFound
jinja2.exceptions.TemplateNotFound: home.html

因為我們的路徑有問題：

{% extends "home/home.html" %}

{% block content %}
<h1>helloworld</h1>
{% endblock %}

將static/tpl/static/base剪下到static/

此時再去執行manage.py

訪問我們可以看到首頁的效果