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内容拷贝过来并修改所有的静态文件。

后台布局搭建

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

  1. treeview 后面的菜单id
  2. 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数据块中内容加上。

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏nice_每一天

linux CentOS6.5 yum安装mysql 5.6

3.随便在你存放文件的目录下执行,这里解释一下,由于这个mysql的yum源服务器在国外,所以下载速度会比较慢,还好mysql5.6只有79M大,而mysql5...

1562
来自专栏繁花云

私有git仓库gitlab搭建教程

最近比较无聊,想研究下gitlab,所以就尝试了一下centos7下面gitlab的搭建

1700
来自专栏云市场·精选汇

如何巧妙解决小程序缓存问题,这5点你都知道吗?

清除缓存是我们开发者经常做的一个操作,我们需要在判断客户端在缺少缓存数据的情况下做出相应的处理

1.2K4
来自专栏区块链

XSS攻击入门

反射性XSS XSS又叫CSS(Cross Site Script)跨站脚本攻击。它指的是恶意攻击者往Web页面TM入恶意代码,当用户浏览该页之时。嵌入其中We...

2695
来自专栏云加头条

微信小程序开发工具,腾讯云服务支持PHP语言啦!

如今,触手可及、用完即走的微信小程序受到了众多企业、商家的追捧,单一的NodeJS语言已无法满足广大用户人群。因此,昨日腾讯云工具新增了使用人群更为广泛的PHP...

1K1
来自专栏iOS开发随笔

React Native安装react-native-vector-icons出现错

1002
来自专栏技术翻译

如何在微服务之间共享和同步代码

微服务架构非常适合构建可扩展的代码库,具有更少的耦合,更好的关注点分离,更高的弹性,结合不同的技术,最重要的是,更好的模块化和构建它的组件的可重用性。

2180
来自专栏狂码一生

使用 Nginx 为 Linux 实例绑定多个域名

2144
来自专栏calvin

xamarin.forms uwp app部署到手机移动设备进行测试,真机调试(device portal方式部署)

最近学习xamarin。刚好 手上有一个lumia 930.所以试一试把uwp app部署到手机上,并真机调试一把。

1191
来自专栏zhisheng

听说你要做网站

现代 Web 后端技术超入门 引言 现在房价这么高,作为一个程序员只能靠做个网站看能不能卖出 100 万这样搏一手了。这里尝试介绍一下现代 Web 后端并解释一...

3698

扫码关注云+社区