8- Flask构建弹幕微电影网站-后台页面搭建
已上线演示地址: http://movie.mtianyan.cn
项目源码地址:https://github.com/mtianyan/movie_project
flask打造一个微电影弹幕网站。
第六节: 后台页面搭建
后台页面搭建
mark管理员登录页面搭建
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内容拷贝过来并修改所有的静态文件。
后台布局搭建
marktemplate admin中创建后台的admin.html将tpl目录下的admin.html拷贝过来
菜单是大家都共用的部分,将这个菜单剪切走。
mark将admin中下图的菜单部分剪切走。创建grid.html粘贴进去
mark mark在admin的内容注释部分添加大家可以重写的内容部分数据块。
同样操作,添加js的数据块
mark同理css数据块添加到head中,无图
mark自行替换静态资源环节
将我们已经有的url地址如admin.logout替换进去。
实际访问
新建admin: index.html
mark@admin.route("/")
def index():
return render_template("admin/index.html")
此时访问后台可以访问到:
mark修改密码界面搭建
@admin.route("/pwd/")
def pwd():
"""
后台密码修改
"""
return render_template("admin/pwd.html")
创建pwd.html,找到tpl中pwd的html
mark将内容注释块中的拿过来
此时验证访问可以成功。但是右上角的修改密码没有链接过来,自己前往admin.html添加
mark控制面板搭建
修改指向首页的view函数
@admin.route("/")
def index():
"""
首页系统管理
"""
return render_template("admin/index.html")
将后台中后台首页部分替换成tpl/admin/index.html中的内容部分
mark修改grid.html中的首页控制面板链接。
内存的使用率没有显示。
所以要在index.html中将echarts引入进来
mark点击首页并没有激活该项。
前往 grid.html给菜单和菜单项都给上id值
mark前往index中添加jQuery为id项添加class
mark标签管理页面搭建
@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
- treeview 后面的菜单id
- li 标签后的菜单项id
为了以后不用一个一个修改,这里按照上面这个规则一次性修改完
然后修改grid中标签相关的链接
mark创建taglist和tagadd的html文件
markmark重复了太多遍的工作: 继承admin 然后把tpl下内容部分搞过来。
将jQuery添加class的代码分别复制到add list 修改为g-2-1 | 2
标签列表中为了效果,添加for循环。
mark电影管理页面搭建
@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
mark mark将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数据块中内容加上。
第六章完结 后台页面搭建完成。