JHipster一知半解- 4.6.1 webapp-目錄結構

weixin_34353714發表於2018-06-13
WebAPP

迴文集目錄:JHipster一知半解

目錄結構

  1. 主目錄位於“\src\main\webapp”，
    在tscconfig.json中指定檔案目錄：
"include": [
        "src/main/webapp/app",
        "src/test/javascript/"
    ]

在webpack.dev.js,webpack.prod.js中指定入口：

entry: {
        polyfills: './src/main/webapp/app/polyfills',
        global: './src/main/webapp/content/css/global.css',
        main: './src/main/webapp/app/app.main'
    },
  1. app目錄：
    Angular程式的主目錄，後面程式碼的分析的主體部分。
  2. content目錄：
    包含需要打包的靜態資源（css和image），類似於assert，僅僅copy並hash重新命名，並沒有打包在生產的css或js中。
  3. i18n目錄：
    內部按照語種存放語種檔案，在webpack打包時候會整合成一個××.json的語言包，由ngx-translate統一載入。
  4. swagger-ui目錄：
    swagger中jhipster做了修改的自定義部分，其他包含在（node—_modules/swagger-ui)中。
  5. 404.html
    標準的錯誤頁面，提供給執行在tomcat這樣的容器時找不到頁面的錯誤顯示。理論上，我們生成的前端工程是SPA單頁面，應該設定的頁面在找不到路由時候返回index，然後由前端去自行解析url處理路由。也就是說，這個頁面正常是不起作用的。
  6. manifest.webapp
    網站描述檔案，前端快取用，webpack打包也就是copy到target目錄。
  7. robots.txt
    給google機器人用的網站描述檔案。JHipster是SPA，那麼與後端的api就自然出現在
    Disallow中了。

小動作-給index新增載入效果

JHipster前端SPA，直接開啟後要等所有資源載入完畢才顯示（雖然已經做了子模組，但是並沒有做懶載入？），這樣在網路頻寬比較慢的情況下，就會出現長時間“白螢幕”，這顯然不是很好的使用者體驗。由angular的執行原理可以知道，程式載入後，會找index.html中<jhi-main>標籤，清空其內容，在之後新增angluar主介面。那麼，之前我們利用這個原理，向<jhi-main>標籤加東西

不要空白-新增文字。

<jhi-main>
    <div>
        <h1>Loading</h1>
    </div>
</jhi-main>

這樣就能顯示一個“Loading”字串，防止白螢幕

借鑑ngx-admin

TODO:此處應該有ngx-admin的圖片和網站。
通過檢視其index，發現它是加了一段動畫效果，直接copy過來即可

<jhi-main>
  <style>@-webkit-keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}@-moz-keyframes spin{0%{-moz-transform:rotate(0)}100%{-moz-transform:rotate(360deg)}}@keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}.spinner{position:fixed;top:0;left:0;width:100%;height:100%;z-index:1003;background: #ffffff;overflow:hidden}  .spinner div:first-child{display:block;position:relative;left:50%;top:50%;width:150px;height:150px;margin:-75px 0 0 -75px;border-radius:50%;box-shadow:0 3px 3px 0 rgba(255,56,106,1);transform:translate3d(0,0,0);animation:spin 2s linear infinite}  .spinner div:first-child:after,.spinner div:first-child:before{content:'';position:absolute;border-radius:50%}  .spinner div:first-child:before{top:5px;left:5px;right:5px;bottom:5px;box-shadow:0 3px 3px 0 rgb(255, 228, 32);-webkit-animation:spin 3s linear infinite;animation:spin 3s linear infinite}  .spinner div:first-child:after{top:15px;left:15px;right:15px;bottom:15px;box-shadow:0 3px 3px 0 rgba(61, 175, 255,1);animation:spin 1.5s linear infinite}</style>
  <div id="nb-global-spinner" class="spinner">
    <div class="blob blob-0"></div>
    <div class="blob blob-1"></div>
    <div class="blob blob-2"></div>
    <div class="blob blob-3"></div>
    <div class="blob blob-4"></div>
    <div class="blob blob-5"></div>
  </div>
</jhi-main>

當然，發現黑色的背景，和JHipster差別太大，把background改成#ffffff，稍微好看一點點。
TODO:加效果圖

借鑑PrimeNG

PrimeNG的index就比較複雜了，是一個圖片加上一個css，而且也不是內嵌到html檔案中，而是獨立的，借鑑過來稍微複雜一點。

1. splash.css拷貝到content/css/splash.css
2. mask.svg拷貝到content/images/mask.svg
3. index.html做如下修改(僅列出增加的部分）：

<head>
<link rel="stylesheet" type="text/css" href="./content/splash.css">
</head>
<body>
    <jhi-main>
        <div class="splash-screen">
            <div class="splash-loader"></div>
            <img class="splash-logo" src="./content/images/mask.svg">
        </div>
    </jhi-main>
</body>    

4.webpackCommon.js的CopyWebpackPlugin增加：

new CopyWebpackPlugin([
    { from: './src/main/webapp/content/css/splash.css', to: 'content/splash.css' }
]),

稍微解釋一下，svg放content/images會由webpack的file-loader拷貝過去並hash從命名，並且會自動修改生成的index.html，所以圖片只需要放入該目錄即可。
而css是有指定的global.css作為入口處理的（如果是sass，就會有個先編譯在載入的過程），僅僅放到目錄，而沒有引用，肯定是沒法載入的，而且打包在一起和我們提前顯示的目的相違背。所以就需要利用CopyWebpackPlugin，把它copy到目標目錄，這樣就可以在<jhi-main>標籤生成前顯示給使用者。

相關文章