前言

使用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