7- Flask构建弹幕微电影网站-网站页面搭建

2018-02-23 本文已影响727人天涯明月笙

已上线演示地址: http://movie.mtianyan.cn
项目源码地址：https://github.com/mtianyan/movie_project

前端搭建

实现前台后台html布局页面搭建

前台页面源码链接：
https://github.com/mtianyan/movie_project_html

将整个前台页面源码放入我们的staic/tpl目录下。
打开tpl/2-movie/index.html.

点击右上角在浏览器里预览网页。可以看到首页。

首页

网页整体分为：

幻灯片banner展示
标签的筛选
卡片的电影展览
分页效果
顶部的导航
底部的版权信息。
搜索
搜索结果的分页。点击播放
播放界面：电影介绍，评论。评论列表分页
会员登录注册界面
会员中心：修改资料，密码。评论记录修改
收藏电影。

前台布局搭建：

静态文件的引入

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

定义路由：

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

定义数据块：

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

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

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

 <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之后的相对地址。

在如下的内容部分定义content块。

<!--内容-->
<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

访问我们可以看到首页的效果

首页效果

会员登录页面的搭建

需要掌握的知识点：

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

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

上述登录和退出分别采用return渲染的模板以及直接重定向。

编码

app\home\views.py：
添加代码

from flask import render_template,url_for,redirect
#登录
@home.route("/login/")
def login():
    return render_template("home/login.html")

#退出
@home.route("/logout/")
def logout():
    return redirect(url_for('home.login'))
#重定向到home模块下的登录。

在app\templates\home下新建login.html并将app/static/tpl/2-movie/login.html中内容注释的部分复制出来贴进去。

修改app/templates/home/home.html的登录退出按钮的href

<a class="curlink" href="{{url_for('home.index')}}"><span class="glyphicon glyphicon-film"></span>&nbsp;电影</a>
<a class="curlink" href="{{ url_for('home.login')}}"><span class="glyphicon glyphicon-log-in"></span>&nbsp;登录</a>
<a class="curlink" href="{{ url_for('home.logout')}}"><span class="glyphicon glyphicon-log-out"></span>&nbsp;退出</a>

注意：传入的是一个'home.login'不要把单引号漏了

修改完成后进入manage.py点击run。访问

可以看到登录界面已经好了http://127.0.0.1:5000/login/

登录界面

点击登录和点击退出。也都能正确的跳转到登录。

会员注册页面的搭建

编码

定义home/views.py:

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

在app\templates\home下新建register.html并将app/static/tpl/2-movie/register.html中注释表明为内容的部分复制出来贴进去。

这里笔者的强迫症犯了，请自行将所有的regist 改为register写全。

此时我们点击电影helloworld，点击登录，注册，分布展示对应界面。点击退出，会跳转到登录。

此处为笔者上次前去考研中断项目的地址

对应提交commit: 项目中断重启初始化: 首页路由，登录，注册已完成。

会员中心界面搭建

基础语句概要

# 会员中心
@home.route("/user/")
# 修改密码
@home.route("/pwd/")
# 评论记录
@home.route("/comments/")
# 登录日志
@home.route("/loginlog/")
# 收藏
@home.route("/moviecol/")

实际编码与模板创建

@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")

然后分别创建对应的template

mark

定义会员中心界面。

mark

可以看到整个微电影用户中心的左侧是一个菜单。这个菜单是用户中心的这些功能共用的。

新建menu.html

将app/static/tpl/2-movie/user.html中的菜单拷贝过来。

mark

修改我们的url链接

mark

编写user.html

mark

其中的contaier部分为app/static/tpl/2-movie/user.html中的内容部分

可能报错(已解决):

AssertionError: View function mapping is overwriting an existing endpoint function: home.pwd

说明视图中定义了两个重名的函数。

mark

包含menu页面。

此时home.html中通往会员的url还没有打通，前往修改。

mark

可以看到user中还有和我们的home页面之余的自己独特的东西

mark

将home中的style合并一下。

mark

在home.html中定义一个css 数据块，用于其儿子们重写该数据块。

mark

前往user.html中重写

将app/static/tpl/2-movie/user.html中的style部分拷贝过来

mark

将user收缩至如图结构，覆盖到pwd comments loginlog moviecol

将其中的col-md-9 分别用/tpl/2-movie/中的这部分代替。

将每个页面内的style覆盖css数据块

找猫画虎，自行完成环节。

实现菜单激活某一个具体项

为menu中的各项添加id

mark

在home.html中添加数据块block js，因为我们想在menu中使用jQuery动态添加class

mark

user.html中重新改block

mark

然后左眼看着图中顺序，右手去其他文件中分别m2，m3

mark

此时并没有实现激活样式。控制台查看发现是lazyload没加载

将tpl中 lazyload拷贝到static

mark

出现两个激活，是因为忘记删除默认的user active 前往menu中删除即可。

点击登录注册暂时设置为跳转会员中心。

将user.html替换为

mark

提交commit：前台: 会员中心搭建

提交的代码有一些问题:

敲重点: jinja2 urlfor中括号里面必须单引号包裹。不能直接填home.user

jinja2.exceptions.UndefinedError
jinja2.exceptions.UndefinedError: 'home' is undefined

电影列表页面搭建

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

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

新建layout.html 复制home.html 到 layout

将内容部分。

mark

只保留content

打开index.html继承layout

mark

将tpl/index.html中的电影列表部分粘贴到content当中。

将html收至如图形状

mark

只保留前四个col-md-3，其余先删除了。

将热门电影也拷过来。可以看到热门电影指向一个iframe。animation

将tpl/animation的代码复制到home/animation(新建)中

将其配套的静态文件，在static目录下新建一个anim目录存放。

mark

将animation.html中的静态文件自行进行修改。

mark

配置首页指向animation的url

只保留一个col-md-3使用for循环创建12个。

mark

这时运行项目，可能遇到的报错。

静态文件的格式，单引号没有成对添加
图片不显示，是忘记添加.jpg后缀

列表的holder.js没有显示

mark

此时在layout中添加对于holder.js的支持。

mark

电影搜索页面搭建

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

创建search.html,内容如下

mark

因为home.html的content外围已经有一个container div了，所以将tpl/search.html中的row部分拷进来。

mark

将div media 删除到剩下一个。使用for进行填充。

mark

前往home模板中为搜索添加url

mark

同时修改layout和home两个html中的search url 链接

如果发现holder.js没有显示图片站位，前去添加图片占位

mark

电影详情页面搭建

@home.route("/play/")
def play():
    """
    播放
    """
    return render_template("home/play.html")

新建play.html

mark

跟搜索差不多照猫画虎做出来。

将头部中的play页面独有的css内容拷贝过来，用css数据块包裹

mark

将带有播放页面的静态资源都分布放入css 和 js 块中。

将url路径改好为url_for格式，此时可以发现我们的那些static下并没有这些。
将tpl中静态资源复制过去。

报错:

jinja2.exceptions.TemplateSyntaxError
jinja2.exceptions.TemplateSyntaxError: expected token ',', got 'static'

一般原因都是urlfor标签未正常

将home中的.html的跳转全部改成url for
将index中的播放同理修改

mark

搜索中的电影播放与收藏中的电影播放。

收藏中电影项使用for range 大法处理

404页面搭建

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

mark

新建404页面。将tpl下404复制过来

将static文件全部自行修改。

输入错误地址依然提示not found 是因为我们依然打开的是debug模式。

以上是我在django中的理解。flask中debug模式下仍然可以404

修改404中 index的url链接。

对应的commit提交:

第五章完结

7- Flask构建弹幕微电影网站-网站页面搭建

前端搭建

实现前台后台html布局页面搭建

前台布局搭建：

会员登录页面的搭建

编码

会员注册页面的搭建

编码

会员中心界面搭建

基础语句概要

实际编码与模板创建

实现菜单激活某一个具体项

电影列表页面搭建

电影搜索页面搭建

电影详情页面搭建

404页面搭建

猜你喜欢

热点阅读