使用Python-Flask框架开发Web网站系列课程（五）用户管理

前言

---

使用IDE：PyCharm

操作系统：Mac

Python的版本：3.6

我的邮箱：[email protected]

交流群：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.1