您现在的位置是: 网站首页 >Flask >Flask搭建微电影视频网站 Flask
【Flask微电影】07.搭建后台页面-后台登陆、后台主页页面
admin2018年10月31日 17:02 【Flask | Python 】 2140人已围观
Flask搭建微电影视频网站简介 利用Flask搭建微电影视频网站 Github地址:https://github.com/xyliurui/FlaskMovie
Github地址:https://github.com/xyliurui/FlaskMovie ## 搭建后台登陆页面 ### 添加login.html登录页面 **app/templates/admin/login.html** ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>微电影管理系统</title> <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport"> <link rel="shortcut icon" href="{{ url_for('static',filename='base/images/logo.png') }}"> <link rel="stylesheet" href="{{ url_for('static',filename='admin/bootstrap/css/bootstrap.min.css') }}"> <link rel="stylesheet" href="{{ url_for('static',filename='fonts/css/font-awesome.min.css') }}"> <link rel="stylesheet" href="{{ url_for('static',filename='ionicons/css/ionicons.min.css') }}"> <link rel="stylesheet" href="{{ url_for('static',filename='admin/dist/css/AdminLTE.min.css') }}"> <link rel="stylesheet" href="{{ url_for('static',filename='admin/plugins/iCheck/square/blue.css') }}"> </head> <body class="hold-transition login-page"> <div class="login-box"> <div class="login-logo"> <a href=""><b>微电影管理系统</b></a> </div> <div class="login-box-body"> <p class="login-box-msg"></p> <form action="" method="post" id="form-data"> <div class="form-group has-feedback"> <input name="user" type="text" class="form-control" placeholder="请输入账号!"> <span class="glyphicon glyphicon-envelope form-control-feedback"></span> <div class="col-md-12" id="input_user"></div> </div> <div class="form-group has-feedback"> <input name="pwd" type="password" class="form-control" placeholder="请输入密码!"> <span class="glyphicon glyphicon-lock form-control-feedback"></span> <div class="col-md-12" id="input_pwd"></div> </div> <div class="row"> <div class="col-xs-8"> </div> <div class="col-xs-4"> <a id="btn-sub" type="submit" class="btn btn-primary btn-block btn-flat">登录</a> </div> </div> </form> </div> </div> <script src="{{ url_for('static',filename='admin/plugins/jQuery/jQuery-2.2.0.min.js') }}"></script> <script src="{{ url_for('static',filename='admin/bootstrap/js/bootstrap.min.js') }}"></script> <script src="{{ url_for('static',filename='admin/plugins/iCheck/icheck.min.js') }}"></script> </body> </html> ``` 访问 http://127.0.0.1:5000/admin/login/ 或 http://127.0.0.1:5000/admin/logout/ 可以看到登录页面 ![BLOG_20181031_170546_62](/media/blog/images/2018/10/BLOG_20181031_170546_62.png "博客图集BLOG_20181031_170546_62.png") ### 添加后台登陆退出视图 添加到**app/admin/views.py** ```python 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")) ``` ## 搭建后台主页页面 ### 添加base.html父模板 **app/templates/admin/base.html** ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>微电影管理系统</title> <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport"> <link rel="shortcut icon" href="{{ url_for('static',filename='base/images/logo.png') }}"> <link rel="stylesheet" href="{{ url_for('static',filename='admin/bootstrap/css/bootstrap.min.css') }}"> <link rel="stylesheet" href="{{ url_for('static',filename='fonts/css/font-awesome.min.css') }}"> <link rel="stylesheet" href="{{ url_for('static',filename='ionicons/css/ionicons.min.css') }}"> <link rel="stylesheet" href="{{ url_for('static',filename='admin/dist/css/AdminLTE.min.css') }}"> <link rel="stylesheet" href="{{ url_for('static',filename='admin/dist/css/skins/_all-skins.min.css') }}"> <link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='admin/plugins/datepicker/datepicker3.css') }}"> <style> * { font-family: "Microsoft YaHei"; } .table > tbody > tr > td, .table > tbody > tr > th, .table > tfoot > tr > td, .table > tfoot > tr > th, .table > thead > tr > td, .table > thead > tr > th { vertical-align: middle; text-align: center; } </style> {% block css %}{% endblock %} </head> <body class="hold-transition skin-blue sidebar-mini"> <div class="wrapper"> <header class="main-header"> <a href="index.html" class="logo"> <span class="logo-mini"><img src="{{ url_for('static',filename='base/images/logo.png') }}" style="height:40px;width:40px;">电影系统</span> <span class="logo-lg"><img src="{{ url_for('static',filename='base/images/logo.png') }}" style="height:40px;width:40px;">微电影管理系统</span> </a> <nav class="navbar navbar-static-top"> <a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button"> <span class="sr-only">下拉菜单</span> </a> <div class="navbar-custom-menu"> <ul class="nav navbar-nav"> <li class="dropdown user user-menu"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> <img src="{{ url_for('static',filename='admin/dist/img/user2-160x160.jpg') }}" class="user-image" alt="User Image"> <span class="hidden-xs">xxx</span> </a> <ul class="dropdown-menu"> <li class="user-header"> <img src="{{ url_for('static',filename='admin/dist/img/user2-160x160.jpg') }}" class="img-circle" alt="User Image"> <p> xxx <small>2017-06-01</small> </p> </li> <li class="user-footer"> <div class="pull-left"> <a href="pwd.html" class="btn btn-default btn-flat">修改密码</a> </div> <div class="pull-right"> <a href="{{ url_for('admin.logout') }}" class="btn btn-default btn-flat">退出系统</a> </div> </li> </ul> </li> </ul> </div> </nav> </header> <aside class="main-sidebar"> <section class="sidebar"> <div class="user-panel"> <div class="pull-left image"> <img src="{{ url_for('static',filename='admin/dist/img/user2-160x160.jpg') }}" class="img-circle" alt="User Image"> </div> <div class="pull-left info"> <p>用户xxx</p> <a href="#"><i class="fa fa-circle text-success"></i> 在线</a> </div> </div> <form action="#" method="get" class="sidebar-form"> <div class="input-group"> <input type="text" name="q" class="form-control" placeholder="搜索..."> <span class="input-group-btn"> <button type="submit" name="search" id="search-btn" class="btn btn-flat"><i class="fa fa-search"></i> </button> </span> </div> </form> <ul class="sidebar-menu"> <li class="header">管理菜单</li> <li class="treeview"> <a href="#"> <i class="fa fa-home" aria-hidden="true"></i> <span>首页</span> <span class="label label-primary pull-right">1</span> </a> <ul class="treeview-menu"> <li> <a href="index.html"> <i class="fa fa-circle-o"></i> 控制面板 </a> </li> </ul> </li> <li class="treeview"> <a href="#"> <i class="fa fa-tags" aria-hidden="true"></i> <span>标签管理</span> <span class="label label-primary pull-right">2</span> </a> <ul class="treeview-menu"> <li> <a href="tag_add.html"> <i class="fa fa-circle-o"></i> 添加标签 </a> </li> <li> <a href="tag_list.html"> <i class="fa fa-circle-o"></i> 标签列表 </a> </li> </ul> </li> <li class="treeview"> <a href="#"> <i class="fa fa-file-video-o" aria-hidden="true"></i> <span>电影管理</span> <span class="label label-primary pull-right">2</span> </a> <ul class="treeview-menu"> <li> <a href="movie_add.html"> <i class="fa fa-circle-o"></i> 添加电影 </a> </li> <li> <a href="movie_list.html"> <i class="fa fa-circle-o"></i> 电影列表 </a> </li> </ul> </li> <li class="treeview"> <a href="#"> <i class="fa fa-film" aria-hidden="true"></i> <span>预告管理</span> <span class="label label-primary pull-right">2</span> </a> <ul class="treeview-menu"> <li> <a href="preview_add.html"> <i class="fa fa-circle-o"></i> 添加预告 </a> </li> <li> <a href="preview_list.html"> <i class="fa fa-circle-o"></i> 预告列表 </a> </li> </ul> </li> <li class="treeview"> <a href="#"> <i class="fa fa-users" aria-hidden="true"></i> <span>会员管理</span> <span class="label label-primary pull-right">1</span> </a> <ul class="treeview-menu"> <li> <a href="user_list.html"> <i class="fa fa-circle-o"></i> 会员列表 </a> </li> </ul> </li> <li class="treeview"> <a href="#"> <i class="fa fa-comments" aria-hidden="true"></i> <span>评论管理</span> <span class="label label-primary pull-right">1</span> </a> <ul class="treeview-menu"> <li> <a href="comment_list.html"> <i class="fa fa-circle-o"></i> 评论列表 </a> </li> </ul> </li> <li class="treeview"> <a href="#"> <i class="fa fa-heart" aria-hidden="true"></i> <span>收藏管理</span> <span class="label label-primary pull-right">1</span> </a> <ul class="treeview-menu"> <li> <a href="moviecol_list.html"> <i class="fa fa-circle-o"></i> 收藏列表 </a> </li> </ul> </li> <li class="treeview"> <a href="#"> <i class="fa fa-file-text" aria-hidden="true"></i> <span>日志管理</span> <span class="label label-primary pull-right">3</span> </a> <ul class="treeview-menu"> <li> <a href="oplog_list.html"> <i class="fa fa-circle-o"></i> 操作日志列表 </a> </li> <li> <a href="adminloginlog_list.html"> <i class="fa fa-circle-o"></i> 管理员登录日志列表 </a> </li> <li> <a href="userloginlog_list.html"> <i class="fa fa-circle-o"></i> 会员登录日志列表 </a> </li> </ul> </li> <li class="treeview"> <a href="#"> <i class="fa fa-lock" aria-hidden="true"></i> <span>权限管理</span> <span class="label label-primary pull-right">2</span> </a> <ul class="treeview-menu"> <li> <a href="auth_add.html"> <i class="fa fa-circle-o"></i> 添加权限 </a> </li> <li> <a href="auth_list.html"> <i class="fa fa-circle-o"></i> 权限列表 </a> </li> </ul> </li> <li class="treeview"> <a href="#"> <i class="fa fa-user-secret" aria-hidden="true"></i> <span>角色管理</span> <span class="label label-primary pull-right">2</span> </a> <ul class="treeview-menu"> <li> <a href="role_add.html"> <i class="fa fa-circle-o"></i> 添加角色 </a> </li> <li> <a href="role_list.html"> <i class="fa fa-circle-o"></i> 角色列表 </a> </li> </ul> </li> <li class="treeview"> <a href="#"> <i class="fa fa-user-circle" aria-hidden="true"></i> <span>管理员管理</span> <span class="label label-primary pull-right">2</span> </a> <ul class="treeview-menu"> <li> <a href="admin_add.html"> <i class="fa fa-circle-o"></i> 添加管理员 </a> </li> <li> <a href="admin_list.html"> <i class="fa fa-circle-o"></i> 管理员列表 </a> </li> </ul> </li> </ul> </section> </aside> <div class="content-wrapper"> <!--内容--> {% block content %}{% endblock %} <!--内容--> </div> <footer class="main-footer"> <div class="pull-right hidden-xs"> <b>版本</b> 1.0 </div> <strong>版权 © 2017-2018 归<a href="">xxx</a>.</strong> 所有 </footer> <div class="control-sidebar-bg"></div> </div> <script src="{{ url_for('static',filename='admin/plugins/jQuery/jQuery-2.2.0.min.js') }}"></script> <script src="{{ url_for('static',filename='admin/bootstrap/js/bootstrap.min.js') }}"></script> <script src="{{ url_for('static',filename='admin/plugins/slimScroll/jquery.slimscroll.min.js') }}"></script> <script src="{{ url_for('static',filename='admin/plugins/fastclick/fastclick.js') }}"></script> <script src="{{ url_for('static',filename='admin/dist/js/app.min.js') }}"></script> <script src="{{ url_for('static',filename='admin/dist/js/demo.js') }}"></script> <script src="//cdn.bootcss.com/holder/2.9.4/holder.min.js"></script> <script src="{{ url_for('static',filename='admin/plugins/datepicker/bootstrap-datepicker.js') }}"></script> <script src="{{ url_for('static',filename='admin/plugins/datepicker/locales/bootstrap-datepicker.zh-CN.js') }}" charset="UTF-8"></script> {% block js %}{% endblock %} </body> </html> ``` ### 添加index.html主页模板 **app/templates/admin/index.html** ```html {% extends 'admin/base.html' %} {% block content %} <h1>后台主页</h1> {% endblock %} ``` ![BLOG_20181031_171009_35](/media/blog/images/2018/10/BLOG_20181031_171009_35.png "博客图集BLOG_20181031_171009_35.png") ### 修改后台主页视图 ```python @admin.route("/") def index(): return render_template('admin/index.html') ```
很赞哦! (5)
相关文章
文章交流
- emoji
当前用户
未登录,点击 登录专题目录
- 【Flask微电影】01.环境搭建项目目录分析
- 【Flask微电影】02.使用蓝图构建项目目录
- 【Flask微电影】03.安装mysql数据库及配置
- 【Flask微电影】04.定义数据模型,生成数据表和初始用户
- 【Flask微电影】05.搭建前台页面-会员登录注册和会员中心
- 【Flask微电影】06.搭建前台页面-电影列表、搜索播放页面
- 【Flask微电影】07.搭建后台页面-后台登陆、后台主页页面
- 【Flask微电影】08.搭建后台页面-密码修改、主页控制面板
- 【Flask微电影】09.搭建后台页面-标签管理、电影管理、预告管理
- 【Flask微电影】10.搭建后台页面-会员管理、评论管理
- 【Flask微电影】11.搭建后台页面-收藏管理、日志管理
- 【Flask微电影】12.搭建后台页面-权限管理、角色管理、管理员管理
- 【Flask微电影】13.管理员登录、退出、装饰器进行访问控制
- 【Flask微电影】14.电影标签管理:增删查改
- 【Flask微电影】15.电影内容管理:增删查改
- 【Flask微电影】16.电影预告管理:增删查改
- 【Flask微电影】17.网站会员管理:查看会员和删除
- 【Flask微电影】18.电影评论管理:评论列表和删除
- 【Flask微电影】19.用户收藏电影:收藏列表和删除
- 【Flask微电影】20.会员修改密码,表单下拉列表同步数据库
- 【Flask微电影】21.基于角色访问控制-权限管理:增删查改
- 【Flask微电影】22.基于角色访问控制-角色管理:增删查改
- 【Flask微电影】23.基于角色访问控制-管理员管理和访问权限控制
- 【Flask微电影】24.前台会员中心,会员注册登录退出
- 【Flask微电影】25.会员中心登录要求,会员资料和密码修改
- 【Flask微电影】26.电影会员评论、会员登录日志、会员收藏列表
- 【Flask微电影】27.电影页面上映轮播预告,搜索、标签筛选列表
- 【Flask微电影】28.电影播放详情,评论,显示评论列表
- 【Flask微电影】29.电影收藏功能,增加电影播放弹幕
- 【Flask微电影】30.项目完成检查,nginx部署网站