利用Flask搭建微电影视频网站（三）：前端首页搭建

关于博主

努力与运动兼备～~~有任何问题可以加我好友或者关注微信公众号，欢迎交流，我们一起进步！

                                      微信公众号:  啃饼思录

                                    QQ: 2810706745（啃饼小白）

写在前面

本篇笔记，我们来学习Flask网站前端首页面的搭建，这其实和Django搭建网页很类似，大家好好体会一下。

本篇笔记对应上传的仓库为:https://github.com/licheetools/movie对应第三篇。

前台布局搭建

第一步将所有static文件都放进指定的位置：

然后在templates/home文件夹下面新建一个home.html文件，将tpl/2-movie/nav.html文件内容全部拷贝到我们刚才新建的home.html页面里面，然后修改我们静态文件的目录，可以按照下面的图片要求进行：

1、静态文件的引入

{{ url_for('static',filename='文件路径')}}

2、定义路由

{{ url_for('模块名.视图名',变量=参数)}}

3、定义数据块

{%block 数据块名称%} .....{% endblock %}

# 原来代码为 <link rel="stylesheet" href="../static/base/css/bootstrap.min.css">
# 现在代码为   <link rel="stylesheet" href="{{ url_for('static', filename='base/css/bootstrap.min.css') }}">

其余所有的js, jpg,css均按照这样的要求进行，这里就不再一一提示了，直接附上代码：

    <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') }}">

<img src="{{ url_for('static', filename='base/images/logo.png') }}" style="height:30px;">&nbsp;微电影

<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>

接着在图示位置进行挖坑填坑操作：

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

然后打开home模块的视图处理器（home/views.py）：

from . import home
from flask import render_template


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

你发现没有此刻我们在templates/home文件夹下面是没有index.html文件的，我们需要去创建一个index.html文件，在里面输入如下代码：

{% extends "home.html" %}

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

然后运行一下我们的manage.py文件，在浏览器地址栏中输入http://127.0.0.1:5000/ 出现了错误：

错误提示我们block缺少一个名字，那我们就修改一下index.html文件：

{% extends "home.html" %}

{% block content %}
    <h1>Helo,World!</h1>
{% endblock %}

然后再次刷新一下我们的页面，发现还是出了问题：

错误提示我们没有找到home.html页面，那是因为我们的路径出了问题，我们继续修改一下：

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

{% block content %}
    <h1>Helo,World!</h1>
{% endblock %}

接着我们再次刷新一下，页面正常显示了：

会员登录页面搭建

打开app/home/views.py文件，新建以下代码：

from flask import  redirect, url_for

# 登入
@home.route('/login/')
def login():
    return render_template("home/login.html")


# 登出
@home.route('/logout/')
def logout():
    return redirect(url_for('home.login'))

然后在templates/home下面新建login.html文件，往里面新增如下代码：

{% 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 %}

（这段代码来自tpl/2-movie/login.html里面<div class="container" style="margin-top:120px"> 内容</div>的内容部分）

然后打开home/home.html文件，修改我们的url跳转链接：

会员注册

打开app/home/views.py文件，新建以下代码：

# 会员注册
@home.route('/register/')
def register():
    return render_template("home/register.html")

然后在templates/home下面新建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;确认密码</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 %}

（这段代码来自tpl/2-movie/register.html里面<div class="container" style="margin-top:120px"> 内容</div>的内容部分）
然后打开home/home.html文件，修改我们的url跳转链接：

会员中心页面搭建

由于前面已经有过2个页面搭建的例子，所以这里我们先定义完所以的路由，再在home文件夹里面新建对应的html文件！打开app/home/views.py文件，新建以下代码：

# 会员中心
@home.route('/user/')
def user():
    return render_template("home/user.html")


# 修改密码
@home.route('/pwd/')
def pwd():
    return render_template("home/pwd.html")


# 评论记录
@home.route('/comments/')
def comments():
    return render_template("home/comments.html")


# 登入日志
@home.route('/loginlog/')
def loginlog():
    return render_template("home/loginlog.html")


# 收藏电影
@home.route('/moviecol/')
def moviecol():
    return render_template("home/moviecol.html")

就是这个样子：

接下来定义会员中心菜单栏页面,在home文件夹里面，新建menu.html文件，里面写入从tpl/2-movie/user.html页面中<div class="col-md-3"> </div>的部分,并且修改一下url的跳转问题：

<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>

user.html书写

现在开始书写我们的user.html文件，我们复制tpl/2-movie/user.html页面中<div class="col-md-9"> </div>的部分：

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

{% block content %}
    <div class="col-md-9">
     ......
    </div>
{% endblock %}

然后运行一下我们的manage.py文件，发现我们的个人中心页面出来了，但是菜单栏没有出现：

我们需要include我们之前定义的menu.html页面,修改我们的user.html文件：

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

{% block content %}
{% include "home/menu.html" %}
    <div class="col-md-9">
     ......
    </div>
{% endblock %}

再刷新一下我们的页面试试，发现菜单栏已经可以正常显示了：

接下来将home/home.html里面的style进行合并，再进行挖坑填坑操作：

 <style>
        .navbar-brand > img {
            display: inline;
        }

        .media {
            padding: 3px;
            border: 1px solid #ccc
        }
    </style>
    {% block css %}{% endblock %}

接着打开home/user.html页面，对原来页面的css样式进行挖坑填坑操作：

{% block css %}
    <style>
        .navbar-brand > img {
            display: inline;
        }

        .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 {
            padding-right: 3px;
            padding-left: 3px;
        }

        .media {
            padding: 3px;
            border: 1px solid #ccc
        }
    </style>
{% endblock %}

pwd.html的书写

现在开始书写我们的pwd.html文件，我们复制tpl/2-movie/pwd.html页面中<div class="col-md-9"> </div>的部分：

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

{% block css %}
    <style>
        .navbar-brand>img {
            display: inline;
        }
        .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{
            padding-right: 3px;
            padding-left: 3px;
        }
        .media{
            padding:3px;
            border:1px solid #ccc
        }
    </style>
{% endblock %}

{% block content %}
{% include "home/menu.html" %}
    <div class="col-md-9">
     ......
    </div>
{% endblock %}

我们发现我们还没有判断选中状态，我们给menu.html的类加上一个ID，然后采用jQuery来进行判断：

<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>

打开home.html页面，在底部新增js的挖坑填坑代码：

{% block js %} {% endblock %}

然后打开user.html页面，在底部新增如下代码：

{% block js %}
    <script>
        $(document).ready(function () {
            $("#m-1").addClass("active");
            });
    </script>
{% endblock %}

我们顺便在pwd.html页面也加上类似的代码：

{% block js %}
    <script>
        $(document).ready(function () {
            $("#m-2").addClass("active");
            });
    </script>
{% endblock %}

comments.html的书写

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


{% block css %}
    <style>
        .navbar-brand > img {
            display: inline;
        }

        .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 {
            padding-right: 3px;
            padding-left: 3px;
        }

        .media {
            padding: 3px;
            border: 1px solid #ccc
        }
    </style>
{% endblock %}

{% block content %}
    {% include "home/menu.html" %}

    <div class="col-md-9">
    </div>
{% endblock %}
{% block js %}
    <script>
        $(document).ready(function () {
            $("#m-3").addClass("active");
        });
    </script>
{% endblock %}

loginlog.html的书写

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


{% block css %}
    <style>
        .navbar-brand > img {
            display: inline;
        }

        .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 {
            padding-right: 3px;
            padding-left: 3px;
        }

        .media {
            padding: 3px;
            border: 1px solid #ccc
        }
    </style>
{% endblock %}

{% block content %}
    {% include "home/menu.html" %}

    <div class="col-md-9">
    </div>
{% endblock %}
{% block js %}
    <script>
        $(document).ready(function () {
            $("#m-4").addClass("active");
        });
    </script>
{% endblock %}

moviecol.html的书写

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


{% block css %}
    <style>
        .navbar-brand > img {
            display: inline;
        }

        .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 {
            padding-right: 3px;
            padding-left: 3px;
        }

        .media {
            padding: 3px;
            border: 1px solid #ccc
        }
    </style>
{% endblock %}

{% block content %}
    {% include "home/menu.html" %}

    <div class="col-md-9">
    </div>
{% endblock %}
{% block js %}
    <script>
        $(document).ready(function () {
            $("#m-5").addClass("active");
        });
    </script>
{% endblock %}

现在再来运行我们的manage.py文件，我们在浏览器地址栏里面输入http://127.0.0.1:5000/user/，然后回车，然后点击左侧的菜单栏，发现页面显示没有问题。最后来完善一下url的跳转，我们打开home/home.html页面，修改如下：

电影列表页面搭建

继续在我们的home/views.py文件里面新增以下代码：

# 首页
@home.route('/')
def index():
    return render_template("home/index.html")


# 动画
@home.route('/animation/')
def animation():
    return render_template("home/animation.html")

注意：因为在前面我们已经创建了一个index函数，所以我们需要把它们去掉，或者重写一个
做完这些自然就是在templates/home文件夹下面新建对应的index.html和animation.html页面。考虑到首页的独立性，我们也在templates/home文件夹下面新建一个layout.html页面，并同时将home/home.html文件里面的代码都拷贝进去，并且修改一下home/home.html，将内容部分进行挖坑填坑操作：

现在回到我们的templates/home/index.html页面，其block content部分来自我们的tpl/2-movie/index.html的热门电影和电影列表部分： 紧接着将我们templates/home/index.html页面的电影列表展开和收起，就是这个样子：

我们只留下前四个col-md-3，其余的col-md-3就都删除！

然后将tpl/1-index-animation/animation.html的代码复制到home/animation.html里面，接着在static文件下新建anim文件，把与animation有关的js,css,main-banner都复制进去，就是这个样子：

然后我们回到templates/animation.html页面，修改我们的静态样式加载地址：

<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='anmi/css/style.css') }}">

<img src="{{ url_for('static', filename='anmi/main_banner/big0020150102211033.jpg') }}" alt="">


<script type="text/javascript" src="{{ url_for('static', filename='anmi/js/jquery.js') }}"></script>

接着回到我们的home/index.html页面，我们进行animation的跳转链接配置：

<iframe class="wow fadeIn" width="100%" height="375px" frameborder=0 scrolling=no src="{{ url_for('home.animation') }}"></iframe>

还有对我们的列表进行for循环的读取：
最后运行一下我们的manage.py文件，发现样式和页面都正常显示了：

电影搜索页面搭建

老规矩，在home/views.py文件下面新增以下代码：

# 搜索页面
@home.route('/search/')
def search():
    return render_template("home/search.html")

自然你就需要在templates/home文件夹下面新建一个search.html页面。

打开home/search.html页面，我们新建以下代码： 然后展开和收起页面，利用for循环进行填充：

接下来就是search相关的url跳转的配置，home.html和layout.html页面都需要配置：

 <a class="btn btn-default" href="{{ url_for('home.search') }}"><span class="glyphicon glyphicon-search"></span>&nbsp;搜索</a>

<a class="btn btn-default" href="{{ url_for('home.search') }}"><span class="glyphicon glyphicon-search"></span>&nbsp;搜索</a>

电影详情页面搭建

老规矩，在home/views.py文件下面新增以下代码：

# 详情页面
@home.route('/play/')
def play():
    return render_template("home/play.html")

自然你就需要在templates/home文件夹下面新建一个play.html页面。

打开home/play.html页面，我们新建以下代码：

然后对所以的静态文件进行访问配置，由于太多，这里就不一一说明了。

接下来对home/home.html页面所以的url进行跳转配置，还有搜索中的电影播放与收藏中的电影播放页面的跳转，这个很多，需要耐心一个个去查找，修改。

还有收藏页面的for循环：
之后运行一下manage.py文件，发现页面跳转没有问题。

404页面的搭建

因为404页面是一个全局页面，所以我们需要在初始化文件里面写入，而不是在home这个应用里面(app/--init--.py文件)：

from flask import Flask, render_template

app = Flask(__name__)
app.debug = True

from app.home import home as home_blueprint
from app.admin import admin as admin_blueprint

app.register_blueprint(home_blueprint)
app.register_blueprint(admin_blueprint, url_prefix="/admin")


# 404页面
@app.errorhandler(404)
def page_not_found(error):
    return render_template("home/404.html"), 404

自然你就需要在templates/home文件夹下面新建一个404.html页面。

然后把4-404.html页面的代码都拷贝进去，并修改页面的跳转和静态文件的加载样式：

<!doctype html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <title>消失在宇宙星空中的404页面</title>
    <link href="{{ url_for('static', filename='404/404.css') }}" rel="stylesheet" type="text/css">
</head>
<body>
<!-- 代码 开始 -->
<div class="fullScreen" id="fullScreen">
    <img class="rotating" src="{{ url_for('static', filename='404/spaceman.svg') }}">
    <div class="pagenotfound-text">
        <h1>迷失在太空中！</h1>
        <h2><a href="{{ url_for('home.index') }}">返回首页</a></h2>
    </div>
    <canvas id="canvas2d"></canvas>
</div>
<script type="text/javascript" src="{{ url_for('static', filename='404/spaceman.svg') }}"></script>
<!-- 代码 结束 -->
</body>
</html>

然后刷新一下我们的页面，发现404页面可以正常显示出来。

至此，我们本篇关于前端首页搭建的介绍就到此为止了，感谢你的赏阅！

本篇笔记对应上传的仓库为:https://github.com/licheetools/movie对应第三篇。