已上线演示地址:

项目源码地址：

flask打造一个微电影弹幕网站。

第六节: 后台页面搭建

后台页面搭建

管理员登录页面搭建

app/admin/views.py

@admin.route("/login/")def login():    """    后台登录    """    return render_template("admin/login.html")@admin.route("/logout/")def logout():    """    后台注销登录    """    return redirect(url_for("admin.login"))

创建login.html,将tpl admin/login内容拷贝过来并修改所有的静态文件。

后台布局搭建

template admin中创建后台的admin.html将tpl目录下的admin.html拷贝过来

菜单是大家都共用的部分，将这个菜单剪切走。

将admin中下图的菜单部分剪切走。创建grid.html粘贴进去

在admin的内容注释部分添加大家可以重写的内容部分数据块。

同样操作，添加js的数据块

同理css数据块添加到head中，无图

自行替换静态资源环节

将我们已经有的url地址如admin.logout替换进去。

实际访问

新建admin: index.html

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

此时访问后台可以访问到:

修改密码界面搭建

@admin.route("/pwd/")def pwd():    """    后台密码修改    """    return render_template("admin/pwd.html")

创建pwd.html,找到tpl中pwd的html

将内容注释块中的拿过来

此时验证访问可以成功。但是右上角的修改密码没有链接过来，自己前往admin.html添加

控制面板搭建

修改指向首页的view函数

@admin.route("/")def index():    """    首页系统管理    """    return render_template("admin/index.html")

将后台中后台首页部分替换成tpl/admin/index.html中的内容部分

修改grid.html中的首页控制面板链接。

内存的使用率没有显示。

所以要在index.html中将echarts引入进来

点击首页并没有激活该项。

前往 grid.html给菜单和菜单项都给上id值

前往index中添加jQuery为id项添加class

标签管理页面搭建

@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中给上id

1. treeview 后面的菜单id
2. li 标签后的菜单项id

为了以后不用一个一个修改，这里按照上面这个规则一次性修改完

然后修改grid中标签相关的链接

创建taglist和tagadd的html文件

重复了太多遍的工作: 继承admin 然后把tpl下内容部分搞过来。

将jQuery添加class的代码分别复制到add list 修改为g-2-1 | 2

标签列表中为了效果，添加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中跳转过来的url
• 新建movie_add movie_list html

继承admin 然后content替换为对应html中content，Script标签中修改jquery操作的id

为对应id。

movie_add中的播放器支持的js需要拷贝过去。

修改static静态文件目录

上映预告管理页面搭建

@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")

新建preview_add.html & preview_list.html

然后继续继承admin 复制content过来。修改g-4-1 | 2

• 修改grid 中跳转过来的链接

会员管理页面搭建

@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_list.html & user_view.html

然后继续继承admin 复制content过来。修改g-5-1

• 修改grid 中跳转到user_list的链接

将user中的查看链接修改为跳转至user_view

将user_view独有的css拿过来。

评论管理页面搭建

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

新建comment_list.html

然后继续继承admin 复制content过来。修改g-6-1

• 修改grid 中跳转过来的链接

修改static文件路径并把css数据块中内容加上。

收藏管理页面搭建

@admin.route("/moviecol/list/")def moviecol_list():    """    电影收藏    """    return render_template("admin/moviecol_list.html")

新建moviecol_list.html

然后继续继承admin 复制content过来。修改g-7-1

• 修改grid 中跳转过来的链接

修改static文件路径并把css数据块中内容加上。

日志管理页面搭建

@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")

新建oplog_list.html adminloginlog_list.html userloginlog_list.html

然后继续继承admin 复制content过来。修改g-8-1 g-8-2 g-8-3

• 修改grid 中跳转过来的链接

修改static文件路径并把css数据块中内容加上(本小节没有需要修改的static文件路径)。

权限管理页面搭建

@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")

新建auth_add.html auth_list.html

然后继续继承admin 复制content过来。修改g-9-1 g-9-2

• 修改grid 中跳转过来的链接

修改static文件路径并把css数据块中内容加上。

角色管理

@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")

新建role_add.html role_list.html

然后继续继承admin 复制content过来。修改g-10-1 g-10-2

• 修改grid 中跳转过来的链接

修改static文件路径并把css数据块中内容加上。

管理员管理页面的搭建

@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_add.html admin_list.html

然后继续继承admin 复制content过来。修改g-11-1 g-11-2

• 修改grid 中跳转过来的链接

修改static文件路径并把css数据块中内容加上。

第六章完结 后台页面搭建完成。