关于博主
努力与运动兼备～~~有任何问题可以加我好友或者关注微信公众号，欢迎交流，我们一起进步！
微信公众号: 啃饼思录
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/就出现了后台管理页面:
修改密码界面搭建
老规矩，在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")
接着修改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")
接着就在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")
还要注意user-view.html页面，有一段自己独有的css:
评论管理页面搭建
# 评论列表
@admin.route('/comment/list')
def comment_list():
return render_template("admin/comment_list.html")
收藏管理页面搭建
# 电影收藏
@admin.route('/moviecol/list')
def moviecol_list():
return render_template("admin/moviecol_list.html")
日志管理页面搭建
# 操作日志列表
@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对应第四篇。
网友评论