src/main/resources/public/css/install.css

@@ -9,8 +9,8 @@ html, body {
 }
 
 .box {
-    width: 40vw;
+    width: 600px;
-    height: 50vh;
+    height: 45vh;
     padding: 8px 10px;
     border: 1px solid rgba(50, 50, 50, .1);
     border-radius: 3px;
@@ -23,16 +23,27 @@ html, body {
 .box-inner {
     height: 100%;
     width: 100%;
-    background: #ececec;
+    overflow: hidden;
 }
 
 .box-inner select, input, button {
     width: 90%;
-    margin: 8px 5%;
+    margin: 12px 5%;
+    height: 40px;
+    padding: 5px 10px;
+    border-radius: 3px;
+    border: 1px solid rgba(50, 50, 50, .1);
+    box-sizing: border-box;
+}
+
+input:focus {
+    border: 1px solid rgba(0, 50, 50, .6);
+    outline: none;
 }
 
 .box-inner h3 {
     text-align: center;
+    margin-bottom: 20px;
 }
 
 .err-msg {
@@ -44,6 +55,56 @@ html, body {
     font-weight: lighter;
 }
 
+
 .show-err-tip {
     display: block;
-}
+}
+
+#first-page, #second-page {
+    height: 100%;
+    margin: 10px 0;
+}
+
+.hidden {
+    height: 0 !important;
+    visibility: hidden;
+    position: absolute;
+}
+
+.show {
+    width: 100%;
+    position: relative;
+    height: 100%;
+    visibility: visible;
+}
+
+
+#next-step, .button-group {
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 10px;
+}
+
+.button-group button {
+    width: 80px;
+}
+
+.button-group #install {
+    position: absolute;
+    bottom: 0;
+    right: 20px;
+    background: #1890ff;
+    color: white;
+}
+
+.loading-show {
+    z-index: 10000;
+    display: flex !important;
+    position: fixed;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    top: 0;
+}
+

src/main/resources/public/css/loading.css

@@ -0,0 +1,171 @@
+.pacman {
+    position: relative;
+}
+
+
+.loading {
+    box-sizing: border-box;
+    flex: 0 1 auto;
+    display: none;
+    flex-direction: column;
+    flex-grow: 1;
+    flex-shrink: 0;
+    flex-basis: 100%;
+    max-width: 100%;
+    /*height: 200px;*/
+    align-items: center;
+    justify-content: center;
+    background: #ececec;
+}
+
+
+.pacman > div:nth-child(2) {
+    -webkit-animation: pacman-balls 1s 0s infinite linear;
+    animation: pacman-balls 1s 0s infinite linear;
+}
+
+.pacman > div:nth-child(3) {
+    -webkit-animation: pacman-balls 1s 0.33s infinite linear;
+    animation: pacman-balls 1s 0.33s infinite linear;
+}
+
+.pacman > div:nth-child(4) {
+    -webkit-animation: pacman-balls 1s 0.66s infinite linear;
+    animation: pacman-balls 1s 0.66s infinite linear;
+}
+
+.pacman > div:nth-child(5) {
+    -webkit-animation: pacman-balls 1s 0.99s infinite linear;
+    animation: pacman-balls 1s 0.99s infinite linear;
+}
+
+.pacman > div:first-of-type {
+    width: 0px;
+    height: 0px;
+    border-right: 25px solid transparent;
+    border-top: 25px solid #ed5565;
+    border-left: 25px solid #ed5565;
+    border-bottom: 25px solid #ed5565;
+    border-radius: 25px;
+    -webkit-animation: rotate_pacman_half_up 0.5s 0s infinite;
+    animation: rotate_pacman_half_up 0.5s 0s infinite;
+}
+
+.pacman > div:nth-child(2) {
+    width: 0px;
+    height: 0px;
+    border-right: 25px solid transparent;
+    border-top: 25px solid #ed5565;
+    border-left: 25px solid #ed5565;
+    border-bottom: 25px solid #ed5565;
+    border-radius: 25px;
+    -webkit-animation: rotate_pacman_half_down 0.5s 0s infinite;
+    animation: rotate_pacman_half_down 0.5s 0s infinite;
+    margin-top: -50px;
+}
+
+.pacman > div:nth-child(3), .pacman > div:nth-child(4), .pacman > div:nth-child(5), .pacman > div:nth-child(6) {
+    background-color: #ed5565;
+    width: 15px;
+    height: 15px;
+    border-radius: 100%;
+    margin: 2px;
+    width: 10px;
+    height: 10px;
+    position: absolute;
+    -webkit-transform: translate(0, -6.25px);
+    -ms-transform: translate(0, -6.25px);
+    transform: translate(0, -6.25px);
+    top: 25px;
+    left: 100px;
+}
+
+@-webkit-keyframes rotate_pacman_half_up {
+    0% {
+        -webkit-transform: rotate(270deg);
+        transform: rotate(270deg);
+    }
+
+    50% {
+        -webkit-transform: rotate(360deg);
+        transform: rotate(360deg);
+    }
+
+    100% {
+        -webkit-transform: rotate(270deg);
+        transform: rotate(270deg);
+    }
+}
+
+@keyframes rotate_pacman_half_up {
+    0% {
+        -webkit-transform: rotate(270deg);
+        transform: rotate(270deg);
+    }
+
+    50% {
+        -webkit-transform: rotate(360deg);
+        transform: rotate(360deg);
+    }
+
+    100% {
+        -webkit-transform: rotate(270deg);
+        transform: rotate(270deg);
+    }
+}
+
+@-webkit-keyframes rotate_pacman_half_down {
+    0% {
+        -webkit-transform: rotate(90deg);
+        transform: rotate(90deg);
+    }
+
+    50% {
+        -webkit-transform: rotate(0deg);
+        transform: rotate(0deg);
+    }
+
+    100% {
+        -webkit-transform: rotate(90deg);
+        transform: rotate(90deg);
+    }
+}
+
+@keyframes rotate_pacman_half_down {
+    0% {
+        -webkit-transform: rotate(90deg);
+        transform: rotate(90deg);
+    }
+
+    50% {
+        -webkit-transform: rotate(0deg);
+        transform: rotate(0deg);
+    }
+
+    100% {
+        -webkit-transform: rotate(90deg);
+        transform: rotate(90deg);
+    }
+}
+
+@-webkit-keyframes pacman-balls {
+    75% {
+        opacity: 0.7;
+    }
+
+    100% {
+        -webkit-transform: translate(-100px, -6.25px);
+        transform: translate(-100px, -6.25px);
+    }
+}
+
+@keyframes pacman-balls {
+    75% {
+        opacity: 0.7;
+    }
+
+    100% {
+        -webkit-transform: translate(-100px, -6.25px);
+        transform: translate(-100px, -6.25px);
+    }
+}

src/main/resources/public/install.html

@@ -4,12 +4,25 @@
     <meta charset="UTF-8">
     <title>博客安装页面</title>
     <link rel="stylesheet" href="css/install.css">
+    <link rel="stylesheet" href="css/loading.css">
     <script src="//cdn.bootcdn.net/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
 </head>
 <body>
+<div class="loading">
+    <div class="loader-inner pacman">
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+    </div>
+    <p style="margin-top: 20px;margin-left: 10px;">
+        加载中....
+    </p>
+</div>
 <div class="box">
     <div class="box-inner">
-        <div id="first-page">
+        <div id="first-page" class="show">
             <h3>数据库配置</h3>
             <!-- 数据库-->
             <select id="db-type">
@@ -22,15 +35,18 @@
             <span class="err-msg" id="err-tip-db-username">数据库用户名不可为空</span>
             <input id="db-password" type="password" placeholder="请输入数据库密码">
             <span class="err-msg" id="err-tip-db-password">数据库密码不可为空</span>
-            <button onclick="nextPage()">下一步</button>
+            <button onclick="nextPage()" id="next-step">下一步</button>
         </div>
-        <div id="second-page">
+        <div id="second-page" class="hidden">
             <h3>新建管理员用户</h3>
             <input id="email" type="email" placeholder="请输入用户名">
             <span class="err-msg" id="err-tip-email">用户名不可为空</span>
             <input id="password" type="password" placeholder="请输入密码">
             <span class="err-msg" id="err-tip-password">密码不可为空</span>
-            <button onclick="postInstallEvent()">安装</button>
+            <div class="button-group">
+                <button onclick="preStep()" id="pre-step">上一步</button>
+                <button onclick="postInstallEvent()" id="install"> 安装</button>
+            </div>
         </div>
     </div>
 </div>
@@ -43,9 +59,10 @@
         requestData.password = $('#password').val()
         $('#err-tip-email').removeClass("show-err-tip");
         $('#err-tip-password').removeClass("show-err-tip");
-        !requestData.email && checkInput($('#email'), $('#err-tip-email'))
         !requestData.password && checkInput($('#password'), $('#err-tip-password'))
+        !requestData.email && checkInput($('#email'), $('#err-tip-email'))
         if (!requestData.email || !requestData.password) return;
+        $('.loading').addClass('loading-show');
         $.ajax('/install', {
             method: "POST",
             contentType: 'application/json',
@@ -55,7 +72,7 @@
             success: function (data) {
                 console.log("data", data);
                 console.log("requestData", requestData);
-                interValId = setInterval(checkConnection, 200)
+                interValId = setInterval(checkConnection, 500)
                 checkConnection();
             }
         })
@@ -69,7 +86,10 @@
                 if (data.result.is_install) {
                     console.log("安装成功");
                     window.location.href = '/';
+                } else {
+                    console.log("安装失败");
                 }
+                $('.loading').removeClass('loading-show');
                 clearInterval(interValId);
             },
             error: function (err) {
@@ -78,6 +98,9 @@
         })
     }
 
+    /**
+     * 切换下一页
+     */
     function nextPage() {
         requestData = {
             dbPassword: $('#db-password').val(),
@@ -91,12 +114,33 @@
         $('#err-tip-db-url').removeClass("show-err-tip");
         $('#err-tip-db-username').removeClass("show-err-tip");
         $('#err-tip-db-password').removeClass("show-err-tip");
-        !requestData.dbType && checkInput($('#db-type'), $('#err-tip-db-type'))
-        !requestData.dbUrl && checkInput($('#db-url'), $('#err-tip-db-url'))
-        !requestData.dbUsername && checkInput($('#db-username'), $('#err-tip-db-username'))
         !requestData.dbPassword && checkInput($('#db-password'), $('#err-tip-db-password'))
+        !requestData.dbUsername && checkInput($('#db-username'), $('#err-tip-db-username'))
+        !requestData.dbUrl && checkInput($('#db-url'), $('#err-tip-db-url'))
+        !requestData.dbType && checkInput($('#db-type'), $('#err-tip-db-type'))
+        if (!requestData.dbType || !requestData.dbUrl || !requestData.dbUsername || !requestData.dbPassword) return
+        $('#first-page').addClass('hidden');
+        $('#first-page').removeClass('show');
+        $('#second-page').addClass('show');
+        $('#second-page').removeClass('hidden');
     }
 
+    function preStep() {
+        $('#second-page').addClass('hidden');
+        $('#second-page').removeClass('show');
+        $('#first-page').addClass('show');
+        $('#first-page').removeClass('hidden');
+
+        $('#err-tip-email').removeClass("show-err-tip");
+        $('#err-tip-password').removeClass("show-err-tip");
+    }
+
+    /**
+     * 检查组件的状态
+     * @param component 输入框
+     * @param errTipComponent 错误信息提示框
+     * @returns {boolean} 是否有错误
+     */
     function checkInput(component, errTipComponent) {
         if (!component.val()) {
             errTipComponent.addClass("show-err-tip");