javascript - flask 只是刷新页面的模板化部分-6ren

javascript - flask 只是刷新页面的模板化部分

转载作者：行者123 更新时间：2023-12-05 06:25:55

我有一个使用模板的简单 Flask 应用程序。

每次我点击导航(在 base.html 中)的某处时，它会刷新整个页面，我宁愿它只在模板内刷新，因为我在导航栏中有可折叠的元素，当整个页面重新加载。

当我点击导航栏中的链接时，如何只重新加载我想要呈现的新模板而不是导航栏？

这里有一些代码供引用:

基础.html

<!DOCTYPE html>
<html lang="en">
  <head>
    ...
  </head>
  <body>
    <script>
      // Hide submenus
      $('#body-row .collapse').collapse('hide');

      // Collapse/Expand icon
      $('#collapse-icon').addClass('fa-angle-double-left');

      // Collapse click
      $('[data-toggle=sidebar-colapse]').click(function() {
          SidebarCollapse();
      });

      function SidebarCollapse () {
          $('.menu-collapsed').toggleClass('d-none');
          $('.sidebar-submenu').toggleClass('d-none');
          $('.submenu-icon').toggleClass('d-none');
          $('#sidebar-container').toggleClass('sidebar-expanded sidebar-collapsed');

          // Treating d-flex/d-none on separators with title
          var SeparatorTitle = $('.sidebar-separator-title');
          if ( SeparatorTitle.hasClass('d-flex') ) {
              SeparatorTitle.removeClass('d-flex');
          } else {
              SeparatorTitle.addClass('d-flex');
          }

          // Collapse/Expand icon
          $('#collapse-icon').toggleClass('fa-angle-double-left fa-angle-double-right');
      }
    </script>
    <style>
    </style>

    {% include 'nav-mini.html' %}

    <!-- Bootstrap row -->
    <div class="row" id="body-row">

        {% include 'nav-side.html' %}

        <!-- MAIN -->
        <div class="col py-3">
          <article class=flashes>
            {% with messages = get_flashed_messages() %}
              {% if messages %}
                <ul>
                  {% for message in messages %}
                    <li>{{ message}}</li>
                  {% endfor %}
                </ul>
              {% endif %}
            {% endwith %}
          </article>

          {% block content %}
          {% endblock %}
        </div>
        <!-- Main Col END -->

    </div>
    <!-- body-row END -->
  </body>
</html>

sidenav.html

<!-- Sidebar -->
<div id="sidebar-container" class="sidebar-expanded d-none d-md-block col-2">
    <ul class="list-group sticky-top sticky-offset">
      {% if sidenavs %}
        {% for heading, stuff in sidenavs.items() %}
          <li class="list-group-item sidebar-separator-title text-muted d-flex align-items-center menu-collapsed">
            <a href="#page{{heading}}" data-toggle="collapse" class="dropdown-toggle">
              <br />
              {{ heading }}
            </a>
          </li>
          <br />
          <ul class="collapse list-unstyled" id="page{{heading}}">
          {% for name, address in stuff.items() %}
            <a href="{{ address }}" class="bg-dark list-group-item list-group-item-action">
              <div class="d-flex w-100 justify-content-start align-items-center">
                <span class="fa fa-tasks fa-fw mr-3"></span>
                <span class="menu-collapsed">{{ name }}</span>
              </div>
            </a>
          {% endfor %}
          </ul>
        {% endfor %}
      {% endif %}
    </ul>
    <div class="footer">
      <h3><center>WCF Insurance</center></h3>
    </div>
</div>
<!-- sidebar-container END -->

App.py( flask 应用程序)

...
from flask import Flask, url_for, render_template, redirect, jsonify
...
app = Flask(__name__)
CWD = os.path.dirname(os.path.abspath(__file__))
...
@app.route('/bokeh-example')
def page_bokeh_example():
    ''' iframe for Bokeh Example '''
    resp = {
        'mininavs': get_mini_nav(),
        'sidenavs': get_side_nav(),
        'iframe_url': get_iframe_url('Bokeh Example'), }
    return render_template('iframe.html', **resp)
....
if __name__ == '__main__':
    app.run(host='0.0.0.0', port=5020)

注意我正在使用 render_template() flask 函数。

最佳答案

我在 body 标签的 onload 属性中添加了一个 JavaScript 函数调用，其中包含以下代码

function setMenuState(){
  if (window.sessionStorage.getItem("MenuState") == null){
    window.sessionStorage.setItem("MenuState", "--isHidden");
  }

  if(window.sessionStorage.getItem("MenuState") != "--isHidden"){
    toggleMenu();
    window.sessionStorage.setItem("MenuState", "");
  }
}

function toggleMenu(){
  const textnames = ["","",""]
  const sidebarE1 = document.getElementsByClassName("sidebar")[0];
  const contentE1 = document.getElementsByClassName("content")[0];
  let menuItems = document.getElementsByClassName("fa");
  sidebarE1.classList.toggle("sidebar--isHidden");
  contentE1.classList.toggle("content--isHidden");
  for(item in menuItems){
    if(menuItems[item].innerHTML === textnames[item]){
      menuItems[item].innerHTML = "";
    }else{
      menuItems[item].innerHTML = textnames[item];
    }
  }
  if(window.sessionStorage.getItem("MenuState") != "--isHidden"){
    window.sessionStorage.setItem("MenuState", "--isHidden");
  }else{
    window.sessionStorage.setItem("MenuState", "");
  }
}

<body onload="setMenuState()">

如果在您单击链接时菜单处于打开状态，这仍然会运行菜单动画，但它会在 session 存储中保留打开/关闭状态。

更新:我已经(大部分)解决了菜单动画在页面加载时播放的动画问题。

function setMenuState(){
  const sidebarE1 = document.getElementsByClassName("sidebar")[0];
  const contentE1 = document.getElementsByClassName("content")[0];
  if (window.sessionStorage.getItem("MenuState") == null){
    window.sessionStorage.setItem("MenuState", "--isHidden");
  }

  if(window.sessionStorage.getItem("MenuState") != "--isHidden"){
    toggleMenu();
    window.sessionStorage.setItem("MenuState", "");
  }
  setTimeout(()=>{
  if(!sidebarE1.classList.contains("sidebar-animated")){
    sidebarE1.classList.add("sidebar-animated");
    contentE1.classList.add("content-animated");
  }}, 250);
}

.content {
  background-color: #000000;
  padding: 2rem;
  height: 100vh;
  position: fixed;
  width: 100%;
  opacity: 1;
  margin-left: 4rem;
  color: #00ff00;
  top: 8rem;
  overflow: scroll;
  padding-bottom: 32rem;
  z-index: 1;
}
.content-animated {
  transition: transform 500ms linear;
}

通过将实际的过渡属性移动到它自己的 css 类中，并且只在页面加载后约 250 毫秒添加该类，菜单的位置和状态设置为没有动画，并且在第一次点击之前设置动画。

关于javascript - flask 只是刷新页面的模板化部分，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56589484/

文章推荐： directus - 无法访问 Directus 中的用户 token

flask - Flask-Potion + Flask-Principal锁定用户资源
我正在遵循Flask-potion教程并尝试保护我的api。我一直试图找出如何在User端点上设置权限，以使一个User无法查看另一个User的记录。这是我的代码： class UserResourc
flask - 如何使用 pytest-flask 将发布数据发送到 flask
项目设置 Python 3.5.3 flask 0.12.2 目录 . ├── Core │ ├── BackgroundProcessManager.py │ ├── FirebaseDat
flask - 使用带有 flask 脚本和应用程序工厂的 flask 迁移
我正在构建 flask 应用程序并决定这次尝试应用程序工厂方法，但是遇到了 flask 迁移的麻烦并且无法找出简单的解决方案。请注意，我想将配置位置作为选项传递给脚本管理.py: manager
flask - 如何在现有 Flask 应用中使用 Flask-APScheduler
我尝试通过以下示例代码来熟悉Flask-APScheduler插件:https://github.com/viniciuschiele/flask-apscheduler/blob/master/ex
flask-jwt - flask jwt和 flask jwt扩展之间有区别吗？
我一周前刚刚了解了 Flask 和 JWT，所以我真的需要一些帮助。有人可以解释一下flask-jwt和flask-jwt-extended之间的区别吗？最佳答案 Flask-JWT 没有那么多功能
flask - flask 中不同类型的用户注册
我是 Flask 的新手，我只是想用它创建一个简单的市场。我的网站上有三种类型的用户 [卖家、买家、管理员]。我认为每种类型的用户都应该有自己的注册和登录，因为他们的角色应该提供不同类型的信息。另一方
flask - Flask:从数据库内容动态填充表单
基本上，我想做一些非常简单的事情：我想创建一个用于删除数据库中条目的表单。模板正在创建一个包含所有条目的html表，没有任何麻烦。我现在的问题是：如何将其转换为每行都有链接的表单。当然，我可以通过
flask - Flask-如何将查询字符串参数转换为路由参数
我对Flask来说非常陌生，其中一个基本要求是我需要SEO友好的URL。我说一条路线 @app.route('/sales/') @app.route(/sales/) def get_sales(
flask - [Flask]-自定义Flask用户登录
一直在为用户管理系统开发Flask-user，但是我看不到自定义登录页面和注册页面的方法。我使用pip安装了flask-user pip install flask-user 任何帮助，将不胜感激最
flask - flask 蓝图不起作用
我有一个奇怪的情况，不知道如何找到问题。我已经创建了一个这样的蓝图 reportjobsmod = Blueprint('jobreports', __name__, url_prefix='/jo
flask - Flask 应用程序中的内存数据
我认为在 Flask 中拥有实例变量的正确方法是添加用户和 session ，但我正在尝试测试一个概念，我还不想经历所有这些。我试图让一个网络应用程序将图像加载到一个变量中，然后可以对其执行不同的图像
flask - flask wtf中如何从SelectField获取选中的数据
select = SelectField("City") form.select.choices = [(places['name'], places['name']) for places in p
flask - 如何登录 flask
这个问题在这里已经有了答案: Provide extra information to Flask's app.logger (2 个回答) 3年前关闭。我正在运行一个 flask 应用程序。我想写
flask - flask 问题和错误的请求
我当时正在编程一个非常不错的api，使用json从游戏服务器到我的网站空间获取一些json数据，但是每次我使用angular发送请求时，我都会得到以下信息:127.0.0.1--[20 / Mar
flask - flask 自定义错误处理的上传功能
我已经开发了一个上传表单，以将特定的.xlsx文件作为上传。要求是要处理非xlsx上载的任何异常(例如zip，exe文件)。我正在使用pyexcel库读取上传内容。我尝试创建以下代码来处理此异常: e
flask - flask 404捕获要求的网址
我使用此功能在网站上捕获404错误: @app.errorhandler(404) def page_not_found(e): logger.warning('User raised an
flask-restful - Flask Restful 和 Flask SocketIO 服务器一起运行
我正在尝试同时使用 Flask Restful 和 Flask SocketIO。我已经制作了一个 Flask Restful 应用程序，但现在我想使用 Flask SocketIO 在客户端和我的服
flask - 在代码或 `flask run` 命令中指定 Flask 重新加载监视列表(extra_files)
我有一些 Flask 应用程序，我通过设置 FLASK_APP 来运行它们。环境变量和调用 flask run .自 FLASK_DEBUG也设置了，每当我更改一些代码时，应用程序都可以方便地重新加载
python - Flask - 不能使用来自其他文件的 Flask 和 Flask-mail 实例
我目前正在使用 Flask 构建一个应用程序。我正在努力访问 Flask 实例“app”以及 Flask-mail 实例“mail”。下面是我的项目的样子: └── my-project ├
flask - Flask-Login 的 `remember_me` 是否覆盖 Flask 的 `permanent` ？
Remember-me是 parameter flask_login.login_user(user, remember=False, duration=None, force=False, fres

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - flask 只是刷新页面的模板化部分