【Flask微电影】07.搭建后台页面-后台登陆、后台主页页面
2018-10-31 本文已影响52人
吾星喵
个人博客，欢迎查看：https://blog.starmeow.cn/
Github地址：https://github.com/xyliurui/FlaskMovie
搭建后台登陆页面
添加login.html登录页面
app/templates/admin/login.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/ 可以看到登录页面
image.png
添加后台登陆退出视图
添加到app/admin/views.py
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
<!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
{% extends 'admin/base.html' %}
{% block content %}
<h1>后台主页</h1>
{% endblock %}
image.png
修改后台主页视图
@admin.route("/")
def index():
return render_template('admin/index.html')
