Flask 页面布局layout_main.html

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> <spanclass="nav-label">账号管理</span></a></li><li class="food"><a href="{{ buildUrl('/food/index') }}"><i class="fa fa-book fa-lg"></i> <spanclass="nav-label">美餐管理</span></a></li><li class="member"><a href="{{ buildUrl('/member/index') }}"><i class="fa fa-group fa-lg"></i> <spanclass="nav-label">会员列表</span></a></li><li class="finance"><a href="{{ buildUrl('/finance/index') }}"><i class="fa fa-rmb fa-lg"></i> <spanclass="nav-label">财务管理</span></a></li><li class="stat"><a href="{{ buildUrl('/stat/index') }}"><i class="fa fa-bar-chart fa-lg"></i> <spanclass="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页面的代码，用于构建一个管理后台的界面。下面是对代码中各个部分的详细介绍：

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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/582419.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

应对微信小程序用户流失率的有效策略

应对微信小程序用户流失率的有效策略

随着移动互联网的发展&#xff0c;微信小程序已经成为许多企业和个人提供服务、产品的重要平台。然而&#xff0c;高用户流失率仍然是很多开发者面临的挑战之一。在这篇文章中&#xff0c;我们将讨论一些应对微信小程序用户流失率的有效策略&#xff0c;帮助开发者更好地留住用…
阅读更多...
【C语言】程序练习（二）

【C语言】程序练习（二）

大家好&#xff0c;这里是争做图书馆扫地僧的小白。 个人主页&#xff1a;争做图书馆扫地僧的小白_-CSDN博客 目标&#xff1a;希望通过学习技术&#xff0c;期待着改变世界。 目录 前言 一、运算符练习 1 算术运算符 1.1 练习题&#xff1a; 2 自加自减运算符 3 关系运…
阅读更多...
Python列表数据处理全攻略（三）：常用内置方法轻松掌握

Python列表数据处理全攻略（三）：常用内置方法轻松掌握

文章目录 引言Python列表常用内置方法count()功能介绍语法示例注意事项 index()功能介绍语法示例注意事项&#xff1a; insert()功能介绍语法示例注意事项总结 结束语 引言 亲爱的读者&#xff0c;你好&#xff01;Python的列表在数据结构中占据着核心地位&#xff0c;对于学习…
阅读更多...
机器学习——损失函数

机器学习——损失函数

【说明】文章内容来自《机器学习——基于sklearn》&#xff0c;用于学习记录。若有争议联系删除。 1、简介 损失函数(loss function)又称为误差函数(error function)&#xff0c;是衡量模型好坏的标准&#xff0c;用于估量模型的预测值与真实值的不一致程度&#xff0c;是一个…
阅读更多...
基于SVM的冷却剂流量预测，基于支持向量机SVM的冷却剂流量预测

基于SVM的冷却剂流量预测，基于支持向量机SVM的冷却剂流量预测

目录 支持向量机SVM的详细原理 SVM的定义 SVM理论 Libsvm工具箱详解 简介 参数说明 易错及常见问题 完整代码和数据下载链接： 基于SVM的冷却剂流量预测，基于支持向量机SVM的冷却剂流量预测（代码完整，数据齐全）资源-CSDN文库 https://download.csdn.net/download/abc991835…
阅读更多...
java itext5 生成PDF并填充数据导出

java itext5 生成PDF并填充数据导出

java itext5 生成PDF并填充数据导出 依赖**文本勾选框****页眉**&#xff0c;**页脚****图片**实际图 主要功能有文本勾选框&#xff0c;页眉&#xff0c;页脚&#xff0c;图片等功能。肯定没有专业软件画的好看&#xff0c;只是一点儿方法。仅供参考。 依赖 <!--pdf-->&…
阅读更多...
12.18构建哈夫曼树（优先队列），图的存储方式，一些细节（auto,pair用法，结构体指针）

12.18构建哈夫曼树（优先队列），图的存储方式，一些细节（auto,pair用法，结构体指针）

为结构体自身时&#xff0c;用.调用成员变量&#xff1b;为结构体指针时&#xff0c;用->调用成员变量 所以存在结构体数组时&#xff0c;调用数组元素里的成员变量&#xff0c;就是要用. 结构体自身只有在new时才会创建出来&#xff0c;而其指针可以随意创建 在用new时&…
阅读更多...
Android Security PIN 相关代码

Android Security PIN 相关代码

开发项目遇到一个问题&#xff0c;具体描述及复制步骤如下&#xff1a; 就是开启"Enhanced PIN privacy"(增强的PIN隐私)的时候输入秘密的时候还是会显示数字 如下图&#xff0c;应该是直接是“.” 不应该出现PIN 密码 想要的效果如下图&#xff1a; 设置的步骤如下图…
阅读更多...
RabbitMQ 和 Kafka 对比

RabbitMQ 和 Kafka 对比

本文对RabbitMQ 和 Kafka 进行下比较 文章目录 前言RabbitMQ架构队列消费队列生产 Kafka本文小结 前言 开源社区有好多优秀的队列中间件&#xff0c;比如RabbitMQ和Kafka&#xff0c;每个队列都貌似有其特性&#xff0c;在进行工程选择时&#xff0c;往往眼花缭乱&#xff0c;不…
阅读更多...
Flask 账号详情展示

Flask 账号详情展示

Flask 账号详情展示 这段代码是一个基于Flask框架的Python应用程序。 它包含了两部分代码&#xff1a;Python代码和HTML代码。 web/templates/common/tab_account.html <div class"row border-bottom"><div class"col-lg-12"><div cla…
阅读更多...
多态-多态的基本概念-类和对象

多态-多态的基本概念-类和对象

多态的基本 #include<iostream> using namespace std; //动物类 class Animal { public:virtual void Speak(){cout << " 动物在噢噢叫" << endl;} }; //猫类 class Cat :public Animal { public:void Speak(){cout << "小猫在噢噢叫&…
阅读更多...
C++系列-第3章循环结构-26-认识do-while语句

C++系列-第3章循环结构-26-认识do-while语句

C系列-第3章循环结构-26-认识do-while语句 在线练习&#xff1a; http://noi.openjudge.cn/ https://www.luogu.com.cn/ 对于 while 语句而言&#xff0c;如果不满足条件&#xff0c;则不能进入循环。但有时候我们需要即使不满足条件&#xff0c;也至少执行一次。 do-while循环…
阅读更多...
CORS靶场安装测试记录

CORS靶场安装测试记录

目录 环境 搭建 源码地址 环境 kali 搭建 1. 源码存放 /var/www/html 2. 创建数据库 mysql create database ica_lab; show databases; 3. SQL命令创建一个名为“billu”的新用户 create user admin@% identified by gesila; flush privileges; 4. 设置用户可远程登…
阅读更多...
深入理解技术内容运营

深入理解技术内容运营

技术内容营销 营销是一种商业策略&#xff0c;涉及识别客户需求并确定如何最好地满足这些需求。换句话说&#xff0c;它旨在确保企业或产品以吸引目标受众的方式定位&#xff0c;鼓励他们购买。该策略包含多个方面&#xff0c;包括市场研究、品牌建设、产品开发、销售、促销和…
阅读更多...
购买腾讯云服务器需要多少钱?购买腾讯云服务器方法教程

购买腾讯云服务器需要多少钱?购买腾讯云服务器方法教程

腾讯云轻量应用服务器购买指南&#xff0c;有两个入口&#xff0c;一个是在特价活动上购买&#xff0c;一个是在轻量应用服务器官方页面购买&#xff0c;特价活动上购买价格更便宜&#xff0c;轻量2核2G3M带宽服务器62元一年起&#xff0c;阿腾云atengyun.com分享腾讯云轻量应用…
阅读更多...
LeetCode 之算法篇（1）

LeetCode 之算法篇（1）

本篇文章做leetcode top 100的的一些内容总结&#xff0c;以供后面复习使用 文章目录 题目41. 缺失的第一个正数 &#xff08;未掌握&#xff09;合并区间轮转数组238. 除自身以外数组的乘积 题目 41. 缺失的第一个正数 &#xff08;未掌握&#xff09; 这道题的关键点在于对桶…
阅读更多...
Leetcod面试经典150题刷题记录 —— 区间篇

Leetcod面试经典150题刷题记录 —— 区间篇

Leetcod面试经典150题刷题记录 —— 区间篇 1. 汇总区间2. 合并区间3. 插入区间4. 用最少数量的箭引爆气球 1. 汇总区间 题目链接&#xff1a;汇总区间 - leetcode 题目描述&#xff1a; 给定一个 无重复元素 的 有序 整数数组 nums 。返回 恰好覆盖数组中所有数字 的 最小有序…
阅读更多...
算法导论复习纲要

算法导论复习纲要

函数 1. 上界下界&#xff0c;紧确界的定义 2. 求解递推式&#xff0c;代入法&#xff0c;递归树法&#xff0c;主方法 分治算法 动态规划 1. 切割钢条&#xff1a;递归方法&#xff0c;动态的自上而下&#xff0c; 2. 矩阵乘法&#xff1a;最优子结构性的证明&#xff0c…
阅读更多...
Go语言学习

Go语言学习

1、运行和解析 go run 命令已包含了编译和运行。它会先在一个临时目录编译程序&#xff0c;然后执行完后清理掉. 如果在run的后面加上 --work参数来查看临时目录。 go run --work main.go也可以通过go build命令来编译代码&#xff0c;执行后会生成一个可以执行文件&#xff…
阅读更多...
HIVE笔记

HIVE笔记

表关联 内连接&#xff08;INNER JOIN&#xff09; 返回两个表中满足关联条件的记录。 SELECT * FROM t1 INNER JOIN t2 ON t1.col1 t2.col2;左连接&#xff08;LEFT JOIN&#xff09; 返回左表中的所有记录&#xff0c;以及右表中满足关联条件的记录。 SELECT * FRO…
阅读更多...
最新文章

Copyright @ 2022~2023