flask视频网站（前端）

文章目录

前端界面
- 前台
- - 电影列表
  - 404
- 后台
小结

前端界面

前端的搭建目前水平只能靠模板了
在templates中新建admin/home

前台

搭建顶部和底部，新建 home.html
- 这部分是所有页面都要用到的，后面的模板继承也是基于此，用block增加内容！也叫布局文件
- 替换模板中静态资源路径，这里用到url_for，这些知识点在我的笔记中都可以找到
- 渲染模板还是从路由开始
```
# home/views.py
from flask import render_template

@home.route("/")
def index():
    return render_template("home/index.html")
```
```
    {% block content %}{% endblock %}




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

{% block content %}
Hello Roy!
{% endblock %}
```
- 注：这里用到的 static 和 templates 都是app下框架预设的目录，所以可以直接使用相对路径

登录登出

先从定义路由视图开始

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

@home.route("/logout")
def logout():
    return redirect(url_for("home.login"))  # url_for根据视图反向解析路径，和模板中的url_for不是一回事

定义模板，在login.html中，先继承顶部和底部，然后用{% block content %}替换继承模板中对应的内容
将home模板中登录登出button的链接也替换掉
```
	 登录
           

	 退出
```

会员中心

包含的页面比较多，直接从视图看吧；每个视图都对应一个HTML文件

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

@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/vloginlog.html")

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

同样的方法，使用模板继承填充 home.html 模板的 block
当然，可以继承多个页面，但是block的名称要区分开
我们还可以使用{% include "" %}语法导入定义好的其他公共界面

修改一下home.html，增加个block，给左侧menu增加js代码，实现active切换

{% block active %}

{% endblock %}

电影列表

前面登陆和会员中心两部分的界面完成后，最关键的电影列表界面，和搜索界面

新建布局文件layout.html，当然，先从路由视图开始

# 电影列表界面
@home.route("/")
def loginlog():
    return render_template("home/index.html")

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

# 电影搜索和播放界面
@home.route("/search")
def search():
    return render_template("home/search.html")

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

这里涉及到使用{% for v in range(1, 10) %}和{% endfor %}，因为这些事动态内容，这样写后面可以根据数据库查询动态显示
任何界面大致搞出来，然后就要在很多地方点点点，看看哪些链接还没搞好！
- 当然，也不能乱改，最好从布局文件开始，然后首页index…

404

错误界面做的好看相当重要，体现你这个艺术水平

这里的路由不太一样！

# app/__init__.py

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

后台

先把后台界面搭建起来，诶~

登录登出

@admin.route('/login')
def login():
    return render_template('admin/login.html')

@admin.route('/logout')
def logout():
    return redirect(url_for('admin.login'))

布局文件中有一些常用的块，很长的部分也可以抽出去用{% include %}形式

{% block css %}{% endblock %}
{% block content %}{% endblock %}
{% block js %}{% endblock %}

修改密码，控制面板
```
@admin.route('/pwd')
def pwd():
    return render_template('admin/pwd.html')
```
- 这里激活选中的控制面板需要在父标签，例如首页，动态增加active属性
- 可以参看源后台源码，定位问题

接下来就是根据左侧的menu逐个完成了

from . import admin
from flask import Flask, render_template, redirect, url_for

@admin.route('/login')
def login():
    return render_template('admin/login.html')

@admin.route('/logout')
def logout():
    return redirect(url_for('admin.login'))

@admin.route('/')
def index():
    return render_template('admin/index.html')

@admin.route('/pwd')
def pwd():
    return render_template('admin/pwd.html')

# 标签的添加和列表
@admin.route('/tag/add')
def tag_add():
    return render_template('admin/tagadd.html')

@admin.route('/tag/list')
def tag_list():
    return render_template('admin/taglist.html')

# 电影的添加和删除
@admin.route('/movie/add')
def movie_add():
    return render_template('admin/movieadd.html')

@admin.route('/movie/list')
def movie_list():
    return render_template('admin/movielist.html')

# 预告的添加和列表
@admin.route('/preview/add')
def preview_add():
    return render_template('admin/previewadd.html')

@admin.route('/preview/list')
def preview_list():
    return render_template('admin/previewlist.html')

# 会员列表
@admin.route('/user/list')
def user_list():
    return render_template('admin/userlist.html')

# 会员查看
@admin.route('/user/view')
def user_view():
    return render_template('admin/userview.html')

# 评论列表
@admin.route('/comment/list')
def comment_list():
    return render_template('admin/commentlist.html')

# 收藏列表
@admin.route('/collect/list')
def collect_list():
    return render_template('admin/collectlist.html')

# 操作日志
@admin.route('/oplog/list')
def oplog_list():
    return render_template('admin/oploglist.html')

# 管理员登录日志
@admin.route('/adminlog/list')
def adminlog_list():
    return render_template('admin/adminloglist.html')

# 会员登录日志
@admin.route('/userlog/list')
def userlog_list():
    return render_template('admin/userloglist.html')

# 权限添加
@admin.route('/auth/add')
def auth_add():
    return render_template('admin/authadd.html')

# 权限列表
@admin.route('/auth/list')
def auth_list():
    return render_template('admin/authlist.html')

# 角色添加
@admin.route('/role/add')
def role_add():
    return render_template('admin/roleadd.html')

# 角色列表
@admin.route('/role/list')
def role_list():
    return render_template('admin/rolelist.html')

# 管理员添加
@admin.route('/admin/add')
def admin_add():
    return render_template('admin/adminadd.html')

# 管理员列表
@admin.route('/admin/list')
def admin_list():
    return render_template('admin/adminlist.html')

模板的话还是那些方法，使用布局模板文件，继承之后填充block

小结

流程：路由——视图——模板
- app下模板文件templates和静态资源的目录static是框架定义好的，相对定位即可
技巧：布局文件+模板继承
- 在页面中使用 url_for() 完成文件定位；也用作视图定位
- 在视图中使用 url_for() 反向解析，定位视图
- 404界面需要在app中定义

flask视频网站（前端）

Hello Roy!

Python相关栏目本月热门文章