为了账号安全,请及时绑定邮箱和手机立即绑定

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

2018.07.21 23:40 1335浏览

项目源码地址: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 %}
  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') }}"><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 homefrom 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中内容注释的部分复制出来贴进去。

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

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

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

  1. 静态文件的格式,单引号没有成对添加

  2. 图片不显示,是忘记添加.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

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提交:

第五章完结




点击查看更多内容
0人点赞

若觉得本文不错,就分享一下吧!

评论

相关文章推荐

正在加载中
意见反馈 邀请有奖 帮助中心 APP下载
官方微信

举报

0/150
提交
取消