回文集目录: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>标签生成前显示给用户。
网友评论