zheng/blog-backEnd
1
0
Fork 0
Code Issues 5 Pull Requests 12 Actions Packages Projects Releases Wiki Activity

feat: 安装页面布局

Browse Source
This commit is contained in:
禾几海
2020-10-22 14:12:01 +08:00
parent 76f3d16e09
commit b920034ad6
3 changed files with 105 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/main/java/cn/celess/blog/controller/InstallController.java
View File

@@ -104,6 +104,11 @@ public class InstallController {
@GetMapping("/install") @GetMapping("/install")
public String install() { public String install() {
Config configuration = configMapper.getConfiguration(ConfigKeyEnum.BLOG_INSTALLED.getKey());
if (Boolean.parseBoolean(configuration.getValue())) {
return "index.html";
}
log.info("博客第一次运行，还未安装");
return "install.html"; return "install.html";
} }
} }

16
src/main/resources/public/css/install.css
View File

@@ -31,3 +31,19 @@ html, body {
margin: 8px 5%; margin: 8px 5%;
} }
.box-inner h3 {
text-align: center;
}
.err-msg {
display: none;
color: red;
width: 100%;
padding-left: 30px;
font-size: small;
font-weight: lighter;
}
.show-err-tip {
display: block;
}

88
src/main/resources/public/install.html
View File

@@ -9,20 +9,77 @@
<body> <body>
<div class="box"> <div class="box">
<div class="box-inner"> <div class="box-inner">
<div id="first-page">
<h3>数据库配置</h3>
<!-- 数据库--> <!-- 数据库-->
<select id="db-type"> <select id="db-type">
<option value="h2">H2数据库</option> <option value="h2">H2数据库</option>
<option value="mysql">Mysql数据库</option> <option value="mysql">Mysql数据库</option>
</select> </select>
<input id="db-url" type="text" placeholder="请输入数据库的地址"> <input id="db-url" type="text" placeholder="请输入数据库的地址">
<input id="db-username" type="text" placeholder="数据库用户名"> <span class="err-msg" id="err-tip-db-url">数据库的地址不可为空</span>
<input id="db-password" type="text" placeholder="数据库密码"> <input id="db-username" type="text" placeholder="请输入数据库用户名">
<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>
</div>
<div id="second-page">
<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> <button onclick="postInstallEvent()">安装</button>
</div> </div>
</div>
</div> </div>
<script type="text/javascript"> <script type="text/javascript">
let requestData;
let interValId;
function postInstallEvent() { function postInstallEvent() {
const requestData = { requestData.email = $('#email').val()
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'))
if (!requestData.email || !requestData.password) return;
$.ajax('/install', {
method: "POST",
contentType: 'application/json',
data: JSON.stringify(requestData),
withCredentials: true,
dataType: 'json',
success: function (data) {
console.log("data", data);
console.log("requestData", requestData);
interValId = setInterval(checkConnection, 200)
checkConnection();
}
})
}
function checkConnection() {
$.ajax('/is_install', {
method: "GET",
dataType: 'json',
success: function (data) {
if (data.result.is_install) {
console.log("安装成功");
window.location.href = '/';
}
clearInterval(interValId);
},
error: function (err) {
console.log(err);
}
})
}
function nextPage() {
requestData = {
dbPassword: $('#db-password').val(), dbPassword: $('#db-password').val(),
dbType: $('#db-type').val(), dbType: $('#db-type').val(),
dbUrl: $('#db-url').val(), dbUrl: $('#db-url').val(),
@@ -30,16 +87,23 @@
email: '', email: '',
password: '', password: '',
} }
$.ajax('/install', { $('#err-tip-db-type').removeClass("show-err-tip");
method: "POST", $('#err-tip-db-url').removeClass("show-err-tip");
contentType: 'application/json', $('#err-tip-db-username').removeClass("show-err-tip");
data: JSON.stringify(requestData), $('#err-tip-db-password').removeClass("show-err-tip");
dataType: 'json', !requestData.dbType && checkInput($('#db-type'), $('#err-tip-db-type'))
success: function (data) { !requestData.dbUrl && checkInput($('#db-url'), $('#err-tip-db-url'))
console.log("data", data); !requestData.dbUsername && checkInput($('#db-username'), $('#err-tip-db-username'))
console.log("requestData",requestData); !requestData.dbPassword && checkInput($('#db-password'), $('#err-tip-db-password'))
} }
})
function checkInput(component, errTipComponent) {
if (!component.val()) {
errTipComponent.addClass("show-err-tip");
component.focus();
return true;
}
return false;
} }
</script> </script>
</body> </body>