SpringBoot入門二十五,默認的404錯誤頁面引入css和js文件

時間 2020-06-29

標籤 springboot 入門二十五默認錯誤頁面引入 css 文件欄目 Spring 简体版

原文原文鏈接

Springboot默認的404,500等頁面的位置在static的error中,能夠直接訪問,無需單獨編寫映射器javascript

若是咱們想美化一下這些錯誤提示頁面,那麼static下面css中的文件是不能直接飲用的,由於根據錯誤發生時路徑的層級不一樣,錯誤頁面的層級也會發生變化,這樣就會致使部分錯誤請求返回的錯誤頁面樣式不能正常顯示,所以咱們須要直接在錯誤頁面中編寫css或者採用全路徑的方式引入對應的css,如今咱們來用第二種方式實現,先放一下文件目錄：css

如今來上404頁面代碼:html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>404 頁面不存在</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">

  <script type="text/javascript">
      //獲取項目訪問路徑,最後帶"/"
      function getProjectPath() {
        // 獲取IP+端口
        var rootPath = window.location.protocol + '//' + window.location.host + "/";
        // 獲取項目訪問路徑
        var pathName = window.document.location.pathname;
        // 獲得項目名稱
        pathName = pathName.substring(1, pathName.substr(1).indexOf('/') + 2);
        if (pathName == '/error/') {
            pathName = "";
        }
        return rootPath + pathName;
      }

      function loadStyles(url) {
          // 獲取項目訪問路徑
          var projectPath = getProjectPath();
          var link = document.createElement("link");
          link.rel = "stylesheet";
          link.type = "text/css";
          link.href = projectPath + url;
          var head = document.getElementsByTagName("head")[0];
          head.appendChild(link);
      }

      // 引入Css文件
      loadStyles("js/layui/css/layui.css");
      loadStyles("css/style/admin.css");
      loadStyles("css/common/public.css");
  </script>
</head>
<body>

<div class="layui-fluid">
  <div class="layadmin-tips">
    <i class="layui-icon" face>&#xe664;</i>
    <div class="layui-text">
      <h1>
        <span class="layui-anim layui-anim-loop layui-anim-">4</span> 
        <span class="layui-anim layui-anim-loop layui-anim-rotate">0</span> 
        <span class="layui-anim layui-anim-loop layui-anim-">4</span>
      </h1>
      <span style="font-size: 20px;">您要訪問的頁面丟失了...</span>
    </div>
  </div>
</div>
</body>
</html>