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 内容拷贝过来并修改所有的静态文件
后台布局搭建
mark
template admin 中创建后台的 admin.html 将 tpl 目录下的 admin.html 拷贝过来
菜单是大家都共用的部分, 将这个菜单剪切走
mark
将 admin 中下图的菜单部分剪切走创建 grid.html 粘贴进去
mark
mark
在 admin 的内容注释部分添加大家可以重写的内容部分数据块
同样操作, 添加 js 的数据块
mark
同理 CSS 数据块添加到 head 中, 无图
自行替换静态资源环节
将我们已经有的 url 地址如 admin.logout 替换进去
mark
实际访问
新建 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 文件
mark
重复了太多遍的工作: 继承 admin 然后把 tpl 下内容部分搞过来
mark
将 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 数据块中内容加上
第六章完结 后台页面搭建完成
来源: http://www.jianshu.com/p/c5a976561435