利用Flask搭建微电影视频网站(四):后台页面搭建

关于博主

努力与运动兼备~~~有任何问题可以加我好友或者关注微信公众号,欢迎交流,我们一起进步!

                                      微信公众号:  啃饼思录
                                    QQ: 2810706745(啃饼小白)

写在前面

本篇笔记,我们来学习Flask网站后台页面的搭建,因此我们本篇内容均在admin目录下面进行,所有与home相关的页面此刻都可以关闭了。

本篇笔记对应上传的仓库为:https://github.com/licheetools/movie对应第四篇。

管理员登录页面搭建

打开我们的app/admin/views.py文件,我们在里面新增以下代码:

from flask import 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'))

接下来就是在templates/admin文件夹下面新建对应的html文件(但是我们这里因为logout只是重定向到我们的login页面,因此只需要创建一个login.html即可),然后我们打开新建的login文件,复制3-admin/login.html的内容,并对静态文件和url跳转做一下配置,很简单,这里就不一一演示了。

后台布局搭建

同样我们需要定义一个基面,用于后台页面的继承,在admin文件夹下面新建admin.html文件,将3-admin/admin.html的内容全部复制进去。观察发现,菜单栏是很多页面共有的,所以我们可以新建一个grid.html页面,把菜单栏独立出来<ul class="sidebar-menu"></ul>,注意这样admin.html里面这段代码就要删除了,否则会影响后面的挖坑填坑操作:
接着回到我们的templates/admin/admin.html文件,对css, content,js进行挖坑填坑操作:
然后大家就是修改admin.html文件里面的静态文件加载路径以及访问跳转链接。(里面有很多,需要大家耐心的去修改):

然后修改admin/views.py文件,出现index函数:

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

之后便在admin下面新建index.html页面,里面写入测试代码:

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

{% block content %}
<h1>hello</h1>
{% endblock %}
然后运行一下manage.py文件,发现出了错误:

其实是因为我们重复地导入了自己,因为我们在admin.html页面里面添加了如下代码{% include "admin/admin.html" %}正确的应该是导入我们的菜单栏{% include "admin/grid.html" %},然后你再一次刷新页面,在浏览器地址栏中输入:http://127.0.0.1:5000/admin/就出现了后台管理页面:![](https://upload-images.jianshu.io/upload_images/8964398-e2a86bd486315386.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

修改密码界面搭建

老规矩,在views.py文件里面定义函数和url:

# 修改密码
@admin.route('/pwd/')
def pwd():
    return render_template("admin/pwd.html")
然后在templates/admin文件夹下面新建pwd.html页面,里面的代码如下:

这时候你访问http://127.0.0.1:5000/admin/pwd/页面显示正常,但是你点击左上角的修改密码,却显示404,所以我们需要回到admin.html页面,对跳转进行配置一下:

<a href="{{ url_for('admin.pwd') }}" class="btn btn-default btn-flat">修改密码</a>

现在刷新一下,发现页面跳转是没有问题的。

控制面板搭建

我们现在先来修改指向首页的view函数,就是这样:

# 后台首页
@admin.route("/")
def index():
    return render_template("admin/index.html")
然后修改templates/admin/index.html页面:

接着修改grid.html页面的链接跳转:

<a href="{{ url_for('admin.index') }}">
          <i class="fa fa-circle-o"></i> 控制面板
</a>
刷新一下,就出现这个页面:

但是我们点击左侧的首页按钮,没有显示为被选中状态,我们可以仿照之前的操作,添加id,从而实现选中状态的切换。

打开grid.html页面,我们在图示位置添加代码为图所示:

然后就是前往index.html页面,添加Jqurey代码:

    <script>
    $(document).read(function () {
         $("#g-1").addClass("active");
         $("#g-1-1").addClass("active");
    });
    </script>
就是这样:

标签管理页面搭建

标签管理页面分为两个部分,一个是标签列表,另一个是编辑标签。

老规矩,在views.py文件里面定义函数和url:

# 标签编辑
@admin.route('/tag/add')
def tag_add():
    return render_template("admin/tag_add.html")


# 标签列表
@admin.route('/tag/list')
def tag_list():
    return render_template("admin/tag_list.html")
然后修改grid.html页面:

接着就在templates/admin文件夹下面新建tag_add.html和tag_list.html页面,然后就是写入代码:tag_add页面代码就是这样,其中block content部分来自于3-admin/tag_add.html页面对应的部分,底部的block js是独立的,注意区别。

tag_list页面代码就是这样:
考虑到标签列表的重复性,所以采用for循环:

上映预告管理页面搭建

其实这个和我们的标签管理非常相似,所以我就快速说明:

# 上映预告添加
@admin.route('/movie/add')
def movie_add():
    return render_template("admin/movie_add.html")


# 上映预告列表
@admin.route('/movie/list')
def movie_list():
    return render_template("admin/movie_list.html")
然后修改grid.html页面:

接着就在templates/admin文件夹下面新建movie_add.html和movie_list.html页面,然后就是写入代码:movie_add页面代码就是这样,其中block content部分来自于3-admin/movie_add.html页面对应的部分,底部的block js是独立的,注意区别。

movie_list页面代码就是这样:
考虑到标签列表的重复性,所以采用for循环:

上映预告管理页面搭建

# 上映预告添加
@admin.route('/preview/add')
def preview_add():
    return render_template("admin/preview_add.html")

# 上映预告列表
@admin.route('/preview/list')
def preview_list():
    return render_template("admin/preview_list.html")

在admin下新建对应的html文件,修改grid.html的页面跳转以及g-4和g-4-1,g-4-2。以及列表循环。因为已经演示两遍了,这里就不说明了。

会员管理页面搭建

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


# 查看会员
@admin.route('/user/view')
def user_view():
    return render_template("admin/user_view.html")
在admin下新建对应的html文件,修改grid.html的页面跳转以及g-5和g-5-1,注意此处没有g-5-2!然后打开user_list.html页面,对人员进行for循环,并修改页面跳转链接:
还要注意user-view.html页面,有一段自己独有的css:

评论管理页面搭建

# 评论列表
@admin.route('/comment/list')
def comment_list():
    return render_template("admin/comment_list.html")
在admin下新建对应的html文件,修改grid.html的页面跳转以及g-6和g-6-1,注意此处没有g-6-2!然后打开comment_list.html页面,对评论进行for循环,并修改页面的静态文件路径:

收藏管理页面搭建

# 电影收藏
@admin.route('/moviecol/list')
def moviecol_list():
    return render_template("admin/moviecol_list.html")
在admin下新建对应的html文件,修改grid.html的页面跳转以及g-7和g-7-1,注意此处没有g-7-2!然后打开moviecol_list.html页面,对收藏进行for循环:

日志管理页面搭建

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


# 管理员登录日志列表
@admin.route('/adminloginlog/list')
def adminloginlog_list():
    return render_template("admin/adminloginlog_list.html")


# 会员登录日志列表
@admin.route('/userloginlog/list')
def userloginlog_list():
    return render_template("admin/userloginlog_list.html")

在admin下新建对应的html文件,修改grid.html的页面跳转以及g-8和g-8-1,g-8-2,g-8-3!然后打开3个html页面,对管理员,会员进行for循环遍历即可,这里就不多说了。

权限管理页面搭建

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


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

在admin下新建对应的html文件,修改grid.html的页面跳转以及g-9和g-9-1,g-9-2!然后打开auth_list.html页面,对权限进行for循环遍历即可,这里就不多说了。

角色管理页面搭建

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


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

在admin下新建对应的html文件,修改grid.html的页面跳转以及g-10和g-10-1,g-10-2!然后打开role_list.html页面,对角色进行for循环遍历即可,这里就不多说了。需要特别注意的是role_add.html页面有自己单独的css,需要你block一下。

管理员管理页面的搭建

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


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

在admin下新建对应的html文件,修改grid.html的页面跳转以及g-11和g-11-1,g-11-2!然后打开admin_list.html页面,对管理员进行for循环遍历即可,这里就不多说了。

至此,我们本篇关于后台页面搭建的介绍就到此为止了,感谢你的赏阅!下一篇,我们将正式进入到后台页面逻辑的开发了,希望你紧跟我的步伐,一步步敲下去,最后一个属于自己的微电影网站就会出现,那时的你心里乐开了花,我们期待着那样的一个你!

本篇笔记对应上传的仓库为:https://github.com/licheetools/movie对应第四篇。

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏帅小子的日常

redis集群的搭建

3835
来自专栏mini188

MongoDB安装与使用体验

1、获取并安装 具体的安装包可以到官方网站下载:http://www.mongodb.org/downloads 我看着教程就下载了linux版本吧,也不是很...

2476
来自专栏张善友的专栏

WS-Eventing、WS-Transfer Web服务标准

传输(Transfer)     WS-Transfer详细说明了对通过Web服务进行访问的数据实体进行管理所需的基本操作。要了解WS-Transfer需要介绍...

19410
来自专栏java思维导图

架构师详解:Nginx 架构

原文链接:https://my.oschina.net/u/3770281/blog/1802493

1572
来自专栏SnailTyan

Linux的/bin、/sbin、/usr/sbin、/usr/bin、/usr/local/bin、/usr/local/sbin

1、Linux的/bin、/sbin、/usr/sbin、/usr/bin、/usr/local/bin、/usr/local/sbin /bin bin为...

2409
来自专栏游戏杂谈

使用as工具包解压zip文件

在一些请求静态资源较多的地方,如webgame中要请求很多数值相关的信息,为了减少请求数以及请求的文件大小,可以通过zip工具先将文件合并后进行压缩,得到一个z...

1173
来自专栏静晴轩

详解 Cookie 纪要

从事 Web 开发已有近17个月;在学以致用的工作学习里,对于不怎么使用的部分,多少有些雾里探花的窘迫感~差不多是了解一二,然而又非真切的明晰;这就使得再用的时...

3539
来自专栏Java成长之路

解决session共享问题方式调研

为了提高服务器性能,最近公司项目采用了分布式服务集群的部署方式。所谓集群,就是让一组计算机服务器协同工作,解决大并发,大数据量瓶颈问题。项目使用nginx做负载...

2041
来自专栏Python

cookie详解

今天看到一篇cookie的文章,写的特别详细,感谢 晚晴幽草轩 的分享,原文链接http://mp.weixin.qq.com/s/NXrH7R8y2Dqxs9...

4463
来自专栏幸山的专栏

精通yum配置以及问题解决

yum基于RPM包管理,能够从指定的服务器自动下载RPM包并且安装,可以自动处理依赖性关系,提供了查找、安装、删除某一个、一组甚至全部软件包的命令,而且命令简洁...

1K0

扫码关注云+社区

领取腾讯云代金券