gpt4 book ai didi

javascript - 模板缓存 ExpressJS

转载 作者:行者123 更新时间:2023-12-03 06:32:37 25 4
gpt4 key购买 nike

我在 MEAN 应用程序中的模板缓存方面遇到一些困难。我有一个导航栏,它使用条件逻辑来显示/隐藏向用户显示的按钮。当用户点击页面时,这些值将被设置为 null 或 false,但是一旦他们登录,这些值就会改变(views、isLoggedIn)

我的问题是这样的 - 当我第一次点击该页面时,这些值按预期设置为 null/false,并且按钮被隐藏。

但是,成功登录后, Angular 登录 Controller 将通过 $location.path("/pathAfterLogin"); 进行重定向,并将用户带到正确的状态,但带有隐藏按钮。只有在进行硬刷新 (control-f5) 后,页面才会刷新并根据 app.js 文件中设置的值显示相应的按钮。

我正在使用 Angular 1.5,UI 路由器,Express 4 , Swig templates ,以及 consolidate模板引擎。 NODE.ENV 即将开发。

我也尝试过在我能想到的每个地方禁用缓存。

我的 app.js 文件如下所示:

'use strict';

var express = require('express'),
path = require('path'),
cons = require('consolidate'),
swig = require('swig');


module.exports = function() {
var app = express(); //start an express app app.disable('view cache');

app.engine('html', cons.swig);

app.set('view engine', 'html');
app.set('views',path.join(__dirname,'../app/views'));
app.set('view cache', false ); //set cache

swig.setDefaults({ cache: false });

app.get('*', stuff.test, function(req, res, next) {
res.setHeader('Cache-Control', 'no-cache');
res.render('index', {
cache: false,
views: req.views,
isLoggedIn: req.isLoggedIn
});
});
return app;
};

HTML 文件是我的主要布局/ View ,因为这是一个打开了 URL 重写的单页应用程序。下面的index.html 文件包含一个导航文件。

<!doctype html>
<html ng-app="myapp" ng-cloak xmlns="http://www.w3.org/1999/html">
<head>
<base href="/" />
( truncated ... )
</head>

<body>
<header>{% include "../../public/templates/header.html" %}</header>
<header>{% include "../../public/templates/navigation.html" %}</header>
<div class="res whitespace">

<ui-view/>
</div>

</body>
<script src = "angular.js"></script>
<script src = "loginCtrl.js"></script>
<script src = "loginSrvc.js"></script>
</html>

包含的导航文件:

<div id="subtitle">
<ul class="nav nav-pills pull-right">
{% if !isLoggedIn %}<li ui-sref-active="active"><a ui-sref="login">Login</a></li>{% endif %}
{% if isLoggedIn %}<li ui-sref-active="active"><a ui-sref="logout">Logout</a></li>{% endif %}
{% for item in views %}
{% if item == "linkA" %}<li ui-sref-active="active"><a ui-sref="linkA">LinkA</a></li>{% endif %}
{% if item == "LinkB" %}<li ui-sref-active="active"><a ui-sref="linkB">LinkB</a></li> {% endif %}
{% endfor %}
{% if !isLoggedIn %}<li ui-sref-active="active"><a ui-sref="info">Info </a></li>{% endif %}
<li class="dropdown"ui-sref-active="active">
{% for item in views %}
{% if resource == "mainDD" %} <a class="dropdown-toggle" data-toggle="dropdown" href="#"> Drop Downs <span class="caret"></span></a>
<ul class="dropdown-menu">
{% for item in permissions %}
{% if item == "link1" %}<li><a ui-sref="link1">Link 1</a></li>{% endif %}
{% if item == "link2" %}<li><a ui-sref="link2">Link 2</a></li>{% endif %}
{% endfor %}
</ul>
{% endif %}
{% endfor %}
</li>
</

ul>

我有 2 个问题:

  1. 缓存是否已适当关闭?如果不是,我哪里出错了?
  2. 关闭缓存时这是预期的行为吗?

最佳答案

问题在于您将后端模板与前端路由混合在一起:

{% if isLoggedIn %}<li ui-sref-active="active"><a ui-sref="logout">Logout</a></li>{% endif %}

isLoggedIn是一个服务器端变量,用于确定其内容( <li> )是否应显示在生成的 HTML 中。

如果用户在生成 HTML 时尚未登录,则只有模板的完整(服务器端)重新呈现才会导致“注销”按钮出现在提供给浏览器的 HTML。

要解决此问题,您需要重新加载页面(我已经有一段时间没有使用 Angular,但 $window.location.reload() 曾经可以工作),以便服务器有机会提供更新的 HTML。

或者,您可以考虑将是否显示特定页面元素的模板逻辑移至 Angular:

<li ng-if="loggedIn" ui-sref-active="active"><a ui-sref="logout">Logout</a></li>

(其中 loggedIn 是 Controller 中的变量)

需要明确的是:这与缓存无关。 Express 中的 View 缓存不会缓存渲染的模板(即 HTML),而是缓存已编译的模板(通常,必须从文件中读取模板,进行处理或“编译”,然后准备好用于渲染)。

关于javascript - 模板缓存 ExpressJS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38379704/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com