(旧)2- 大家一起学:Flask构建弹幕微电影网站-前端首页搭建-0
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 %}
- 首先在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
访问我们可以看到首页的效果
(旧)2- 大家一起学:Flask构建弹幕微电影网站-前端首页搭建-0相关推荐
- 弹幕 mysql_3、Flask构建弹幕微电影网站-安装mysql数据库及配置
Flask 构建微电影视频网站 安装数据库连接依赖包 安装包flask-sqlalchemy pip install flask-sqlalchemy pip list Package Version ...
- 18 -Flask构建弹幕微电影网站- 部署上线
Centos7(博主使用的是ubuntu) 数据库: mysql 编程语言: python3.6 队列缓存: redis web反向代理: nginx 依赖环境: flask pymysqlclien ...
- 17 -Flask构建弹幕微电影网站- 电影播放及评论弹幕收藏实现
上映预告 模型: Preview 表单: 无 请求方法: GET 访问控制: 无 views中进行业务逻辑的实现 @home.route("/animation/") def an ...
- 15 -Flask构建弹幕微电影网站-基于角色的访问控制
本章内容: 基于角色的访问控制 已上线演示地址: http://movie.mtianyan.cn 项目源码地址:https://github.com/mtianyan/movie_project 基 ...
- (旧)3- Flask构建弹幕微电影网站- 课程介绍
Flask 构建微电影视频网站 已上线演示地址: http://movie.mtianyan.cn 项目源码地址:https://github.com/mtianyan/movie_project 持 ...
- 【Python-Microfilm-web-app-flask】基于Flask构建的微电影网站实例及源码参考
前言 2019年5月20号,系统集成项目工程师考试结束,这个意味这今年的目标实现了一小部分,毕竟是一年多没有再参加考试,这次考试,又体会到了头脑风暴,考试这种活动,和编程不是一个层次.编程我可以有N种 ...
- (新的开始)4- Flask构建弹幕微电影网站-环境搭建
已上线演示地址: http://movie.mtianyan.cn 项目源码地址:https://github.com/mtianyan/movie_project 准备开发环境 windows环境搭 ...
- 用python开发一个影视网站_GitHub - lyzhanghai/movie_project: 一个使用Python+Flask开发的微电影网站...
微电影网站搭建手册 简介 这是一个使用Python语言和Flask框架搭建的微电影网站.网站分前台和后台,前台面向用户,主要功能有注册会员.搜索电影.观看电影.收藏及评论电影:后台面向网站管理人员,主 ...
- flask学习:开发一个微电影网站一:项目介绍
最近在学习flask,完成了入门学习,现在想找一个项目进行实战学习,看看系统的开发是怎么样的,然后看到了慕课网上有一个视频,使用flask开发一个微电影网站,因此决定花时间学习一下. 一:首先介绍一下 ...
最新文章
- 【FPGA】ROM/EPROM的设计(使用加载文件的方式初始化)
- Flex中如何通过horizontalTickAligned和verticalTickAligned样式指定线图LineChart横竖方向轴心标记的例子...
- JAVA程序员面试32问(答案)
- servlet和jsp中间的交互
- WebCast《实战ASP.NET AJAX系列课程(2):使用客户端框架创建“纯粹”的Ajax应用程序》相关资源...
- url映射 ccf (Java正则表达式80分解法)
- jquery tablelist Tablesorter 表格控件
- dhcp软件_DHCP和DNS是什么 二者有何区别?
- 【C#学习笔记】单精度和双精度浮点型操作留意。
- 双机热备篇 VRRP与VGMP的故事(2)
- HTTP method POST is not supported by this URL解决方案
- 电脑经常出现程序未响应
- 如何去理解同花顺l2接口?
- 5分钟理解Focal Loss与GHM
- 多线程之注入hook钩子线程(二十一)
- Surround With快捷键
- 【Windows】Windows10系统获取文件夹下的文件名方法
- Java系列技术之Spring5框架-钟洪发-专题视频课程
- HTML清除浮动的四种方式
- 【Qt开发笔记】Windows(VS2015或Mingw)环境编译Marble地图库