Flask 构建微电影视频网站(3.2)

会员管理页面搭建

视图函数

@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;
        }
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 202,980评论 5赞 476
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 85,178评论 2赞 380
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 149,868评论 0赞 336
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,498评论 1赞 273
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,492评论 5赞 364
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,521评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,910评论 3赞 395
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,569评论 0赞 256
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,793评论 1赞 296
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,559评论 2赞 319
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,639评论 1赞 329
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,342评论 4赞 318
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,931评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,904评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,144评论 1赞 259
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 42,833评论 2赞 349
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,350评论 2赞 342

推荐阅读更多精彩内容