【Flask微电影】12.搭建后台页面-权限管理、角色管理、管理员管理

## 搭建后台权限管理页面 ### 添加auth_add.html权限添加页面 ```html {% extends 'admin/base.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 %} ```  ### 添加auth_list.html权限列表页面 ```html {% extends 'admin/base.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>/admin/auth_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 %} ```  ### 添加权限管理视图 ```python @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') ``` ### 修改base.html添加权限管理链接和激活 ```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> ``` ## 搭建后台角色管理页面 ### 添加role_add.html角色添加页面 ```html {% extends 'admin/base.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" 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 %} ```  ### 添加role_list.html角色列表页面 ```html {% extends 'admin/base.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 %} ```  ### 添加角色管理视图 ```python @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') ``` ### 修改base.html添加角色管理链接和激活 ```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_add.html管理员添加页面 ```html {% extends 'admin/base.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 %} ```  ### 添加admin_list.html管理员列表页面 ```html {% extends 'admin/base.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>user</td> <td>普通管理员</td> <td>系统管理员</td> <td>2017-06-01</td> </tr> <tr> <td>2</td> <td>admin</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 %} ```  ### 添加管理员管理视图 ```python @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') ``` ### 修改base.html添加管理员管理链接和激活 ```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> ```

明人不说暗话 领红包就是支持！！！ 来都来了，再到页面底部看下呗~ ↓ ↓ ↓

本文地址： http://blog.starmeow.cn/detail/66f041e16a60928b05a7e228a89c3799/

很赞哦！ (3)