版权声明：如需转载，请注明转载地址。 https://blog.csdn.net/oJohnny123/article/details/82147331
前言
使用IDE：PyCharm
操作系统：Mac
Python的版本：3.6
我的邮箱：51263921@qq.com
交流群：372430835
说明：
本次课程的GitHub代码在最下面。
本次课程基于上个课程的代码，如果没看过的请先传送：
使用Python的瓶框架开发的Web网站系列课程（一）构建项目
使用Python的瓶框架开发的Web网站系列课程（二）注册功能
使用Python-Flask框架开发Web网站系列课程（三）登录功能
使用Python-Flask框架开发Web网站系列课程（四）构建前端
用户管理
用户管理，简单的来说，包含用户的增、删、改、查。还有用户角色，例如你是普通用户呢，还是管理员。增加用户我们已经在一开始的课程完成了，就是注册功能。本次课程我们将使用datatables控件来制作表格(table)，用于展示多个用户的信息。
按照我实际工作中的习惯，我们先将页面大致创建好，再做内容的渲染。
1.1 创建前端页面。
1.1.1 修改一下上次课程的页面，增加 flask 的 flash消息功能。
全路径: /myproject/frontend/base/_navbar.html
新增的代码在最下面。
<div class="row border-bottom">
<nav class="navbar navbar-static-top white-bg" role="navigation" style="margin-bottom: 0">
<div class="navbar-header">
<a class="navbar-minimalize minimalize-styl-2 btn btn-primary " href="#"><i class="fa fa-bars"></i> </a>
<form role="search" class="navbar-form-custom" action="" method="post">
<div class="form-group">
<input type="text" placeholder="Search for something..." class="form-control" name="top-search" id="top-search">
</div>
</form>
</div>
<ul class="nav navbar-top-links navbar-right">
{% if current_user.is_authenticated %}
<li>
<span class="m-r-sm text-muted welcome-message">欢迎使用myproject,{{current_user.username}}</span>
</li>
<li>
<a href="/account/logout">
<i class="fa fa-sign-out"></i> Log out
</a>
</li>
{% else %}
<li>
<a href="/account/login">
<i class="fa fa-sign-out"></i> 请登录
</a>
</li>
{% endif %}
</ul>
</nav>
</div>
{% with messages = get_flashed_messages() %}
{% if messages %}
{% for message in messages %}
<div class="alert alert-success">
{{ message }}
<button aria-hidden="true" data-dismiss="alert" class="close" type="button">×</button>
</div>
{% endfor %}
{% endif %}
{% endwith %}
1.1.2 修改_head.html增加 datatable的css和js
下载https://github.com/lyy8510a/myproject/blob/master/frontend/static/css/plugins/dataTables/datatables.min.css 放到
全路径： /myproject/frontend/static/css/plugins/dataTables/datatables.min.css
下载https://github.com/lyy8510a/myproject/blob/master/frontend/static/js/plugins/dataTables/datatables.min.js 放到
全路径： /myproject/frontend/static/js/plugins/dataTables/datatables.min.js
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.css" rel="stylesheet">
<link href="https://cdn.bootcss.com/font-awesome/4.3.0/css/font-awesome.css" rel="stylesheet">
<link href="https://cdn.bootcss.com/animate.css/3.5.2/animate.css" rel="stylesheet">
<link href="{{STATIC_URL}}/css/style.css" rel="stylesheet">
<link href="https://cdn.bootcss.com/metisMenu/2.0.2/metisMenu.css" rel="stylesheet">
<!-- Mainly scripts -->
<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.js"></script>
<script src="https://cdn.bootcss.com/jqueryui/1.10.4/jquery-ui.js"></script>
<script src="https://cdn.bootcss.com/metisMenu/2.0.2/metisMenu.js"></script>
<script src="https://cdn.bootcss.com/jQuery-slimScroll/1.3.6/jquery.slimscroll.js"></script>
<script src="https://cdn.bootcss.com/pace/1.0.2/pace.js"></script>
<script src="{{STATIC_URL}}/js/inspinia.js"></script>
<!--datatables-->
<link href="{{STATIC_URL}}/css/plugins/dataTables/datatables.min.css" rel="stylesheet">
<script src="{{STATIC_URL}}/js/plugins/datatables/datatables.min.js" ></script>
1.1.3 新增users.html
本页面就是用户清单的页面啦，有个小逻辑就是如果是管理员，可以看全部用户，如果是普通用户，只能看到自己的，而且只能修改密码。不能删除和编辑用户。
全路径: /myproject/frontend/account/users.html
<!--第四课内容 -->
{% extends 'base/layout.html' %}
<!--第四课内容 下面是正文-->
{% block content %}
<div class="wrapper wrapper-content">
<div class="row">
<div class="col-lg-12">
<div class="ibox float-e-margins">
<div class="ibox-title">
<h5>{{tag}}</h5>
</div>
<div class="ibox-content">
<div class="row">
<div class="table-responsive">
<table class="table table-striped table-bordered table-hover dataTables-example">
<thead>
<tr>
<th>ID</th>
<th>用户名</th>
<th>Email</th>
<th>角色</th>
<th>操作</th>
</tr>
</thead>
<tbody>
{% if current_user.role_id == 2 %}
{% for user in users %}
<tr>
<td>{{user.id}}</td>
<td>{{user.username}}</td>
<td>{{user.email}}</td>
<td>{{user.role.name}}</td>
<td><a href="">修改密码</a> | <a href="/account/edituser?id={{user.id}}">编辑</a> | <a href="/account/deluser?id={{user.id}}">删除</a></td>
</tr>
{% endfor %}
{% else %}
{% for user in users %}
{% if user.id == current_user.id %}
<tr>
<td>{{user.id}}</td>
<td>{{user.username}}</td>
<td>{{user.email}}</td>
<td>{{user.role.name}}</td>
<td><a href="">修改密码</a></td>
</tr>
{% endif %}
{% endfor %}
{% endif %}
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function() {
$('.dataTables-example').DataTable({
dom: '<"html5buttons"B>lTfgitp',
buttons: [
{ extend: 'copy'},
{extend: 'csv'},
{extend: 'excel', title: 'ExampleFile'},
{extend: 'pdf', title: 'ExampleFile'},
{extend: 'print',
customize: function (win){
$(win.document.body).addClass('white-bg');
$(win.document.body).css('font-size', '10px');
$(win.document.body).find('table')
.addClass('compact')
.css('font-size', 'inherit');
}
}
]
});
})
</script>
{% endblock %}
1.1.4 新增edituser.html
编辑用户信息的页面
全路径: /myproject/frontend/account/edituser.html
{% extends 'base/layout.html' %}
{% block content %}
<div class="wrapper wrapper-content">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<div class="ibox float-e-margins">
<div class="ibox-title">
<h5>编辑用户信息</h5>
</div>
<div class="ibox-content">
<form action="/account/edituser" class="form-horizontal" enctype="multipart/form-data" method="post" >
<input type="hidden" name="id" value="{{ user_info.id }}">
<div class="form-group">
<label class="col-lg-2 control-label">id：</label>
<div class="col-lg-6"><input type="text" name="id" class="form-control" value="{{ user_info.id }}" disabled></div>
</div>
<div class="hr-line-dashed" ></div>
<div class="form-group">
<label class="col-lg-2 control-label">用户名：</label>
<div class="col-lg-6"><input type="text" name="username" class="form-control" value="{{ user_info.username }}" disabled></div>
</div>
<div class="hr-line-dashed" ></div>
<div class="form-group">
<label class="col-lg-2 control-label">EMAIL：</label>
<div class="col-lg-6"><input type="text" name="email" class="form-control" value="{{ user_info.email }}" ></div>
</div>
<div class="hr-line-dashed" ></div>
<div class="form-group">
<label class="col-lg-2 control-label">角色：</label>
<div class="col-lg-6">
<select name="role_id" class="form-control">
{% if user_info.role_id %}
<option value="{{user_info.role_id}}">{% if user_info.role_id ==1 %}普通用户{% else %}管理员{% endif %}</option>
<option value="1">普通用户</option>
<option value="2">管理员</option>
{% else %}
<option value="">请选择</option>
<option value="1">普通用户</option>
<option value="2">管理员</option>
{% endif %}
</select>
</div>
</div>
<div class="hr-line-dashed" ></div>
<div class="form-group">
<div class="col-lg-2">
</div>
<div class="col-lg-4">
<button type="submit" class="btn btn-primary" >保存</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
{% endblock %}
1.2 后端的逻辑代码
1.2.1 修改原先/myproject/backend/account/views.py的代码
增加了修改用户、删除用户、角色model的代码
#!/usr/bin/python
# -*- coding: UTF-8 -*-
"""
Created by liaoyangyang1 on 2018/8/22 上午9:40.
"""
from flask import Blueprint,request,render_template,jsonify,flash #第二课增加内容
from flask import redirect,url_for,abort #第五课新增
from backend.models.UserModel import User,Role #第五课新增
from backend.models import db
from flask_login import login_user,login_required,logout_user,current_user #第三课增加内容 #第五课新增
from functools import wraps #第五课新增
from backend.models.UserModel import Permission #第五课新增
from utils.layout import layout
#账户的蓝图 访问http://host:port/account 这个链接的子链接，都会跳到这里
account = Blueprint('account', __name__) #第二课增加内容
def permission_required(permission): #第五课新增
"""Restrict a view to users with the given permission."""
def decorator(f):
@wraps(f)
def decorated_function(*args, **kwargs):
if not current_user.can(permission):
abort(403)
return f(*args, **kwargs)
return decorated_function
return decorator
# 要求管理员权限
def admin_required(f): #第五课新增
return permission_required(Permission.ADMINISTER)(f)
# 访问http://host:port/account/register 这个链接，就会跳到这里
@account.route('/register',methods=(["GET","POST"])) #第二课增加内容
#上面的链接，绑定的就是这个方法，我们给浏览器或者接口请求 一个json格式的返回
def register(): #第二课增加内容
if request.method == 'POST':
try:
form = request.form
user = User(username=form['username'],email=form['email'],password=form['password'])
db.session.add(user)
db.session.commit()
return redirect(url_for(request.args.get('next') or 'account.login'))
except Exception as e:
abort(403)
return render_template('/account/register.html')
@account.route('/login',methods=(["GET","POST"]))
def login(): #第三课内容
if request.method == "POST":
form = request.form #获取登录表单
user = User.query.filter_by(username=form['username']).first() #查出用户信息
if user is not None and user.password_hash is not None and user.verify_password(form['password']): #检查密码是否正确
login_user(user,True) #登录操作
flash('You are now logged in. Welcome back!', 'success')
return redirect( url_for(request.args.get('next') or 'admin.index'))
else:
flash('Invalid email or password.', 'error')
return render_template('/account/login.html')
@account.route('/logout')
@login_required
def logout():
logout_user()
flash('You have been logged out.', 'info')
return redirect(url_for('admin.index'))
@account.route('/users')
@login_required
def user_list(): #第五课新增
Role.insert_roles()
user_list = User.query.outerjoin(Role, User.role_id == Role.id).all()
return layout('/account/users.html',users=user_list)
@account.route('/edituser',methods=(["GET","POST"]))
@login_required
@admin_required
def user_edit(): #第五课新增
if request.method == 'POST':
try:
form = request.form
use_info = User.query.filter(User.id == form['id']).first()
use_info.email = form['email']
use_info.role_id = form['role_id']
db.session.commit()
flash('修改用户信息成功！', 'success')
except Exception as e:
print(e)
flash('修改用户信息失败！', 'error')
return redirect(url_for(request.args.get('next') or 'account.user_list'))
id = request.values.get('id')
user_info = User.query.filter_by(id=id).first()
return layout('/account/edituser.html', user_info=user_info)
@account.route('/deluser')
@login_required
@admin_required
def user_del(): #第五课新增
try:
id = request.values.get('id')
user = User.query.filter(User.id == id).first()
db.session.delete(user)
db.session.commit()
flash('删除用户成功！', 'success')
except Exception as e:
print(e)
flash('删除用户失败！', 'error')
return redirect(url_for(request.args.get('next') or 'account.user_list'))
1.2.2 修改原先/myproject/backend/models/UserModel.py的代码
增加了角色方面的代码
#!/usr/bin/python
# -*- coding: UTF-8 -*-
"""
Created by liaoyangyang1 on 2018/8/22 下午1:50.
"""
from flask_login import UserMixin,AnonymousUserMixin #第二课增加内容
from werkzeug.security import check_password_hash, generate_password_hash #第二课增加内容
from backend.models import db #第二课增加内容
from backend.views import login_manager #第三课新增
from flask import current_app #第五课内容
class Permission: #第五课内容
GENERAL = 0x01
ADMINISTER = 0xff
class Role(db.Model): #第五课内容
__tablename__ = 'roles'
id = db.Column(db.Integer, primary_key=True)
name = db.Column(db.String(64), unique=True)
index = db.Column(db.String(64))
default = db.Column(db.Boolean, default=False, index=True)
permissions = db.Column(db.Integer)
users = db.relationship('User', backref='role', lazy='dynamic')
@staticmethod
def insert_roles():
roles = {
'User': (Permission.GENERAL, 'main', True),
'Administrator': (
Permission.ADMINISTER,
'admin',
False # grants all permissions
)
}
for r in roles:
role = Role.query.filter_by(name=r).first()
if role is None:
role = Role(name=r)
role.permissions = roles[r][0]
role.index = roles[r][1]
role.default = roles[r][2]
db.session.add(role)
db.session.commit()
def __repr__(self):
return '<Role \'%s\'>' % self.name
class User(UserMixin, db.Model): #第二课增加内容
__tablename__ = 'users' #这是我们将来建出来的表的表名，在这里定义，下面的都是字段名和字段类型长度这些
id = db.Column(db.Integer, primary_key=True)
username = db.Column(db.String(64), index=True)
email = db.Column(db.String(64), unique=True, index=True)
password_hash = db.Column(db.String(128))
role_id = db.Column(db.Integer, db.ForeignKey('roles.id')) #第五课内容
def __init__(self, **kwargs): #第五课内容
super(User, self).__init__(**kwargs)
print(self)
if self.role is None:
if self.username == current_app.config['ADMIN_USER'] or self.email == current_app.config['ADMIN_EMAIL']:
self.role = Role.query.filter_by(
permissions=Permission.ADMINISTER).first()
if self.role is None:
self.role = Role.query.filter_by(default=True).first()
def can(self, permissions): #第五课内容
return self.role is not None and \
(self.role.permissions & permissions) == permissions
def is_admin(self): #第五课内容
return self.can(Permission.ADMINISTER)
#脱敏
@property
def password(self): #第二课增加内容
raise AttributeError('`password` is not a readable attribute')
#加密
@password.setter
def password(self, password): #第二课增加内容
self.password_hash = generate_password_hash(password)
#校验密码
def verify_password(self, password): #第二课增加内容
return check_password_hash(self.password_hash, password)
#查询返回的格式
def __repr__(self): #第二课增加内容
return '<User \'%s\'>' % self.username
class AnonymousUser(AnonymousUserMixin): #第三课新增
def can(self, _):
return False
def is_admin(self):
return False
login_manager.anonymous_user = AnonymousUser #第三课新增
@login_manager.user_loader
def load_user(user_id): #第三课新增
return User.query.get(int(user_id))
1.2.3 给自己的账号先设置为管理员
先在role表里面看管理员的id是多少，然后去user表将自己账号的role_id改成管理员角色的id
1.3 测试一下
管理员登录下：
编辑用户：
修改用户角色成功
删除用户成功
普通用户登录
课程代码
github地址:https://github.com/lyy8510a/myproject/releases/tag/v5
