美文网首页Flask微电影网站开发
【Flask微电影】07.搭建后台页面-后台登陆、后台主页页面

【Flask微电影】07.搭建后台页面-后台登陆、后台主页页面

作者: 吾星喵 | 来源:发表于2018-10-31 17:07 被阅读52次

    个人博客，欢迎查看：https://blog.starmeow.cn/

    Github地址：https://github.com/xyliurui/FlaskMovie

    搭建后台登陆页面

    添加login.html登录页面

    app/templates/admin/login.html

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>微电影管理系统</title>
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <link rel="shortcut icon" href="{{ url_for('static',filename='base/images/logo.png') }}">
    <link rel="stylesheet" href="{{ url_for('static',filename='admin/bootstrap/css/bootstrap.min.css') }}">
    <link rel="stylesheet" href="{{ url_for('static',filename='fonts/css/font-awesome.min.css') }}">
    <link rel="stylesheet" href="{{ url_for('static',filename='ionicons/css/ionicons.min.css') }}">
    <link rel="stylesheet" href="{{ url_for('static',filename='admin/dist/css/AdminLTE.min.css') }}">
    <link rel="stylesheet" href="{{ url_for('static',filename='admin/plugins/iCheck/square/blue.css') }}">
</head>
<body class="hold-transition login-page">
<div class="login-box">
    <div class="login-logo">
        <a href=""><b>微电影管理系统</b></a>
    </div>
    <div class="login-box-body">
        <p class="login-box-msg"></p>
        <form action="" method="post" id="form-data">
            <div class="form-group has-feedback">
                <input name="user" type="text" class="form-control" placeholder="请输入账号！">
                <span class="glyphicon glyphicon-envelope form-control-feedback"></span>
                <div class="col-md-12" id="input_user"></div>
            </div>
            <div class="form-group has-feedback">
                <input name="pwd" type="password" class="form-control" placeholder="请输入密码！">
                <span class="glyphicon glyphicon-lock form-control-feedback"></span>
                <div class="col-md-12" id="input_pwd"></div>
            </div>
            <div class="row">
                <div class="col-xs-8">
                </div>
                <div class="col-xs-4">
                    <a id="btn-sub" type="submit" class="btn btn-primary btn-block btn-flat">登录</a>
                </div>
            </div>
        </form>
    </div>
</div>
<script src="{{ url_for('static',filename='admin/plugins/jQuery/jQuery-2.2.0.min.js') }}"></script>
<script src="{{ url_for('static',filename='admin/bootstrap/js/bootstrap.min.js') }}"></script>
<script src="{{ url_for('static',filename='admin/plugins/iCheck/icheck.min.js') }}"></script>
</body>
</html>

    访问 http://127.0.0.1:5000/admin/login/ 或 http://127.0.0.1:5000/admin/logout/ 可以看到登录页面

    image.png

    添加后台登陆退出视图

    添加到app/admin/views.py

    from flask import render_template, redirect, url_for


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


@admin.route("/logout/")
def logout():
    return redirect(url_for("admin.login"))

    搭建后台主页页面

    添加base.html父模板

    app/templates/admin/base.html

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>微电影管理系统</title>
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <link rel="shortcut icon" href="{{ url_for('static',filename='base/images/logo.png') }}">
    <link rel="stylesheet" href="{{ url_for('static',filename='admin/bootstrap/css/bootstrap.min.css') }}">
    <link rel="stylesheet" href="{{ url_for('static',filename='fonts/css/font-awesome.min.css') }}">
    <link rel="stylesheet" href="{{ url_for('static',filename='ionicons/css/ionicons.min.css') }}">
    <link rel="stylesheet" href="{{ url_for('static',filename='admin/dist/css/AdminLTE.min.css') }}">
    <link rel="stylesheet" href="{{ url_for('static',filename='admin/dist/css/skins/_all-skins.min.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='admin/plugins/datepicker/datepicker3.css') }}">
    <style>
        * {
            font-family: "Microsoft YaHei";
        }

        .table > tbody > tr > td, .table > tbody > tr > th, .table > tfoot > tr > td, .table > tfoot > tr > th, .table > thead > tr > td, .table > thead > tr > th {
            vertical-align: middle;
            text-align: center;
        }
    </style>
    {% block css %}{% endblock %}
</head>
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">
    <header class="main-header">
        <a href="index.html" class="logo">
            <span class="logo-mini"><img src="{{ url_for('static',filename='base/images/logo.png') }}" style="height:40px;width:40px;">电影系统</span>
            <span class="logo-lg"><img src="{{ url_for('static',filename='base/images/logo.png') }}" style="height:40px;width:40px;">微电影管理系统</span>
        </a>
        <nav class="navbar navbar-static-top">
            <a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button">
                <span class="sr-only">下拉菜单</span>
            </a>
            <div class="navbar-custom-menu">
                <ul class="nav navbar-nav">
                    <li class="dropdown user user-menu">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                            <img src="{{ url_for('static',filename='admin/dist/img/user2-160x160.jpg') }}"
                                 class="user-image" alt="User Image">
                            <span class="hidden-xs">xxx</span>
                        </a>
                        <ul class="dropdown-menu">
                            <li class="user-header">
                                <img src="{{ url_for('static',filename='admin/dist/img/user2-160x160.jpg') }}"
                                     class="img-circle" alt="User Image">
                                <p>
                                    xxx
                                    <small>2017-06-01</small>
                                </p>
                            </li>
                            <li class="user-footer">
                                <div class="pull-left">
                                    <a href="pwd.html" class="btn btn-default btn-flat">修改密码</a>
                                </div>
                                <div class="pull-right">
                                    <a href="{{ url_for('admin.logout') }}" class="btn btn-default btn-flat">退出系统</a>
                                </div>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
        </nav>
    </header>
    <aside class="main-sidebar">
        <section class="sidebar">
            <div class="user-panel">
                <div class="pull-left image">
                    <img src="{{ url_for('static',filename='admin/dist/img/user2-160x160.jpg') }}" class="img-circle"
                         alt="User Image">
                </div>
                <div class="pull-left info">
                    <p>用户xxx</p>
                    <a href="#"><i class="fa fa-circle text-success"></i> 在线</a>
                </div>
            </div>
            <form action="#" method="get" class="sidebar-form">
                <div class="input-group">
                    <input type="text" name="q" class="form-control" placeholder="搜索...">
                    <span class="input-group-btn">
                        <button type="submit" name="search" id="search-btn" class="btn btn-flat"><i
                                class="fa fa-search"></i>
                        </button>
                    </span>
                </div>
            </form>
            <ul class="sidebar-menu">
                <li class="header">管理菜单</li>
                <li class="treeview">
                    <a href="#">
                        <i class="fa fa-home" aria-hidden="true"></i>
                        <span>首页</span>
                        <span class="label label-primary pull-right">1</span>
                    </a>
                    <ul class="treeview-menu">
                        <li>
                            <a href="index.html">
                                <i class="fa fa-circle-o"></i> 控制面板
                            </a>
                        </li>
                    </ul>
                </li>
                <li class="treeview">
                    <a href="#">
                        <i class="fa fa-tags" aria-hidden="true"></i>
                        <span>标签管理</span>
                        <span class="label label-primary pull-right">2</span>
                    </a>
                    <ul class="treeview-menu">
                        <li>
                            <a href="tag_add.html">
                                <i class="fa fa-circle-o"></i> 添加标签
                            </a>
                        </li>
                        <li>
                            <a href="tag_list.html">
                                <i class="fa fa-circle-o"></i> 标签列表
                            </a>
                        </li>
                    </ul>
                </li>
                <li class="treeview">
                    <a href="#">
                        <i class="fa fa-file-video-o" aria-hidden="true"></i>
                        <span>电影管理</span>
                        <span class="label label-primary pull-right">2</span>
                    </a>
                    <ul class="treeview-menu">
                        <li>
                            <a href="movie_add.html">
                                <i class="fa fa-circle-o"></i> 添加电影
                            </a>
                        </li>
                        <li>
                            <a href="movie_list.html">
                                <i class="fa fa-circle-o"></i> 电影列表
                            </a>
                        </li>
                    </ul>
                </li>
                <li class="treeview">
                    <a href="#">
                        <i class="fa fa-film" aria-hidden="true"></i>
                        <span>预告管理</span>
                        <span class="label label-primary pull-right">2</span>
                    </a>
                    <ul class="treeview-menu">
                        <li>
                            <a href="preview_add.html">
                                <i class="fa fa-circle-o"></i> 添加预告
                            </a>
                        </li>
                        <li>
                            <a href="preview_list.html">
                                <i class="fa fa-circle-o"></i> 预告列表
                            </a>
                        </li>
                    </ul>
                </li>
                <li class="treeview">
                    <a href="#">
                        <i class="fa fa-users" aria-hidden="true"></i>
                        <span>会员管理</span>
                        <span class="label label-primary pull-right">1</span>
                    </a>
                    <ul class="treeview-menu">
                        <li>
                            <a href="user_list.html">
                                <i class="fa fa-circle-o"></i> 会员列表
                            </a>
                        </li>
                    </ul>
                </li>
                <li class="treeview">
                    <a href="#">
                        <i class="fa fa-comments" aria-hidden="true"></i>
                        <span>评论管理</span>
                        <span class="label label-primary pull-right">1</span>
                    </a>
                    <ul class="treeview-menu">
                        <li>
                            <a href="comment_list.html">
                                <i class="fa fa-circle-o"></i> 评论列表
                            </a>
                        </li>
                    </ul>
                </li>
                <li class="treeview">
                    <a href="#">
                        <i class="fa fa-heart" aria-hidden="true"></i>
                        <span>收藏管理</span>
                        <span class="label label-primary pull-right">1</span>
                    </a>
                    <ul class="treeview-menu">
                        <li>
                            <a href="moviecol_list.html">
                                <i class="fa fa-circle-o"></i> 收藏列表
                            </a>
                        </li>
                    </ul>
                </li>
                <li class="treeview">
                    <a href="#">
                        <i class="fa fa-file-text" aria-hidden="true"></i>
                        <span>日志管理</span>
                        <span class="label label-primary pull-right">3</span>
                    </a>
                    <ul class="treeview-menu">
                        <li>
                            <a href="oplog_list.html">
                                <i class="fa fa-circle-o"></i> 操作日志列表
                            </a>
                        </li>
                        <li>
                            <a href="adminloginlog_list.html">
                                <i class="fa fa-circle-o"></i> 管理员登录日志列表
                            </a>
                        </li>
                        <li>
                            <a href="userloginlog_list.html">
                                <i class="fa fa-circle-o"></i> 会员登录日志列表
                            </a>
                        </li>
                    </ul>
                </li>
                <li class="treeview">
                    <a href="#">
                        <i class="fa fa-lock" aria-hidden="true"></i>
                        <span>权限管理</span>
                        <span class="label label-primary pull-right">2</span>
                    </a>
                    <ul class="treeview-menu">
                        <li>
                            <a href="auth_add.html">
                                <i class="fa fa-circle-o"></i> 添加权限
                            </a>
                        </li>
                        <li>
                            <a href="auth_list.html">
                                <i class="fa fa-circle-o"></i> 权限列表
                            </a>
                        </li>
                    </ul>
                </li>
                <li class="treeview">
                    <a href="#">
                        <i class="fa fa-user-secret" aria-hidden="true"></i>
                        <span>角色管理</span>
                        <span class="label label-primary pull-right">2</span>
                    </a>
                    <ul class="treeview-menu">
                        <li>
                            <a href="role_add.html">
                                <i class="fa fa-circle-o"></i> 添加角色
                            </a>
                        </li>
                        <li>
                            <a href="role_list.html">
                                <i class="fa fa-circle-o"></i> 角色列表
                            </a>
                        </li>
                    </ul>
                </li>
                <li class="treeview">
                    <a href="#">
                        <i class="fa fa-user-circle" aria-hidden="true"></i>
                        <span>管理员管理</span>
                        <span class="label label-primary pull-right">2</span>
                    </a>
                    <ul class="treeview-menu">
                        <li>
                            <a href="admin_add.html">
                                <i class="fa fa-circle-o"></i> 添加管理员
                            </a>
                        </li>
                        <li>
                            <a href="admin_list.html">
                                <i class="fa fa-circle-o"></i> 管理员列表
                            </a>
                        </li>
                    </ul>
                </li>
            </ul>
        </section>
    </aside>
    <div class="content-wrapper">
        <!--内容-->
        {% block content %}{% endblock %}
        <!--内容-->
    </div>
    <footer class="main-footer">
        <div class="pull-right hidden-xs">
            <b>版本</b> 1.0
        </div>
        <strong>版权 &copy; 2017-2018 归<a href="">xxx</a>.</strong> 所有
    </footer>
    <div class="control-sidebar-bg"></div>
</div>
<script src="{{ url_for('static',filename='admin/plugins/jQuery/jQuery-2.2.0.min.js') }}"></script>
<script src="{{ url_for('static',filename='admin/bootstrap/js/bootstrap.min.js') }}"></script>
<script src="{{ url_for('static',filename='admin/plugins/slimScroll/jquery.slimscroll.min.js') }}"></script>
<script src="{{ url_for('static',filename='admin/plugins/fastclick/fastclick.js') }}"></script>
<script src="{{ url_for('static',filename='admin/dist/js/app.min.js') }}"></script>
<script src="{{ url_for('static',filename='admin/dist/js/demo.js') }}"></script>
<script src="//cdn.bootcss.com/holder/2.9.4/holder.min.js"></script>
<script src="{{ url_for('static',filename='admin/plugins/datepicker/bootstrap-datepicker.js') }}"></script>
<script src="{{ url_for('static',filename='admin/plugins/datepicker/locales/bootstrap-datepicker.zh-CN.js') }}" charset="UTF-8"></script>
{% block js %}{% endblock %}

</body>
</html>

    添加index.html主页模板

    app/templates/admin/index.html

    {% extends 'admin/base.html' %}

{% block content %}
    <h1>后台主页</h1>
{% endblock %}
    image.png

    修改后台主页视图

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

    相关文章

      网友评论

        本文标题：【Flask微电影】07.搭建后台页面-后台登陆、后台主页页面

        本文链接：https://www.haomeiwen.com/subject/phnatqtx.html

        延伸阅读

        深度阅读

        • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

        栏目导航

        热点阅读

        Flask微电影网站开发

        关于我们|服务条款|联系我们|【Flask微电影】07.搭建后台页面-后台登陆、后台主页页面|投稿指南|网站地图|RSS订阅|排版工具|手机版

        提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

        Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

        备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

        本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

        所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！