您现在的位置是：网站首页 >Flask >Flask搭建微电影视频网站 Flask

【Flask微电影】07.搭建后台页面-后台登陆、后台主页页面

admin2018年10月31日 17:02 【Flask | Python 】 2114人已围观

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') ```