1. 程式人生 > >Web靜態資源處理方案

Web靜態資源處理方案

1. 背景說明 由於前端頁面使用到了iframe,經常會出現JS/CSS更新之後,頁面無法自動重新整理以及按F5也無法重新整理的問題,需要點選“重新載入框架”才能成功重新整理頁面。這會影響普通使用者的使用。 2. 解決方案 問題原因,iframe快取了靜態資原始檔,在F5重新整理時並不會重新整理iframe中的快取。 解決思路,在每次釋出時,修改靜態資源的路徑,使得訪問新版本的頁面時一定去下載新的資原始檔。 3. 具體實現 1) 引入版本號的概念,在每次釋出時修改版本號的資訊。
######當前版本號
#VERSION=1_0_20161010_1
VERSION=


注意:這裡VERSION設定為空,表示使用不帶版本號的resources 2) 將版本號資訊通過攔截器注入到每個頁面
public class LoginInterceptor implements HandlerInterceptor {

       public void postHandle(HttpServletRequest request, HttpServletResponse response, Object handler, ModelAndView m)
                     throws Exception {
              if (m != null) {
                     m.addObject("pwVersion", GlobalProperties.getVersion());
              }
       }

}
3) 頁面在引用靜態資源時,新增版本號資訊到resources資料夾後面
<link rel="stylesheet" type="text/css" href="resources${pwVersion}/css/index.css" />
<link rel="stylesheet" type="text/css" href="resources${pwVersion}/css/style.css" />
<link rel="stylesheet" type="text/css" href="resources${pwVersion}/css/one.css" />
<script type="text/javascript" src="resources${pwVersion}/js/jquery.js"></script>
<script type="text/javascript" src="resources${pwVersion}/js/common.js"></script>
<script type="text/javascript" src="resources${pwVersion}/js/tool.js"></script>
在這套方案搭建完成後,這是開發過程中唯一需要處理的地方。 4) 建立啟動時載入的servlet,來複制靜態資源到新的帶版本號的路徑中
public class StartUpServlet extends HttpServlet {

       private static final Log LOG = LogFactory.getLog(StartUpServlet.class);

       private static final long serialVersionUID = 1L;

       @Override
       public void init() throws ServletException {
              super.init();

              copyStaticResources();
       }

       private void copyStaticResources() {
              String realPath = getServletContext().getRealPath("/resources/");
              String newPath = getServletContext().getRealPath("/resources" + GlobalProperties.getVersion() + "/");

              if (!realPath.equals(newPath)) {
                     File existResources = new File(realPath);
                     File destResources = new File(newPath);

                     if (destResources.exists()) {
                           FileTool.delDir(newPath, true);
                     }

                     if (existResources.exists()) {
                           try {
                                  FileTool.copy(realPath, newPath, true);
                           } catch (Exception e) {
                                  e.printStackTrace();
                           }
                     }
              }
       }

}
<servlet>
    <description></description>
    <display-name>StartUpServlet</display-name>
    <servlet-name>StartUpServlet</servlet-name>
    <servlet-class>com.szyciov.pw.servlet.StartUpServlet</servlet-class>
    <load-on-startup>3</load-on-startup>
</servlet>
<servlet-mapping>
    <servlet-name>StartUpServlet</servlet-name>
    <url-pattern>/StartUpServlet</url-pattern>
</servlet-mapping>

這樣,在每次釋出時,只需要修改版本號,即可實現靜態資源連結的更新。