Flask 构建微电影视频网站(3.1)
2018-12-01 本文已影响0人
听你讲故事啊
搭建后台页面
视图函数位于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>
