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;
}
Flask 构建微电影视频网站(三)的更多相关文章
- Python flask 构建微电影视频网站✍✍✍
Python flask 构建微电影视频网站 整个课程都看完了,这个课程的分享可以往下看,下面有链接,之前做java开发也做了一些年头,也分享下自己看这个视频的感受,单论单个知识点课程本身没问题,大 ...
- Python flask 构建微电影视频网站☝☝☝
Python flask 构建微电影视频网站☝☝☝ 1.安装数据库连接依赖包 pip install flask-sqlalchemy 2.创建movie数据库 在CentOS虚拟机,进入MaridD ...
- Flask 构建微电影视频网站(一)
Flask构建电影视频网站 Python MTV模型 Flask微内核 Flask扩展插件配置及使用方法 根据业务开发网站前后台功能 Flask结合MySQL数据库 你将可以独立开发网站 独立部署运维 ...
- Python Flask 构建微电影视频网站
前言 学完本教程,你将掌握: 1.学会使用整形.浮点型.路径型.字符串型正则表达式路由转化器 2.学会使用post与get请求.上传文件.cookie获取与相应.404处理 3.学会适应模板自动转义. ...
- Flask 构建微电影视频网站(四)
后台管理 实现后台管理系统使用flask sqlalchemy结合mysql数据库进行增删改查操作.分页的使用.路由装饰器定义.模板中变量调用.登录会话机制.上传文件.flask wtforms表单使 ...
- Flask 构建微电影视频网站(二)
搭建前台页面 前台布局搭建 将static中的文件拷贝到项目的static目录下 在app/templates/home下新建home.html,当作基础模板,并修改静态资源链接 <!docty ...
- Flask 构建微电影视频网站(八)
评论收藏及弹幕 实现电影评论添加及列表.数据查询实现统计播放量和评论量.jquery ajax实现收藏电影,flask结合redis消息队列实现电影弹幕,bug处理等功能. 电影评论-统计 class ...
- Flask 构建微电影视频网站(七)
电影模块实现 上映预告 @home.route("/animation/") def animation(): """ 首页轮播动画 "&q ...
- Flask 构建微电影视频网站(六)
会员模块实现 会员注册 class RegistForm(FlaskForm): name = StringField( label="昵称", validators=[ Data ...
随机推荐
- jQuery 初识 筛选器 属性选择器
---------------------------大事使我们惊讶,小事使我们沮丧,久而久之,我们对这二者都会习以为常. 一 jQuery是什么? ［1］ jQuery由美国人John Resi ...
- 如何在C#中使用Dapper（译）
前言: 对象关系映射(ORM)已经被使用了很长时间,以解决在编程过程中对象模型与数据模型在关系数据库中不匹配的问题. Dapper是由Stack OverFlow团队开发的开源的,轻量级的ORM.相比 ...
- javaweb之Cookie学习
Cookie简介 HTTP是无状态协议,服务器不能记录浏览器的访问状态,也就是说服务器不能区分中两次请求是否由一个客户端发出.这样的设计严重阻碍的Web程序的设计.如:在我们进行网购时,买了一条裤子, ...
- mysql_查的小理解
show create table employee; 对这个语句的小理解: 顿悟呀,之前一直不太理解这条语句,现在忽然觉得明朗起来.他就是展示创建这个表格时的SQL语句.执行上述代码之后结果如下: ...
- python中类方法，实例方法，静态方法的作用和区别
Python中至少有三种比较常见的方法类型,即实例方法,类方法.静态方法.它们是如何定义的呢?如何调用的呢?它们又有何区别和作用呢?且看下文. 首先,这三种方法都定义在类中.下面我先简单说一下怎么 ...
- Kernel Functions-Introduction to SVM Kernel & Examples - DataFlair
Kernel Functions-Introduction to SVM Kernel & Examples - DataFlairhttps://data-flair.training/bl ...
- Windows 下 Mysql8.0.12 的安装方法
1. 之前在windows 上面安装了 mysql 5.6 还有 mysql 5.7 遇到了几个坑 , 最近想直接安装最新版的 mysql 8.0.12(较新) 发现还是有坑 跟之前的版本不一样 这里 ...
- 布局管理器之BorderLayout（边界布局）
边界布局管理器把容器的的布局分为五个位置:CENTER.EAST.WEST.NORTH.SOUTH.依次对应为:上北(NORTH).下南(SOUTH).左西(WEST).右东(EAST),中(CENT ...
- CMD & Git Shell & Bash Shell
CMD & Git Shell & Bash Shell https://mvdan.cc/sh/cmd/shfmt PC
- python 三目运算符
格式: true_res if condition else false_res Meto 1: Meto 2: >>> x = 2 >>> x+1 if x!=1 ...