JHipster一知半解- 4.6.1 webapp-目录结构

2018-06-13 本文已影响155人沉寂之舟

回文集目录:JHipster一知半解

目录结构

主目录位于“\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'
    },

app目录：
Angular程序的主目录，后面代码的分析的主体部分。
content目录：
包含需要打包的静态资源（css和image），类似于assert，仅仅copy并hash重命名，并没有打包在生产的css或js中。
i18n目录：
内部按照语种存放语种文件，在webpack打包时候会整合成一个××.json的语言包，由ngx-translate统一加载。
swagger-ui目录：
swagger中jhipster做了修改的自定义部分，其他包含在（node—_modules/swagger-ui)中。
404.html
标准的错误页面，提供给运行在tomcat这样的容器时找不到页面的错误显示。理论上，我们生成的前端工程是SPA单页面，应该设置的页面在找不到路由时候返回index，然后由前端去自行解析url处理路由。也就是说，这个页面正常是不起作用的。
manifest.webapp
网站描述文件，前端缓存用，webpack打包也就是copy到target目录。
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>标签生成前显示给用户。