Flask 页面布局layout_main.html

最新推荐文章于 2024-08-09 18:44:39 发布

原创最新推荐文章于 2024-08-09 18:44:39 发布 · 869 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#flask #html #python

这段代码展示了Flask应用中的一个管理后台页面布局，使用Bootstrap和MetisMenu组件，包括导航栏、菜单结构和用户信息区。

Flask 页面布局layout_main.html 【源码来自编程浪子的flask点餐小程序】

web/templates/common/layout_main.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>管理后台</title>
    <link href="{{ buildStaticUrl('/bootstrap/bootstrap.min.css') }}" rel="stylesheet">
    <link href="{{ buildStaticUrl('/font-awesome/css/font-awesome.min.css') }}" rel="stylesheet">
    <link href="{{ buildStaticUrl('/css/style.css') }}" rel="stylesheet">
    {%block css %}{% endblock %}
<body>
<div id="wrapper">
    <nav class="navbar-default navbar-static-side" role="navigation">
        <div class="sidebar-collapse">
            <ul class="nav metismenu" id="side-menu">
                <li class="nav-header">
                    <div class="profile-element text-center">
                        <img alt="image" class="img-circle" src="{{ buildStaticUrl('/images/common/logo.png') }}"/>
                        <p class="text-muted">编程浪子</p>
                    </div>
                    <div class="logo-element">
                        <img alt="image" class="img-circle" src="{{ buildStaticUrl('/images/common/logo.png') }}"/>
                    </div>
                </li>
                <li class="default">
                    <a href="{{ buildUrl('/') }}"><i class="fa fa-dashboard fa-lg"></i>
                        <span class="nav-label">仪表盘</span></a>
                </li>
                <li class="account">
                    <a href="{{ buildUrl('/account/index') }}"><i class="fa fa-user fa-lg"></i> <span
                            class="nav-label">账号管理</span></a>
                </li>
                <li class="food">
                    <a href="{{ buildUrl('/food/index') }}"><i class="fa fa-book fa-lg"></i> <span
                            class="nav-label">美餐管理</span></a>
                </li>
                <li class="member">
                    <a href="{{ buildUrl('/member/index') }}"><i class="fa fa-group fa-lg"></i> <span
                            class="nav-label">会员列表</span></a>
                </li>
                <li class="finance">
                    <a href="{{ buildUrl('/finance/index') }}"><i class="fa fa-rmb fa-lg"></i> <span
                            class="nav-label">财务管理</span></a>
                </li>
                <li class="stat">
                    <a href="{{ buildUrl('/stat/index') }}"><i class="fa fa-bar-chart fa-lg"></i> <span
                            class="nav-label">统计管理</span></a>
                </li>
            </ul>

        </div>
    </nav>

    <div id="page-wrapper" class="gray-bg" style="background-color: #ffffff;">
        <div class="row border-bottom">
            <nav class="navbar navbar-static-top" role="navigation" style="margin-bottom: 0">
                <div class="navbar-header">
                    <a class="navbar-minimalize minimalize-styl-2 btn btn-primary " href="javascript:void(0);"><i class="fa fa-bars"></i> </a>
                </div>
                <ul class="nav navbar-top-links navbar-right">
                    <li>
						<span class="m-r-sm text-muted welcome-message">
                            欢迎使用编程浪子订餐管理管理后台
                        </span>
                    </li>
                    <li class="dropdown user_info">
                        <a class="dropdown-toggle" data-toggle="dropdown" href="javascript:void(0);">
                            <img alt="image" class="img-circle" src="{{ buildStaticUrl('/images/common/avatar.png') }}"/>
                        </a>
                        <ul class="dropdown-menu dropdown-messages">
                            <li>
                                <div class="dropdown-messages-box">
                                    姓名：{{ current_user.nickname }} <a href="{{ buildUrl('/user/edit') }}" class="pull-right">编辑</a>
                                </div>
                            </li>
                            <li class="divider"></li>
                            <li>
                                <div class="dropdown-messages-box">
                                    手机号码: {{ current_user.mobile }}
                                </div>
                            </li>
                            <li class="divider"></li>
                            <li>
                                <div class="link-block text-center">
                                    <a class="pull-left" href="{{ buildUrl('/user/reset-pwd') }}">
                                        <i class="fa fa-lock"></i> 修改密码
                                    </a>
                                    <a class="pull-right" href="{{ buildUrl('/user/logout') }}">
                                        <i class="fa fa-sign-out"></i> 退出
                                    </a>
                                </div>
                            </li>
                        </ul>
                    </li>

                </ul>

            </nav>
        </div>
        {% block content %}{% endblock %}
    </div>
</div>

<script src="{{ buildStaticUrl('/plugins/jquery-2.1.1.js') }}"></script>
<script src="{{ buildStaticUrl('/bootstrap/bootstrap.min.js') }}"></script>
<script src="{{ buildStaticUrl('/plugins/layer/layer.js') }}"></script>
<script src="{{ buildStaticUrl('/js/common.js') }}"></script>
{%block js %}{% endblock %}
</body>
</html>

这段代码是一个HTML页面的代码，用于构建一个管理后台的界面。下面是对代码中各个部分的详细介绍：

<!DOCTYPE html>：声明文档类型为HTML5。
<html>：HTML文档的根元素。
<head>：包含了一些关于文档的元数据，如字符编码、视口设置等。
<meta charset="utf-8">：指定文档的字符编码为UTF-8。
<meta name="viewport" content="width=device-width, initial-scale=1.0">：设置文档的视口，使其在移动设备上能够正确显示。
<meta http-equiv="X-UA-Compatible" content="IE=edge">：指定IE浏览器使用最新的渲染模式。
<title>管理后台</title>：设置文档的标题为"管理后台"。
<link>：引入外部样式表文件，用于设置页面的样式。
<body>：HTML文档的主体部分。
<div id="wrapper">：页面的主要内容区域。
<nav class="navbar-default navbar-static-side" role="navigation">：导航栏部分。
<div class="sidebar-collapse">：导航栏的折叠部分。
<ul class="nav metismenu" id="side-menu">：导航栏的菜单列表。
<li>：菜单项。
<a href="{{ buildUrl('/') }}">：菜单项的链接地址。
<i class="fa fa-dashboard fa-lg"></i>：菜单项的图标。
<span class="nav-label">仪表盘</span>：菜单项的文本标签。
{% block css %}{% endblock %}：用于在此处插入自定义的CSS样式。
<div id="page-wrapper" class="gray-bg" style="background-color: #ffffff;">：页面的内容区域。
<div class="row border-bottom">：页面顶部的边框行。
<nav class="navbar navbar-static-top" role="navigation" style="margin-bottom: 0">：顶部导航栏。
<div class="navbar-header">：导航栏的头部。
<a class="navbar-minimalize minimalize-styl-2 btn btn-primary " href="javascript:void(0);"><i class="fa fa-bars"></i> </a>：用于折叠导航栏的按钮。
<ul class="nav navbar-top-links navbar-right">：导航栏右侧的链接列表。
<li>：链接项。
<span class="m-r-sm text-muted welcome-message">欢迎使用编程浪子订餐管理管理后台</span>：欢迎消息。
<li class="dropdown user_info">：用户信息下拉菜单。
<a class="dropdown-toggle" data-toggle="dropdown" href="javascript:void(0);">：用户信息下拉菜单的触发按钮。
<img alt="image" class="img-circle" src="{{ buildStaticUrl('/images/common/avatar.png') }}">：用户头像。
<ul class="dropdown-menu dropdown-messages">：用户信息下拉菜单的内容。
<li>：菜单项。
<div class="dropdown-messages-box">：菜单项的内容。
<a href="{{ buildUrl('/user/edit') }}" class="pull-right">编辑</a>：编辑链接。
<div class="link-block text-center">：链接块。
<a class="pull-left" href="{{ buildUrl('/user/reset-pwd') }}">：修改密码链接。
<a class="pull-right" href="{{ buildUrl('/user/logout') }}">：退出链接。
<div class="hidden hidden_layout_wrap">：隐藏的布局包装器。
<input name="domain" value="{{ config.APP.domain }}">：域名输入框。
<input name="prefix_url" value="{{ config.UPLOAD.prefix_url }}">：URL前缀输入框。
<script>：引入外部JavaScript文件，用于设置页面的行为和交互。
{% block js %}{% endblock %}：用于在此处插入自定义的JavaScript代码。