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>版权 &copy; 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>
                                    &nbsp;
                                    <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>
                                        &nbsp;
                                        <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>
                                        &nbsp;
                                        <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>
                                        &nbsp;
                                        <a class="label label-info">解冻</a>
                                        &nbsp;
                                        <a class="label label-warning">冻结</a>
                                        &nbsp;
                                        <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>
                                            &nbsp;
                                            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>
                                            &nbsp;
                                            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>
                                    &nbsp;
                                    <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>
                                    &nbsp;
                                    <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>
                                    &nbsp;
                                    <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;
        }

转载于:https://www.cnblogs.com/gaoyongjian/p/9985428.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值