flask视频网站（前端）

news/2024/5/9 17:39:26/文章来源:https://blog.csdn.net/Roy_Allen/article/details/120982318

文章目录

前端界面
- 前台
- - 电影列表
  - 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")

<!--在home.html的内容部分使用：-->
<div class="container" style="margin-top:76px">{% block content %}{% endblock %}
</div><!--templates/home/index.html 前端页面-->
<!--这里使用模板继承的方法，更加灵活，替换名为 content 的 block-->
{% extends "home/home.html" %}{% block content %}
<h1>Hello Roy!</h1>
{% 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的链接也替换掉

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

会员中心

包含的页面比较多，直接从视图看吧；每个视图都对应一个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 %}
<script>$(document).ready(function () {$("#m-2").addClass("active")})
</script>
{% 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中定义