Flask开发微电影网站(十)
1.后台管理之角色管理
1.1 角色管理之定义角色表单
在app的admin目录的forms.py文件中,定义角色表单
# 角色表单
class RoleForm(FlaskForm):
name = StringField(
label="角色名称",
validators=[
DataRequired("请输入角色名称!")
],
description="角色名称",
render_kw={
"class": "form-control",
"placeholder": "请输入角色名称!"
}
)
auths = SelectField(
label="权限列表",
validators=[
DataRequired("请选择权限列表!")
],
coerce=int,
choices=[(v.id, v.name) for v in auth_list],
description="权限列表",
render_kw={
"class": "form-control"
}
)
submit = SubmitField(
"编辑",
render_kw={
"class": "btn btn-primary",
}
)
1.2 角色管理之所有角色列表
1.2.1 角色管理之所有角色列表视图函数
在admin目录下的views.py文件中定义所有角色列表视图函数
所有角色列表视图函数需要被
登录控制装饰器
和权限控制装饰器
同时装饰
@admin.route('/role/list/<int:page>/', methods=["GET", "POST"])
@admin_login_req
@admin_auth
def role_list(page=None):
if page is None:
page = 1
page_data = Role.query.order_by(Role.id).paginate(page=page, per_page=10)
return render_template("admin/role_list.html", page_data=page_data)
1.2.2 角色管理之所有角色列表前端页面
所有角色列表前端页面继承admin.html页面,还需要导入admin_page.html页面以实现分页效果
{% extends 'admin/admin.html' %}
{% import "ui/admin_page.html" as pg %}
{% 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">
<!--消息提示-->
{% for msg in get_flashed_messages(category_filter=["ok"]) %}
<div class="alert alert-success alert-dismissible">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
<h4><i class="icon fa fa-check"></i> 操作成功</h4>
{{ msg }}
</div>
{% endfor %}
<table class="table table-hover">
<tbody>
<tr>
<th>编号</th>
<th>角色名称</th>
<th>添加时间</th>
<th>操作事项</th>
</tr>
{% for v in page_data.items %}
<tr>
<td>{{ v.id }}</td>
<td>{{ v.name }}</td>
<td>{{ v.addtime }}</td>
<td>
<a href="{{ url_for("admin.role.edit",id=v.id) }}" class="label label-success">编辑</a>
<a href="{{ url_for("admin.role.del",id=v.id) }}" class="label label-danger">删除</a>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
<div class="box-footer clearfix">
{{ pg.page(page_data,"admin.role_list") }}
</div>
</div>
</div>
</div>
</section>
<!--内容-->
{% endblock %}
{% block js %}
$(document).ready(function () {
$("#g-10").addClass('active');
$("#g-10-2").addClass('active');
});
{% endblock %}
1.3 角色管理之添加角色
1.3.1 角色管理之添加角色视图函数
在admin目录下的views.py文件中定义添加角色视图函数
添加角色视图函数需要被
登录控制装饰器
和权限控制装饰器
同时装饰
@admin.route('/role/add/', methods=["GET", "POST"])
@admin_login_req
@admin_auth
def role_add():
form = RoleForm()
if form.validate_on_submit():
data = form.data
role = Role(
name=data.get("name"),
auths=",".join(map(lambda v: str(v), data.get("auths")))
)
db.session.add(role)
db.session.commit()
flash("添加角色成功!", "ok")
return redirect(url_for("admin.role_list", page=1))
return render_template("admin/role_add.html", form=form)
1.3.2 角色管理之添加角色前端页面
添加角色前端页面继承admin.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" method="post">
<div class="box-body">
<!--提示框消息闪现-->
{% for msg in get_flashed_messages(category_filter=["ok"]) %}
<div class="alert alert-success alert-dismissible">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×
</button>
<h4><i class="icon fa fa-check"></i> 操作成功</h4>
{{ msg }}
</div>
{% endfor %}
<div class="form-group">
<label for="input_name">{{ form.name.label }}</label>
{{ form.name }}
<!--报错信息-->
{% for err in form.name.errors %}
<div class="col-md-12">
<font style="color:red">{{ err }}</font>
</div>
{% endfor %}
</div>
<div class="form-group" id="auth_list">
<div class="col-md-12">
<label>{{ form.auths.label }}</label>
</div>
{{ form.auths }}
<!--报错信息-->
{% for err in form.auths.errors %}
<div class="col-md-12">
<font style="color:red">{{ err }}</font>
</div>
{% endfor %}
</div>
</div>
<div class="box-footer">
{{ form.csrf_token }}
{{ form.submit }}
</div>
</form>
</div>
</div>
</div>
</section>
{% endblock %}
{% block js %}
$(document).ready(function () {
$("#g-10").addClass('active');
$("#g-10-1").addClass('active');
});
{% endblock %}
1.4 角色管理之编辑角色
1.4.1 角色管理之编辑角色视图函数
在admin目录下的views.py文件中定义编辑角色视图函数
编辑角色视图函数需要被
登录控制装饰器
和权限控制装饰器
同时装饰
@admin.route("/role/edit/<int:id>/", methods=['GET', 'POST'])
@admin_login_req
@admin_auth
def role_edit(id=None):
form = RoleForm()
role = Role.query.get_or_404(id)
if request.method == 'GET':
auths = role.auths
form.auths.data = list(map(lambda v: int(v), auths.split(",")))
if form.validate_on_submit():
data = form.data
role.name = data.get("name")
role.auths = ",".join(map(lambda v: str(v), data.get('auths')))
db.session.add(role)
db.session.commit()
flash("修改角色成功!", "ok")
return render_template("admin/role_edit.html", form=form, role=role)
1.4.2 角色管理之编辑角色前端页面
编辑角色前端页面继承admin.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" method="post">
<div class="box-body">
<!--提示框消息闪现-->
{% for msg in get_flashed_messages(category_filter=["ok"]) %}
<div class="alert alert-success alert-dismissible">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×
</button>
<h4><i class="icon fa fa-check"></i> 操作成功</h4>
{{ msg }}
</div>
{% endfor %}
<div class="form-group">
<label for="input_name">{{ form.name.label }}</label>
{{ form.name(value=role.name) }}
<!--报错信息-->
{% for err in form.name.errors %}
<div class="col-md-12">
<font style="color:red">{{ err }}</font>
</div>
{% endfor %}
</div>
<div class="form-group" id="auth_list">
<div class="col-md-12">
<label>{{ form.auths.label }}</label>
</div>
{{ form.auths }}
<!--报错信息-->
{% for err in form.auths.errors %}
<div class="col-md-12">
<font style="color:red">{{ err }}</font>
</div>
{% endfor %}
</div>
</div>
<div class="box-footer">
{{ form.csrf_token }}
{{ form.submit }}
</div>
</form>
</div>
</div>
</div>
</section>
{% endblock %}
{% block js %}
$(document).ready(function () {
$("#g-10").addClass('active');
$("#g-10-1").addClass('active');
});
{% endblock %}
1.5 角色管理之删除角色
1.5 角色管理之删除角色视图函数
在admin目录下的views.py文件中定义删除角色视图函数
删除角色视图函数需要被
登录控制装饰器
和权限控制装饰器
同时装饰
@admin.route("/role/del/<int:id>/", methods=['GET'])
@admin_login_req
@admin_auth
def role_del(id=None):
role = Role.query.filter_by(id=id).first_or_404()
db.session.delete(role)
db.session.commit()
flash("角色删除成功!", "ok")
return redirect(url_for("admin.role_list", page=1))
2.后台管理之管理员管理
2.1 定义管理员表单
在app的admin目录的forms.py文件中,定义管理员表单
# 管理员列表
class AdminForm(FlaskForm):
name = StringField(
label="用户名",
validators=[
DataRequired("请输入管理员用户名!")
],
description="用户名",
render_kw={
"class": "form-control",
"placeholder": "请输入管理员用户名!"
},
)
pwd = PasswordField(
label="管理员密码",
validators=[
DataRequired("请输入管理员密码!")
],
description="管理员密码",
render_kw={
"class": "form-control",
"placeholder": "请输入管理员密码!"
},
)
repwd = PasswordField(
label="管理员重复输入密码",
validators=[
DataRequired("请管理员重复输入密码!"),
EqualTo("pwd", message="两次输入密码不一致!")
],
description="管理员重复输入密码",
render_kw={
"class": "form-control",
"placeholder": "请管理员重复输入密码!"
},
)
role_id = SelectField(
label="所属角色",
validators=[
DataRequired("请选择所属角色!")
],
coerce=int,
choices=[(v.id, v.name) for v in role_list],
render_kw={
"class": "form-control"
}
)
submit = SubmitField(
"编辑",
render_kw={
"class": "btn btn-primary",
}
)
2.2 管理员管理之所有管理员列表
2.2.1 管理员管理之管理员列表视图函数
在admin目录下的views.py文件中定义所有管理员列表视图函数
所有管理员列表视图函数需要被
登录控制装饰器
和权限控制装饰器
同时装饰
@admin.route('/admin/list/<int:page>/', methods=['GET'])
@admin_login_req
@admin_auth
def admin_list(page=None):
if page is None:
page = 1
page_data = Admin.query.join(Role).filter(Role.id == Admin.role_id).order_by(
Admin.id
).paginate(page=page, per_page=10)
print("page_data:", page_data)
return render_template("admin/admin_list.html", page_data=page_data)
2.2.2 管理员管理之所有管理员列表前端页面
所有管理员列表前端页面继承admin.html页面,还需要导入admin_page.html页面以实现分页效果
{% extends 'admin/admin.html' %}
{% import "ui/admin_page.html" as pg %}
{% 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">
<!--消息提示-->
{% for msg in get_flashed_messages(category_filter=["ok"]) %}
<div class="alert alert-success alert-dismissible">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
<h4><i class="icon fa fa-check"></i> 操作成功</h4>
{{ msg }}
</div>
{% endfor %}
<table class="table table-hover">
<tbody>
<tr>
<th>编号</th>
<th>管理员名称</th>
<th>管理员类型</th>
<th>管理员角色</th>
<th>添加时间</th>
</tr>
{% for v in page_data.items %}
<tr>
<td>{{ v.id }}</td>
<td>{{ v.name }}</td>
{% if v.is_super ==0 %}
<td>超级管理员</td>
{% else %}
<td>普通管理员</td>
{% endif %}
<td>{{ v.role.name }}</td>
<td>{{ v.addtime }}</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
<div class="box-footer clearfix">
{{ pg.page(page_data,"admin.admin_list") }}
</div>
</div>
</div>
</div>
</section>
<!--内容-->
{% endblock %}
{% block js %}
$(document).ready(function () {
$("#g-11").addClass('active');
$("#g-11-2").addClass('active');
});
{% endblock %}
2.3 管理员管理之添加管理员
2.3.1 管理员管理之添加管理员视图函数
在admin目录下的views.py文件中定义添加管理员视图函数
添加管理员视图函数需要被
登录控制装饰器
和权限控制装饰器
同时装饰
@admin.route('/admin/add/', methods=['GET', 'POST'])
@admin_login_req
@admin_auth
def admin_add():
form = AdminForm()
from werkzeug.security import generate_password_hash
if form.validate_on_submit():
data = form.data
admin = Admin(
name=data.get("name"),
pwd=generate_password_hash(data.get('pwd')),
role_id=data.get("role_id"),
is_super=1,
)
db.session.add(admin)
db.session.commit()
flash("添加管理员成功!", "ok")
return redirect(url_for('admin.admin_list', page=1))
return render_template("admin/admin_add.html", form=form)
2.3.2 管理员管理之添加管理员前端页面
添加管理员前端页面继承admin.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">
<!--提示框消息闪现-->
{% for msg in get_flashed_messages(category_filter=["ok"]) %}
<div class="alert alert-success alert-dismissible">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×
</button>
<h4><i class="icon fa fa-check"></i> 操作成功</h4>
{{ msg }}
</div>
{% endfor %}
<div class="form-group">
<label for="input_name">{{ form.name.label }}</label>
{{ form.name }}
<!--报错信息-->
{% for err in form.name.errors %}
<div class="col-md-12">
<font style="color:red">{{ err }}</font>
</div>
{% endfor %}
</div>
<div class="form-group">
<label for="input_pwd">{{ form.pwd.label }}</label>
{{ form.pwd }}
<!--报错信息-->
{% for err in form.pwd.errors %}
<div class="col-md-12">
<font style="color:red">{{ err }}</font>
</div>
{% endfor %}
</div>
<div class="form-group">
<label for="input_re_pwd">{{ form.repwd.label }}</label>
{{ form.repwd }}
<!--报错信息-->
{% for err in form.repwd.errors %}
<div class="col-md-12">
<font style="color:red">{{ err }}</font>
</div>
{% endfor %}
</div>
<div class="form-group">
<label for="input_role_id">{{ form.role_id.label }}</label>
{{ form.role_id }}
<!--报错信息-->
{% for err in form.role_id.errors %}
<div class="col-md-12">
<font style="color:red">{{ err }}</font>
</div>
{% endfor %}
</div>
</div>
<div class="box-footer">
{{ form.csrf_token }}
{{ form.submit }}
</div>
</form>
</div>
</div>
</div>
</section>
<!--内容-->
{% endblock %}
{% block js %}
$(document).ready(function () {
$("#g-11").addClass('active');
$("#g-11-1").addClass('active');
});
{% endblock %}