Flask 构建微电影视频网站(三)
搭建后台页面
视图函数位于admin文件夹下, app/admin/views.py
管理员登录页面搭建
视图函数
@admin.route('/')
def index():
return '后台主页'
@admin.route('/login/')
def login():
return render_template('admin/login.html')
@admin.route('/logout/')
def logout():
return redirect(url_for('admin.login'))
新建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>
后台布局搭建
新建app/templates/admin/admin.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="{{ url_for('admin.index') }}" 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>
{% include 'admin/grid.html' %}
</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>
新建app/templates/admin/grid.html, 左侧菜单栏
<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>
视图函数做修改
@admin.route('/')
def index():
return render_template('admin/index.html')
新建一个app/templates/admin/index.html,测试
{% extends 'admin/admin.html' %}
{% block content %}
<h1>hello</h1>
{% endblock %}
修改密码页面搭建
视图函数
@admin.route('/pwd/')
def pwd():
return render_template('admin/pwd.html')
新建app/templates/admin/pwd.html
{% extends 'admin/admin.html' %}
{% block content %}
<section class="content-header">
<h1>微电影管理系统</h1>
<ol class="breadcrumb">
<li><a href="#"><i class="fa fa-dashboard"></i> 个人资料</a></li>
<li class="active">修改密码</li>
</ol>
</section>
<section class="content" id="showcontent">
<div class="row">
<div class="col-md-12">
<div class="box box-primary">
<div class="box-header with-border">
<h3 class="box-title">修改密码</h3>
</div>
<form role="form">
<div class="box-body">
<div class="form-group">
<label for="input_pwd">旧密码</label>
<input type="password" class="form-control" id="input_pwd" placeholder="请输入旧密码！">
</div>
<div class="form-group">
<label for="input_newpwd">新密码</label>
<input type="password" class="form-control" id="input_newpwd" placeholder="请输入新密码！">
</div>
</div>
<div class="box-footer">
<button type="submit" class="btn btn-primary">修改</button>
</div>
</form>
</div>
</div>
</div>
</section>
{% endblock %}
修改一下admin.html中的修改密码链接
<a href="{{ url_for('admin.pwd') }}" class="btn btn-default btn-flat">修改密码</a>
控制面板页面搭建
视图函数使用的是index
修改index.html内容
{% extends 'admin/admin.html' %}
{% block content %}
<section class="content-header">
<h1>微电影管理系统</h1>
<ol class="breadcrumb">
<li><a href="#"><i class="fa fa-dashboard"></i> 首页</a></li>
<li class="active">控制面板</li>
</ol>
</section>
<section class="content" id="showcontent">
<div class="row">
<div class="col-md-6">
<div class="box box-primary">
<div class="box-header with-border">
<h3 class="box-title">内存使用率</h3>
</div>
<div class="box-body" id="meminfo" style="height:600px;"></div>
</div>
</div>
<div class="col-md-6">
<div class="box box-primary">
<div class="box-header with-border">
<h3 class="box-title">系统设置</h3>
</div>
<form role="form">
<div class="box-body" style="height:600px;">
<div class="form-group">
<label for="input_speed">限制速率大小</label>
<input type="text" class="form-control" id="input_speed" placeholder="请输入限制速率！"
value="512">
</div>
<div class="form-group">
<label for="input_mem">限制内存大小</label>
<input type="text" class="form-control" id="input_mem" placeholder="请输入限制内存！"
value="10m">
</div>
<div class="form-group">
<label for="input_num">限制客户端数量</label>
<input type="text" class="form-control" id="input_num" placeholder="请输入限制客户端数量！"
value="4">
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary">保存并重启服务</button>
</div>
</div>
</form>
</div>
</div>
</div>
</section>
{% endblock %}
{% block js %}
<script src="{{ url_for('static',filename='js/echarts.min.js') }}"></script>
<script>
var myChart = echarts.init(document.getElementById('meminfo'));
option = {
backgroundColor: "white",
tooltip: {
formatter: "{a} <br/>{b} : {c}%"
},
toolbox: {
feature: {
restore: {},
saveAsImage: {}
}
},
series: [{
name: '内存使用率',
type: 'gauge',
detail: {
formatter: '{value}%'
},
data: [{
value: 50,
name: '内存使用率'
}]
}]
};
setInterval(function () {
option.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0;
myChart.setOption(option, true);
}, 2000);
</script>
<script>
$(document).ready(function () {
$('#g-1').addClass('active');
$('#g-1-1').addClass('active');
})
</script>
{% endblock %}
修改grid.html文件,让控制面板点击时处于激活状态
<li class="header">管理菜单</li>
<li class="treeview" id="g-1">
<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 id="g-1-1">
<a href="{{ url_for('admin.index') }}">
<i class="fa fa-circle-o"></i> 控制面板
</a>
</li>
</ul>
</li>
标签管理页面搭建
视图函数
@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')
新建tag_add.html
{% extends 'admin/admin.html' %}
{% block content %}
<section class="content-header">
<h1>微电影管理系统</h1>
<ol class="breadcrumb">
<li><a href="#"><i class="fa fa-dashboard"></i> 标签管理</a></li>
<li class="active">添加标签</li>
</ol>
</section>
<section class="content" id="showcontent">
<div class="row">
<div class="col-md-12">
<div class="box box-primary">
<div class="box-header with-border">
<h3 class="box-title">添加标签</h3>
</div>
<form role="form">
<div class="box-body">
<div class="form-group">
<label for="input_name">标签名称</label>
<input type="text" class="form-control" id="input_name" placeholder="请输入标签名称！">
</div>
</div>
<div class="box-footer">
<button type="submit" class="btn btn-primary">添加</button>
</div>
</form>
</div>
</div>
</div>
</section>
{% endblock %}
{% block js %}
<script>
$(document).ready(function () {
$('#g-2').addClass('active');
$('#g-2-1').addClass('active');
})
</script>
{% endblock %}
新建tag_list.html文件
{% extends 'admin/admin.html' %}
{% block content %}
<section class="content-header">
<h1>微电影管理系统</h1>
<ol class="breadcrumb">
<li><a href="#"><i class="fa fa-dashboard"></i> 标签管理</a></li>
<li class="active">标签列表</li>
</ol>
</section>
<section class="content" id="showcontent">
<div class="row">
<div class="col-md-12">
<div class="box box-primary">
<div class="box-header">
<h3 class="box-title">标签列表</h3>
<div class="box-tools">
<div class="input-group input-group-sm" style="width: 150px;">
<input type="text" name="table_search" class="form-control pull-right"
placeholder="请输入关键字...">
<div class="input-group-btn">
<button type="submit" class="btn btn-default"><i class="fa fa-search"></i>
</button>
</div>
</div>
</div>
</div>
<div class="box-body table-responsive no-padding">
<table class="table table-hover">
<tbody>
<tr>
<th>编号</th>
<th>名称</th>
<th>添加时间</th>
<th>操作事项</th>
</tr>
<tr>
<td>1</td>
<td>科幻</td>
<td>2017-06-01</td>
<td>
<a class="label label-success">编辑</a>
<a class="label label-danger">删除</a>
</td>
</tr>
</tbody>
</table>
</div>
<div class="box-footer clearfix">
<ul class="pagination pagination-sm no-margin pull-right">
<li><a href="#">首页</a></li>
<li><a href="#">上一页</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">下一页</a></li>
<li><a href="#">尾页</a></li>
</ul>
</div>
</div>
</div>
</div>
</section>
{% endblock %}
{% block js %}
<script>
$(document).ready(function () {
$('#g-2').addClass('active');
$('#g-2-2').addClass('active');
})
</script>
{% endblock %}
修改grid.html文件
<li class="treeview" id="g-2">
<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 id="g-2-1">
<a href="{{ url_for('admin.tag_add') }}">
<i class="fa fa-circle-o"></i> 添加标签
</a>
</li>
<li id="g-2-2">
<a href="{{ url_for('admin.tag_list') }}">
<i class="fa fa-circle-o"></i> 标签列表
</a>
</li>
</ul>
</li>
电影管理页面搭建
视图函数
@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')
新建app/templates/admin/movie_add.html
{% extends 'admin/admin.html' %}
{% block content %}
<section class="content-header">
<h1>微电影管理系统</h1>
<ol class="breadcrumb">
<li><a href="#"><i class="fa fa-dashboard"></i> 电影管理</a></li>
<li class="active">添加电影</li>
</ol>
</section>
<section class="content" id="showcontent">
<div class="row">
<div class="col-md-12">
<div class="box box-primary">
<div class="box-header with-border">
<h3 class="box-title">添加电影</h3>
</div>
<form role="form">
<div class="box-body">
<div class="form-group">
<label for="input_title">片名</label>
<input type="text" class="form-control" id="input_title" placeholder="请输入片名！">
</div>
<div class="form-group">
<label for="input_url">文件</label>
<input type="file" id="input_url">
<div style="margin-top:5px;">
<div id="moviecontainer"></div>
</div>
</div>
<div class="form-group">
<label for="input_info">介绍</label>
<textarea class="form-control" rows="10" id="input_info"></textarea>
</div>
<div class="form-group">
<label for="input_logo">封面</label>
<input type="file" id="input_logo">
<img data-src="holder.js/262x166" style="margin-top:5px;" class="img-responsive"
alt="">
</div>
<div class="form-group">
<label for="input_star">星级</label>
<select class="form-control" id="input_star">
<option value="1">1星</option>
<option value="2">2星</option>
<option value="3">3星</option>
<option value="4">4星</option>
<option value="5">5星</option>
</select>
</div>
<div class="form-group">
<label for="input_tag_id">标签</label>
<select class="form-control" id="input_tag_id">
<option value="1">科幻</option>
<option value="2">冒险</option>
<option value="3">爱情</option>
<option value="4">动作</option>
<option value="5">战争</option>
</select>
</div>
<div class="form-group">
<label for="input_area">地区</label>
<input type="text" class="form-control" id="input_area" placeholder="请输入地区！">
</div>
<div class="form-group">
<label for="input_length">片长</label>
<input type="text" class="form-control" id="input_length" placeholder="请输入片长！">
</div>
<div class="form-group">
<label for="input_release_time">上映时间</label>
<input type="text" class="form-control" id="input_release_time"
placeholder="请选择上映时间！">
</div>
</div>
<div class="box-footer">
<button type="submit" class="btn btn-primary">添加</button>
</div>
</form>
</div>
</div>
</div>
</section>
{% endblock %}
{% block js %}
<script src="{{ url_for('static',filename='jwplayer/jwplayer.js') }}"></script>
<script type="text/javascript">
jwplayer.key = "P9VTqT/X6TSP4gi/hy1wy23BivBhjdzVjMeOaQ==";
</script>
<script type="text/javascript">
jwplayer("moviecontainer").setup({
flashplayer: "{{ url_for('static',filename='jwplayer/jwplayer.flash.swf') }}",
playlist: [{
file: "{{ url_for('static',filename='video/htpy.mp4') }}",
title: "环太平洋"
}],
modes: [{
type: "html5"
}, {
type: "flash",
src: "{{ url_for('static',filename='jwplayer/jwplayer.flash.swf') }}"
}, {
type: "download"
}],
skin: {
name: "vapor"
},
"playlist.position": "left",
"playlist.size": 200,
height: 250,
width: 387,
});
</script>
<script>
$(document).ready(function () {
$('#input_release_time').datepicker({
autoclose: true,
format: 'yyyy-mm-dd',
language: 'zh-CN',
});
});
</script>
<script>
$(document).ready(function () {
$('#g-3').addClass('active');
$('#g-3-1').addClass('active');
})
</script>
{% endblock %}
新建app/templates/admin/movie_list.html
{% extends 'admin/admin.html' %}
{% block content %}
<section class="content-header">
<h1>微电影管理系统</h1>
<ol class="breadcrumb">
<li><a href="#"><i class="fa fa-dashboard"></i> 电影管理</a></li>
<li class="active">电影列表</li>
</ol>
</section>
<section class="content" id="showcontent">
<div class="row">
<div class="col-md-12">
<div class="box box-primary">
<div class="box-header">
<h3 class="box-title">电影列表</h3>
<div class="box-tools">
<div class="input-group input-group-sm" style="width: 150px;">
<input type="text" name="table_search" class="form-control pull-right"
placeholder="请输入关键字...">
<div class="input-group-btn">
<button type="submit" class="btn btn-default"><i class="fa fa-search"></i>
</button>
</div>
</div>
</div>
</div>
<div class="box-body table-responsive no-padding">
<table class="table table-hover">
<tbody>
<tr>
<th>编号</th>
<th>片名</th>
<th>片长</th>
<th>标签</th>
<th>地区</th>
<th>星级</th>
<th>播放数量</th>
<th>评论数量</th>
<th>上映时间</th>
<th>操作事项</th>
</tr>
{% for foo in range(0,10) %}
<tr>
<td>1</td>
<td>环太平洋</td>
<td>5分钟</td>
<td>科幻</td>
<td>美国</td>
<td>5</td>
<td>0</td>
<td>0</td>
<td>2017-01-01</td>
<td>
<a class="label label-success">编辑</a>
<a class="label label-danger">删除</a>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
<div class="box-footer clearfix">
<ul class="pagination pagination-sm no-margin pull-right">
<li><a href="#">首页</a></li>
<li><a href="#">上一页</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">下一页</a></li>
<li><a href="#">尾页</a></li>
</ul>
</div>
</div>
</div>
</div>
</section>
{% endblock %}
{% block js %}
<script>
$(document).ready(function () {
$('#g-3').addClass('active');
$('#g-3-2').addClass('active');
})
</script>
{% endblock %}
修改grid.html文件
<li class="treeview" id="g-3">
<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 id="g-3-1">
<a href="{{ url_for('admin.movie_add') }}">
<i class="fa fa-circle-o"></i> 添加电影
</a>
</li>
<li id="g-3-2">
<a href="{{ url_for('admin.movie_list') }}">
<i class="fa fa-circle-o"></i> 电影列表
</a>
</li>
</ul>
</li>
上映预告管理页面搭建
视图函数
@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')
新建app/templates/admin/preview_add.html
{% extends 'admin/admin.html' %}
{% block content %}
<section class="content-header">
<h1>微电影管理系统</h1>
<ol class="breadcrumb">
<li><a href="#"><i class="fa fa-dashboard"></i> 预告管理</a></li>
<li class="active">添加预告</li>
</ol>
</section>
<section class="content" id="showcontent">
<div class="row">
<div class="col-md-12">
<div class="box box-primary">
<div class="box-header with-border">
<h3 class="box-title">添加预告</h3>
</div>
<form role="form">
<div class="box-body">
<div class="form-group">
<label for="input_title">预告标题</label>
<input type="text" class="form-control" id="input_title" placeholder="请输入预告标题！">
</div>
<div class="form-group">
<label for="input_logo">预告封面</label>
<input type="file" id="input_logo">
<img data-src="holder.js/700x320" style="margin-top:5px;" class="img-responsive"
alt="">
</div>
</div>
<div class="box-footer">
<button type="submit" class="btn btn-primary">添加</button>
</div>
</form>
</div>
</div>
</div>
</section>
{% endblock %}
{% block js %}
<script>
$(document).ready(function () {
$('#g-4').addClass('active');
$('#g-4-1').addClass('active');
})
</script>
{% endblock %}
新建app/templates/admin/preview_list.html
{% extends 'admin/admin.html' %}
{% block content %}
<section class="content-header">
<h1>微电影管理系统</h1>
<ol class="breadcrumb">
<li><a href="#"><i class="fa fa-dashboard"></i> 预告管理</a></li>
<li class="active">预告列表</li>
</ol>
</section>
<section class="content" id="showcontent">
<div class="row">
<div class="col-md-12">
<div class="box box-primary">
<div class="box-header">
<h3 class="box-title">预告列表</h3>
<div class="box-tools">
<div class="input-group input-group-sm" style="width: 150px;">
<input type="text" name="table_search" class="form-control pull-right"
placeholder="请输入关键字...">
<div class="input-group-btn">
<button type="submit" class="btn btn-default"><i class="fa fa-search"></i>
</button>
</div>
</div>
</div>
</div>
<div class="box-body table-responsive no-padding">
<table class="table table-hover">
<tbody>
<tr>
<th>编号</th>
<th>预告标题</th>
<th>预告封面</th>
<th>添加时间</th>
<th>操作事项</th>
</tr>
<tr>
<td>1</td>
<td>环太平洋</td>
<td>
<img data-src="holder.js/140x64" class="img-responsive center-block" alt="">
</td>
<td>2017-06-01</td>
<td>
<a class="label label-success">编辑</a>
<a class="label label-danger">删除</a>
</td>
</tr>
</tbody>
</table>
</div>
<div class="box-footer clearfix">
<ul class="pagination pagination-sm no-margin pull-right">
<li><a href="#">首页</a></li>
<li><a href="#">上一页</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">下一页</a></li>
<li><a href="#">尾页</a></li>
</ul>
</div>
</div>
</div>
</div>
</section>
{% endblock %}
{% block js %}
<script>
$(document).ready(function () {
$('#g-4').addClass('active');
$('#g-4-2').addClass('active');
})
</script>
{% endblock %}
修改app/templates/admin/grid.html
<li class="treeview" id="g-4">
<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 id="g-4-1">
<a href="{{ url_for('admin.preview_add') }}">
<i class="fa fa-circle-o"></i> 添加预告
</a>
</li>
<li id="g-4-2">
<a href="{{ url_for('admin.preview_list') }}">
<i class="fa fa-circle-o"></i> 预告列表
</a>
</li>
</ul>
</li>
会员管理页面搭建
视图函数
@admin.route('/user/view/')
def user_view():
return render_template('admin/user_view.html')
@admin.route('/user/list/')
def user_list():
return render_template('admin/user_list.html')
新建app/templates/admin/user_list.html
{% extends 'admin/admin.html' %}
{% block content %}
<section class="content-header">
<h1>微电影管理系统</h1>
<ol class="breadcrumb">
<li><a href="#"><i class="fa fa-dashboard"></i> 会员管理</a></li>
<li class="active">会员列表</li>
</ol>
</section>
<section class="content" id="showcontent">
<div class="row">
<div class="col-md-12">
<div class="box box-primary">
<div class="box-header">
<h3 class="box-title">会员列表</h3>
<div class="box-tools">
<div class="input-group input-group-sm" style="width: 150px;">
<input type="text" name="table_search" class="form-control pull-right"
placeholder="请输入关键字...">
<div class="input-group-btn">
<button type="submit" class="btn btn-default"><i class="fa fa-search"></i>
</button>
</div>
</div>
</div>
</div>
<div class="box-body table-responsive no-padding">
<table class="table table-hover">
<tbody>
<tr>
<th>编号</th>
<th>昵称</th>
<th>邮箱</th>
<th>手机</th>
<th>头像</th>
<th>状态</th>
<th>注册时间</th>
<th>操作事项</th>
</tr>
<tr>
<td>1</td>
<td>拓荒者</td>
<td>1780316635@qq.com</td>
<td>13700632835</td>
<td>
<img data-src="holder.js/50x50" class="img-responsive center-block" alt="">
</td>
<td>正常/冻结</td>
<td>2017-06-01 12:00:00</td>
<td>
<a class="label label-success" href="{{ url_for('admin.user_view') }}">查看</a>
<a class="label label-info">解冻</a>
<a class="label label-warning">冻结</a>
<a class="label label-danger">删除</a>
</td>
</tr>
</tbody>
</table>
</div>
<div class="box-footer clearfix">
<ul class="pagination pagination-sm no-margin pull-right">
<li><a href="#">首页</a></li>
<li><a href="#">上一页</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">下一页</a></li>
<li><a href="#">尾页</a></li>
</ul>
</div>
</div>
</div>
</div>
</section>
{% endblock %}
{% block js %}
<script>
$(document).ready(function () {
$('#g-5').addClass('active');
$('#g-5-1').addClass('active');
})
</script>
{% endblock %}
新建app/templates/admin/user_view.html
{% extends 'admin/admin.html' %}
{% block css %}
<style>
.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:left;
}
.td_bd{
font-weight:bold;
}
</style>
{% endblock %}
{% block content %}
<section class="content-header">
<h1>微电影管理系统</h1>
<ol class="breadcrumb">
<li><a href="#"><i class="fa fa-dashboard"></i> 会员管理</a></li>
<li class="active">查看会员</li>
</ol>
</section>
<section class="content" id="showcontent">
<div class="row">
<div class="col-md-12">
<div class="box box-primary">
<div class="box-header">
<h3 class="box-title">会员详情</h3>
</div>
<div class="box-body table-responsive no-padding">
<table class="table table-hover">
<tbody>
<tr>
<td class="td_bd">编号：</td>
<td>1</td>
</tr>
<tr>
<td class="td_bd">昵称：</td>
<td>拓荒者</td>
</tr>
<tr>
<td class="td_bd">邮箱：</td>
<td>1780316635@qq.com</td>
</tr>
<tr>
<td class="td_bd">手机：</td>
<td>13700632835</td>
</tr>
<tr>
<td class="td_bd">头像：</td>
<td>
<img data-src="holder.js/100x100" class="img-responsive" alt="">
</td>
</tr>
<tr>
<td class="td_bd">注册时间：</td>
<td>
2017-01-01 12:00:00
</td>
</tr>
<tr>
<td class="td_bd">唯一标志符：</td>
<td>
xxxxxx
</td>
</tr>
<tr>
<td class="td_bd">个性简介：</td>
<td>
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</section>
{% endblock %}
{% block js %}
<script>
$(document).ready(function () {
$('#g-5').addClass('active');
})
</script>
{% endblock %}
修改app/templates/admin/grid.html文件
<li class="treeview" id="g-5">
<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 id="g-5-1">
<a href="{{ url_for('admin.user_list') }}">
<i class="fa fa-circle-o"></i> 会员列表
</a>
</li>
</ul>
</li>
评论管理页面搭建
视图函数
@admin.route('/comment/list/')
def comment_list():
return render_template('admin/comment_list.html')
新建app/templates/admin/comment_list.html
{% extends 'admin/admin.html' %}
{% block content %}
<section class="content-header">
<h1>微电影管理系统</h1>
<ol class="breadcrumb">
<li><a href="#"><i class="fa fa-dashboard"></i> 评论管理</a></li>
<li class="active">评论列表</li>
</ol>
</section>
<section class="content" id="showcontent">
<div class="row">
<div class="col-md-12">
<div class="box box-primary">
<div class="box-header with-border">
<h3 class="box-title">评论列表</h3>
<div class="box-tools">
<div class="input-group input-group-sm" style="width: 150px;">
<input type="text" name="table_search" class="form-control pull-right"
placeholder="请输入关键字...">
<div class="input-group-btn">
<button type="submit" class="btn btn-default"><i class="fa fa-search"></i>
</button>
</div>
</div>
</div>
</div>
<div class="box-body box-comments">
<div class="box-comment">
<img class="img-circle img-sm"
src="{{ url_for('static',filename='admin/dist/img/user3-128x128.jpg') }}" alt="User Image">
<div class="comment-text">
<span class="username">
小美
<span class="text-muted pull-right">
<i class="fa fa-calendar" aria-hidden="true"></i>
2017-01-01 12:00:00
</span>
</span>
关于电影<a>《环太平洋》</a>的评论：xxx
<br><a class="label label-danger pull-right">删除</a>
</div>
</div>
<div class="box-comment">
<img class="img-circle img-sm"
src="{{ url_for('static',filename='admin/dist/img/user5-128x128.jpg') }}" alt="User Image">
<div class="comment-text">
<span class="username">
小丽
<span class="text-muted pull-right">
<i class="fa fa-calendar" aria-hidden="true"></i>
2017-01-01 12:00:00
</span>
</span>
关于电影<a>《环太平洋》</a>的评论：xxx
<br><a class="label label-danger pull-right">删除</a>
</div>
</div>
</div>
<div class="box-footer clearfix">
<ul class="pagination pagination-sm no-margin pull-right">
<li><a href="#">首页</a></li>
<li><a href="#">上一页</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">下一页</a></li>
<li><a href="#">尾页</a></li>
</ul>
</div>
</div>
</div>
</div>
</section>
{% endblock %}
{% block js %}
<script>
$(document).ready(function () {
$('#g-6').addClass('active');
$('#g-6-1').addClass('active');
})
</script>
{% endblock %}
修改app/templates/admin/grid.html文件
<li class="treeview" id="g-6">
<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 id="g-6-1">
<a href="{{ url_for('admin.comment_list') }}">
<i class="fa fa-circle-o"></i> 评论列表
</a>
</li>
</ul>
</li>
收藏管理页面搭建
视图函数
@admin.route('/moviecol/list/')
def moviecol_list():
return render_template('admin/moviecol_list.html')
新建app/templates/admin/moviecol_list.html
{% extends 'admin/admin.html' %}
{% block content %}
<section class="content-header">
<h1>微电影管理系统</h1>
<ol class="breadcrumb">
<li><a href="#"><i class="fa fa-dashboard"></i> 收藏管理</a></li>
<li class="active">收藏列表</li>
</ol>
</section>
<section class="content" id="showcontent">
<div class="row">
<div class="col-md-12">
<div class="box box-primary">
<div class="box-header">
<h3 class="box-title">收藏列表</h3>
<div class="box-tools">
<div class="input-group input-group-sm" style="width: 150px;">
<input type="text" name="table_search" class="form-control pull-right"
placeholder="请输入关键字...">
<div class="input-group-btn">
<button type="submit" class="btn btn-default"><i class="fa fa-search"></i>
</button>
</div>
</div>
</div>
</div>
<div class="box-body table-responsive no-padding">
<table class="table table-hover">
<tbody>
<tr>
<th>编号</th>
<th>电影</th>
<th>用户</th>
<th>添加时间</th>
<th>操作事项</th>
</tr>
<tr>
<td>1</td>
<td>环太平洋</td>
<td>张小明</td>
<td>2017-06-01</td>
<td>
<a class="label label-success">编辑</a>
<a class="label label-danger">删除</a>
</td>
</tr>
</tbody>
</table>
</div>
<div class="box-footer clearfix">
<ul class="pagination pagination-sm no-margin pull-right">
<li><a href="#">首页</a></li>
<li><a href="#">上一页</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">下一页</a></li>
<li><a href="#">尾页</a></li>
</ul>
</div>
</div>
</div>
</div>
</section>
{% endblock %}
{% block js %}
<script>
$(document).ready(function () {
$('#g-7').addClass('active');
$('#g-7-1').addClass('active');
})
</script>
{% endblock %}
修改app/templates/admin/grid.html文件
<li class="treeview" id="g-7">
<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 id="g-7-1">
<a href="{{ url_for('admin.moviecol_list') }}">
<i class="fa fa-circle-o"></i> 收藏列表
</a>
</li>
</ul>
</li>
日志管理页面搭建
视图函数
@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')
新建app/templates/admin/oplog_list.html
{% extends 'admin/admin.html' %}
{% block content %}
<section class="content-header">
<h1>微电影管理系统</h1>
<ol class="breadcrumb">
<li><a href="#"><i class="fa fa-dashboard"></i> 日志管理</a></li>
<li class="active">操作日志列表</li>
</ol>
</section>
<section class="content" id="showcontent">
<div class="row">
<div class="col-md-12">
<div class="box box-primary">
<div class="box-header">
<h3 class="box-title">操作日志列表</h3>
<div class="box-tools">
<div class="input-group input-group-sm" style="width: 150px;">
<input type="text" name="table_search" class="form-control pull-right"
placeholder="请输入关键字...">
<div class="input-group-btn">
<button type="submit" class="btn btn-default"><i class="fa fa-search"></i>
</button>
</div>
</div>
</div>
</div>
<div class="box-body table-responsive no-padding">
<table class="table table-hover">
<tbody>
<tr>
<th>编号</th>
<th>管理员</th>
<th>操作时间</th>
<th>操作原因</th>
<th>操作IP</th>
</tr>
<tr>
<td>1</td>
<td>admin</td>
<td>2017-06-01</td>
<td>添加一个标签：科幻</td>
<td>192.168.4.1</td>
</tr>
</tbody>
</table>
</div>
<div class="box-footer clearfix">
<ul class="pagination pagination-sm no-margin pull-right">
<li><a href="#">首页</a></li>
<li><a href="#">上一页</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">下一页</a></li>
<li><a href="#">尾页</a></li>
</ul>
</div>
</div>
</div>
</div>
</section>
{% endblock %}
{% block js %}
<script>
$(document).ready(function () {
$('#g-8').addClass('active');
$('#g-8-1').addClass('active');
})
</script>
{% endblock %}
新建app/templates/admin/adminloginlog_list.html
{% extends 'admin/admin.html' %}
{% block content %}
<section class="content-header">
<h1>微电影管理系统</h1>
<ol class="breadcrumb">
<li><a href="#"><i class="fa fa-dashboard"></i> 日志管理</a></li>
<li class="active">管理员登录日志列表</li>
</ol>
</section>
<section class="content" id="showcontent">
<div class="row">
<div class="col-md-12">
<div class="box box-primary">
<div class="box-header">
<h3 class="box-title">管理员登录日志列表</h3>
<div class="box-tools">
<div class="input-group input-group-sm" style="width: 150px;">
<input type="text" name="table_search" class="form-control pull-right"
placeholder="请输入关键字...">
<div class="input-group-btn">
<button type="submit" class="btn btn-default"><i class="fa fa-search"></i>
</button>
</div>
</div>
</div>
</div>
<div class="box-body table-responsive no-padding">
<table class="table table-hover">
<tbody>
<tr>
<th>编号</th>
<th>管理员</th>
<th>登录时间</th>
<th>登录IP</th>
</tr>
<tr>
<td>1</td>
<td>admin</td>
<td>2017-06-01</td>
<td>192.168.4.1</td>
</tr>
</tbody>
</table>
</div>
<div class="box-footer clearfix">
<ul class="pagination pagination-sm no-margin pull-right">
<li><a href="#">首页</a></li>
<li><a href="#">上一页</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">下一页</a></li>
<li><a href="#">尾页</a></li>
</ul>
</div>
</div>
</div>
</div>
</section>
{% endblock %}
{% block js %}
<script>
$(document).ready(function () {
$('#g-8').addClass('active');
$('#g-8-2').addClass('active');
})
</script>
{% endblock %}
新建app/templates/admin/userloginlog_list.html
{% extends 'admin/admin.html' %}
{% block content %}
<section class="content-header">
<h1>微电影管理系统</h1>
<ol class="breadcrumb">
<li><a href="#"><i class="fa fa-dashboard"></i> 日志管理</a></li>
<li class="active">会员登录日志列表</li>
</ol>
</section>
<section class="content" id="showcontent">
<div class="row">
<div class="col-md-12">
<div class="box box-primary">
<div class="box-header">
<h3 class="box-title">会员登录日志列表</h3>
<div class="box-tools">
<div class="input-group input-group-sm" style="width: 150px;">
<input type="text" name="table_search" class="form-control pull-right"
placeholder="请输入关键字...">
<div class="input-group-btn">
<button type="submit" class="btn btn-default"><i class="fa fa-search"></i>
</button>
</div>
</div>
</div>
</div>
<div class="box-body table-responsive no-padding">
<table class="table table-hover">
<tbody>
<tr>
<th>编号</th>
<th>会员</th>
<th>登录时间</th>
<th>登录IP</th>
</tr>
<tr>
<td>1</td>
<td>张小明</td>
<td>2017-06-01</td>
<td>192.168.4.1</td>
</tr>
</tbody>
</table>
</div>
<div class="box-footer clearfix">
<ul class="pagination pagination-sm no-margin pull-right">
<li><a href="#">首页</a></li>
<li><a href="#">上一页</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">下一页</a></li>
<li><a href="#">尾页</a></li>
</ul>
</div>
</div>
</div>
</div>
</section>
{% endblock %}
{% block js %}
<script>
$(document).ready(function () {
$('#g-8').addClass('active');
$('#g-8-3').addClass('active');
})
</script>
{% endblock %}
修改app/templates/admin/grid.html文件
<li class="treeview" id="g-8">
<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 id="g-8-1">
<a href="{{ url_for('admin.oplog_list') }}">
<i class="fa fa-circle-o"></i> 操作日志列表
</a>
</li>
<li id="g-8-2">
<a href="{{ url_for('admin.adminloginlog_list') }}">
<i class="fa fa-circle-o"></i> 管理员登录日志列表
</a>
</li>
<li id="g-8-3">
<a href="{{ url_for('admin.userloginlog_list') }}">
<i class="fa fa-circle-o"></i> 会员登录日志列表
</a>
</li>
</ul>
</li>
权限管理页面搭建
视图函数
@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')
新建app/templates/admin/auth_add.html
{% extends 'admin/admin.html' %}
{% block content %}
<section class="content-header">
<h1>微电影管理系统</h1>
<ol class="breadcrumb">
<li><a href="#"><i class="fa fa-dashboard"></i> 权限管理</a></li>
<li class="active">添加权限</li>
</ol>
</section>
<section class="content" id="showcontent">
<div class="row">
<div class="col-md-12">
<div class="box box-primary">
<div class="box-header with-border">
<h3 class="box-title">添加权限</h3>
</div>
<form role="form">
<div class="box-body">
<div class="form-group">
<label for="input_name">权限名称</label>
<input type="text" class="form-control" id="input_name" placeholder="请输入权限名称！">
</div>
<div class="form-group">
<label for="input_url">权限地址</label>
<input type="text" class="form-control" id="input_url" placeholder="请输入权限地址！">
</div>
</div>
<div class="box-footer">
<button type="submit" class="btn btn-primary">添加</button>
</div>
</form>
</div>
</div>
</div>
</section>
{% endblock %}
{% block js %}
<script>
$(document).ready(function () {
$('#g-9').addClass('active');
$('#g-9-1').addClass('active');
})
</script>
{% endblock %}
新建app/templates/admin/auth_list.html
{% extends 'admin/admin.html' %}
{% block content %}
<section class="content-header">
<h1>微电影管理系统</h1>
<ol class="breadcrumb">
<li><a href="#"><i class="fa fa-dashboard"></i> 权限管理</a></li>
<li class="active">权限列表</li>
</ol>
</section>
<section class="content" id="showcontent">
<div class="row">
<div class="col-md-12">
<div class="box box-primary">
<div class="box-header">
<h3 class="box-title">权限列表</h3>
<div class="box-tools">
<div class="input-group input-group-sm" style="width: 150px;">
<input type="text" name="table_search" class="form-control pull-right"
placeholder="请输入关键字...">
<div class="input-group-btn">
<button type="submit" class="btn btn-default"><i class="fa fa-search"></i>
</button>
</div>
</div>
</div>
</div>
<div class="box-body table-responsive no-padding">
<table class="table table-hover">
<tbody>
<tr>
<th>编号</th>
<th>名称</th>
<th>地址</th>
<th>添加时间</th>
<th>操作事项</th>
</tr>
<tr>
<td>1</td>
<td>添加标签</td>
<td>/tag/add/</td>
<td>2017-06-01</td>
<td>
<a class="label label-success">编辑</a>
<a class="label label-danger">删除</a>
</td>
</tr>
</tbody>
</table>
</div>
<div class="box-footer clearfix">
<ul class="pagination pagination-sm no-margin pull-right">
<li><a href="#">首页</a></li>
<li><a href="#">上一页</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">下一页</a></li>
<li><a href="#">尾页</a></li>
</ul>
</div>
</div>
</div>
</div>
</section>
{% endblock %}
{% block js %}
<script>
$(document).ready(function () {
$('#g-9').addClass('active');
$('#g-9-2').addClass('active');
})
</script>
{% endblock %}
修改app/templates/admin/grid.html文件
<li class="treeview" id="g-9">
<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 id="g-9-1">
<a href="{{ url_for('admin.auth_add') }}">
<i class="fa fa-circle-o"></i> 添加权限
</a>
</li>
<li id="g-9-2">
<a href="{{ url_for('admin.auth_list') }}">
<i class="fa fa-circle-o"></i> 权限列表
</a>
</li>
</ul>
</li>
角色管理页面搭建
视图函数
@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')
新建app/templates/admin/role_add.html
{% extends 'admin/admin.html' %}
{% block css %}
<style>
#auth_list .col-md-12, #auth_list .col-md-2 {
padding: 0px;
}
</style>
{% endblock %}
{% block content %}
<section class="content-header">
<h1>微电影管理系统</h1>
<ol class="breadcrumb">
<li><a href="#"><i class="fa fa-dashboard"></i> 角色管理</a></li>
<li class="active">添加角色</li>
</ol>
</section>
<section class="content" id="showcontent">
<div class="row">
<div class="col-md-12">
<div class="box box-primary">
<div class="box-header with-border">
<h3 class="box-title">添加角色</h3>
</div>
<form role="form">
<div class="box-body">
<div class="form-group">
<label for="input_name">角色名称</label>
<input type="text" class="form-control" id="input_name" placeholder="请输入角色名称！">
</div>
<div class="form-group" id="auth_list">
<div class="col-md-12">
<label>操作权限</label>
</div>
<div class="col-md-2">
<label>
<input type="checkbox" name="input_url"> 添加标签
</label>
</div>
</div>
</div>
<div class="box-footer">
<button type="submit" class="btn btn-primary">添加</button>
</div>
</form>
</div>
</div>
</div>
</section>
{% endblock %}
{% block js %}
<script>
$(document).ready(function () {
$('#g-10').addClass('active');
$('#g-10-1').addClass('active');
})
</script>
{% endblock %}
新建app/templates/admin/role_list.html
{% extends 'admin/admin.html' %}
{% block content %}
<section class="content-header">
<h1>微电影管理系统</h1>
<ol class="breadcrumb">
<li><a href="#"><i class="fa fa-dashboard"></i> 角色管理</a></li>
<li class="active">角色列表</li>
</ol>
</section>
<section class="content" id="showcontent">
<div class="row">
<div class="col-md-12">
<div class="box box-primary">
<div class="box-header">
<h3 class="box-title">角色列表</h3>
<div class="box-tools">
<div class="input-group input-group-sm" style="width: 150px;">
<input type="text" name="table_search" class="form-control pull-right"
placeholder="请输入关键字...">
<div class="input-group-btn">
<button type="submit" class="btn btn-default"><i class="fa fa-search"></i>
</button>
</div>
</div>
</div>
</div>
<div class="box-body table-responsive no-padding">
<table class="table table-hover">
<tbody>
<tr>
<th>编号</th>
<th>角色名称</th>
<th>添加时间</th>
<th>操作事项</th>
</tr>
<tr>
<td>1</td>
<td>xxx</td>
<td>2017-06-01</td>
<td>
<a class="label label-success">编辑</a>
<a class="label label-danger">删除</a>
</td>
</tr>
</tbody>
</table>
</div>
<div class="box-footer clearfix">
<ul class="pagination pagination-sm no-margin pull-right">
<li><a href="#">首页</a></li>
<li><a href="#">上一页</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">下一页</a></li>
<li><a href="#">尾页</a></li>
</ul>
</div>
</div>
</div>
</div>
</section>
{% endblock %}
{% block js %}
<script>
$(document).ready(function () {
$('#g-10').addClass('active');
$('#g-10-2').addClass('active');
})
</script>
{% endblock %}
修改app/templates/admin/grid.html文件
<li class="treeview" id="g-10">
<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 id="g-10-1">
<a href="{{ url_for('admin.role_add') }}">
<i class="fa fa-circle-o"></i> 添加角色
</a>
</li>
<li id="g-10-2">
<a href="{{ url_for('admin.role_list') }}">
<i class="fa fa-circle-o"></i> 角色列表
</a>
</li>
</ul>
</li>
管理员管理页面搭建
视图函数
@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')
新建app/templates/admin/admin_add.html
{% extends 'admin/admin.html' %}
{% block content %}
<section class="content-header">
<h1>微电影管理系统</h1>
<ol class="breadcrumb">
<li><a href="#"><i class="fa fa-dashboard"></i> 管理员管理</a></li>
<li class="active">添加管理员</li>
</ol>
</section>
<section class="content" id="showcontent">
<div class="row">
<div class="col-md-12">
<div class="box box-primary">
<div class="box-header with-border">
<h3 class="box-title">添加管理员</h3>
</div>
<form role="form">
<div class="box-body">
<div class="form-group">
<label for="input_name">管理员名称</label>
<input type="text" class="form-control" id="input_name" placeholder="请输入管理员名称！">
</div>
<div class="form-group">
<label for="input_pwd">管理员密码</label>
<input type="password" class="form-control" id="input_pwd" placeholder="请输入管理员密码！">
</div>
<div class="form-group">
<label for="input_re_pwd">管理员重复密码</label>
<input type="password" class="form-control" id="input_re_pwd"
placeholder="请输入管理员重复密码！">
</div>
<div class="form-group">
<label for="input_role_id">所属角色</label>
<select class="form-control" id="input_role_id">
<option value="0">---请选择所属角色---</option>
<option value="1">xxx</option>
</select>
</div>
</div>
<div class="box-footer">
<button type="submit" class="btn btn-primary">添加</button>
</div>
</form>
</div>
</div>
</div>
</section>
{% endblock %}
{% block js %}
<script>
$(document).ready(function () {
$('#g-11').addClass('active');
$('#g-11-1').addClass('active');
})
</script>
{% endblock %}
新建app/templates/admin/admin_list.html
{% extends 'admin/admin.html' %}
{% block content %}
<section class="content-header">
<h1>微电影管理系统</h1>
<ol class="breadcrumb">
<li><a href="#"><i class="fa fa-dashboard"></i> 管理员管理</a></li>
<li class="active">管理员列表</li>
</ol>
</section>
<section class="content" id="showcontent">
<div class="row">
<div class="col-md-12">
<div class="box box-primary">
<div class="box-header">
<h3 class="box-title">管理员列表</h3>
<div class="box-tools">
<div class="input-group input-group-sm" style="width: 150px;">
<input type="text" name="table_search" class="form-control pull-right"
placeholder="请输入关键字...">
<div class="input-group-btn">
<button type="submit" class="btn btn-default"><i class="fa fa-search"></i>
</button>
</div>
</div>
</div>
</div>
<div class="box-body table-responsive no-padding">
<table class="table table-hover">
<tbody>
<tr>
<th>编号</th>
<th>管理员名称</th>
<th>管理员类型</th>
<th>管理员角色</th>
<th>添加时间</th>
</tr>
<tr>
<td>1</td>
<td>jinlong</td>
<td>普通管理员</td>
<td>系统管理员</td>
<td>2017-06-01</td>
</tr>
<tr>
<td>2</td>
<td>jianbo</td>
<td>超级管理员</td>
<td>系统管理员</td>
<td>2017-06-01</td>
</tr>
</tbody>
</table>
</div>
<div class="box-footer clearfix">
<ul class="pagination pagination-sm no-margin pull-right">
<li><a href="#">首页</a></li>
<li><a href="#">上一页</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">下一页</a></li>
<li><a href="#">尾页</a></li>
</ul>
</div>
</div>
</div>
</div>
</section>
{% endblock %}
{% block js %}
<script>
$(document).ready(function () {
$('#g-11').addClass('active');
$('#g-11-2').addClass('active');
})
</script>
{% endblock %}
修改app/templates/admin/grid.html文件
<li class="treeview" id="g-11">
<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 id="g-11-1">
<a href="{{ url_for('admin.admin_add') }}">
<i class="fa fa-circle-o"></i> 添加管理员
</a>
</li>
<li id="g-11-2">
<a href="{{ url_for('admin.admin_list') }}">
<i class="fa fa-circle-o"></i> 管理员列表
</a>
</li>
</ul>
</li>
最后修改一下app/static/admin/dist/js/app.js,不修改也无所谓
if ($("body").hasClass("fixed")) {
$(".content-wrapper, .right-side").css('min-height', window_height - $('.main-footer').outerHeight());
} else {
var postSetWidth;
if (window_height >= sidebar_height) {
$(".content-wrapper, .right-side").css('min-height', window_height);
postSetWidth = window_height - neg;
} else {
$(".content-wrapper, .right-side").css('min-height', sidebar_height);
postSetWidth = sidebar_height;
}
