正心全栈编程-文档站

Appearance

后台管理 ​

需求分析

  • 管理员用户进行登录，并且根据不同的情况报出不同的错误信息
  • 如果当前已登录用户是管理员，在访问登录页面时直接跳转到后台管理主页
  • 登录界面可以直接使用 Form 表单提交 (也可以采用 ajax 的方式)

后端首页 ​

在 views/admin.py 中，添加视图返回函数

python
from flask import Blueprint, render_template

admin_bp = Blueprint('admin', __name__)


@admin_bp.route('/admin/index.html')
def admin_index():
    return render_template('admin/index.html')

前端代码准备

在 templates 目录下创建 admin 文件夹，然后新建 index.html 目录，里面存放后台首页的静态页面。

html
<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <title>后台管理</title>
    <link rel="stylesheet" href="/static/layui/css/layui.css" />
    <link rel="stylesheet" href="/static/css/admin.css" />
    <script src="/static/layui/layui.js"></script>
  </head>
  <body>
    <div class="layui-layout layui-layout-admin">
      <div class="layui-header">
        <div class="layui-logo layui-hide-xs layui-bg-black">后台管理页面</div>
        <!-- 头部区域（可配合 layui 已有的水平导航） -->

        <ul class="layui-nav layui-layout-right" style="margin-right: 20px">
          <li class="layui-nav-item layui-hide layui-show-md-inline-block">
            <a href="javascript:;">
              <img src="/static/images/person.png" class="layui-nav-img" />
              正心
            </a>
            <dl class="layui-nav-child">
              <dd><a href="">个人中心</a></dd>
              <dd><a href="">退出</a></dd>
            </dl>
          </li>
        </ul>
      </div>

      <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
          <!-- 左侧导航区域（可配合 layui 已有的垂直导航） -->
          <ul class="layui-nav layui-nav-tree" lay-filter="test">
            <li class="layui-nav-item">
              <a class="" href="javascript:;">用户管理</a>
              <dl class="layui-nav-child">
                <dd>
                  <a href="user_count.html" target="main_iframe">用户统计</a>
                </dd>
                <dd>
                  <a href="user_list.html" target="main_iframe">用户列表</a>
                </dd>
              </dl>
            </li>
            <li class="layui-nav-item">
              <a href="javascript:;">新闻管理</a>
              <dl class="layui-nav-child">
                <dd>
                  <a href="article_list.html" target="main_iframe">文章列表</a>
                </dd>
                <dd>
                  <a href="article_edit.html" target="main_iframe">文章审核</a>
                </dd>
              </dl>
            </li>
          </ul>
        </div>
      </div>

      <div class="layui-body">
        <!-- 内容主体区域 -->
        <iframe src="" id="main_iframe" name="main_iframe"></iframe>
      </div>

      <div class="layui-footer">
        <!-- 底部固定区域 -->
        底部固定区域
      </div>
    </div>
  </body>
</html>

后台权限检测 ​

后端需要进行权限登录，因为是后端部分，建议使用 cls 的方式进行处理，后端只要提供接口就可以了。

进入后台页面之后，请求后端获取个人信息接口，在前端判断是否拥有权限，没有的话跳转到后端登录页面。

前端发送请求

html

后端接口返回个人数据

python

如果个人数据没有权限，跳转到后台登录页

问题：在当前代码逻辑下，如果一个普通用户直接访问管理后台的主页，或者访问后续实现的视图函数路由，是直接可以进入的，如何解决？

后台登录 ​

编写后台登录视图

python
from flask import Blueprint, render_template

admin_bp = Blueprint('admin', __name__)


@admin_bp.route('/admin/login.html')
def login_index():
    return render_template('admin/login.html')

然后编写前端视图

html
<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <title>后台页面登录</title>
  </head>
  <body></body>
</html>

前端登录页面 ​

实现登录的逻辑

html

后端逻辑实现 ​

python

添加测试用户 ​

  • 为了更直观的展示后台数据效果，使用代码添加测试用户数据
python
@app.cli.command()
def add_test_users():
    users = []
    now = datetime.datetime.now()
    for num in range(0, 10000):
        try:
            user = models.User()
            user.nick_name = "%011d" % num
            user.mobile = "%011d" % num
            user.password_hash = "pbkdf2:sha256:50000$SgZPAbEj$a253b9220b7a916e03bf27119d401c48ff4a1c81d7e00644e0aaf6f3a8c55829"
            user.last_login = now - datetime.timedelta(seconds=random.randint(0, 2678400))
            users.append(user)
            print(user.mobile)
        except Exception as e:
            print(e)
    db.session.commit()
    click.echo('OK')

执行以上方法，添加测试用户