flask视频网站（前端）

最新推荐文章于 2023-05-05 17:22:30 发布

Roy_Allen

最新推荐文章于 2023-05-05 17:22:30 发布

阅读量615

点赞数 1

分类专栏： Python Web基础文章标签： flask 前端

本文链接：https://blog.csdn.net/Roy_Allen/article/details/120982318

版权

Python Web基础专栏收录该内容

9 篇文章 3 订阅

订阅专栏

本文详细介绍了使用Flask框架搭建前端界面和后台管理系统的流程，包括模板继承、404错误页面的设计以及登录、会员中心、电影列表等模块的实现。通过路由、视图和模板渲染，展示了如何组织和渲染HTML页面，同时强调了布局文件和404页面在用户体验中的重要性。

摘要由CSDN通过智能技术生成

前端界面

前端的搭建目前水平只能靠模板了
在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中定义