thyemleaf：禁用JS缓存

Posted 2020-11-03 小溪（潺潺流水，润泽千里）

在开发时经常需要调整JS，但是调整后由于页面缓存的原因，看不到实时效果。

开发环境：springboot+thymeleaf

1.配置文件多模式

2.获得当前的激活的模式和随机数

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.boot.context.properties.ConfigurationProperties;
import org.springframework.context.annotation.PropertySource;
import org.springframework.core.env.Environment;
import org.springframework.stereotype.Component;

/**
 * 
 * 类描述： 项目主配置文件
 *
 */
@Component(value = "app")
@ConfigurationProperties(prefix = "app")
@PropertySource("classpath:/config/app.properties")
public class PropertiesApp {

  @Autowired
  private Environment env;

  private String staticURL;
  private String publicURL;
  private String appURL;

  public final String getStaticURL() {
    return staticURL;
  }

  public final void setStaticURL(String staticURL) {
    this.staticURL = staticURL;
  }

  public final String getPublicURL() {
    return publicURL;
  }

  public final void setPublicURL(String publicURL) {
    this.publicURL = publicURL;
  }

  public final String getAppURL() {
    return appURL;
  }

  public final void setAppURL(String appURL) {
    this.appURL = appURL;
  }

  /**
   * 获得：随机数，用作禁用页面缓存
   *
   * @return the Rint
   */
  public final long getRnd() {
    return System.currentTimeMillis();
  }

  /**
   * 获得激活的配置文件属性
   * 
   * @return
   */
  public String getActive() {
    return env.getProperty("spring.profiles.active");
  }

}

3.在页面中判断模式和随机数

<div th:fragment="js-index">
    <th:block th:switch="${@app.getActive()}">
        <script th:case="\'prod\'" type="text/javascript" th:src="(${@app.getAppURL()})+\'js/index.js\'"></script>
        <script th:case="\'dev\'" type="text/javascript" th:src="(${@app.getAppURL()})+\'js/index.js?rnd=\'+(${@app.getRnd()})"></script>
    </th:block>
</div>

${@app.getActive()} 获得当前的激活模式

${@app.getRnd()} 获得随机数

生成的html：

这样每次加载的JS都是最新的，记住对业务JS实施，不要对公共的JS去做。