test_lgq/niucloud/app/install/view/index/step-3.html
2024-01-24 17:36:08 +08:00

343 lines
16 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

{extend name="base"/}
{block name="resources"}
<style>
.install-content-procedure .content-procedure-item:first-of-type{
background: url("INSTALL_IMG/complete_two.png") no-repeat center / contain;
color: #fff;
}
.install-content-procedure .content-procedure-item:nth-child(2){
background: url("INSTALL_IMG/complete_four.png") no-repeat center / contain;
color: #fff;
}
.install-content-procedure .content-procedure-item:nth-child(3){
background: url("INSTALL_IMG/conduct.png") no-repeat center / contain;
color: #fff;
}
</style>
{/block}
{block name="main"}
<div id='postloader' class='waitpage'></div>
<div class="pright layui-form">
<div class="pr-title install-title layui-hide"></div>
<div class="pr-agreement">
<form class="layui-form " id="install-form">
<div class="testing parameter">
<div class="testing-item">
<h3>数据库设置</h3>
<table border="0" align="center" cellpadding="0" cellspacing="0" class="twbox">
<tr>
<td class="onetd"><span class="required">*</span>数据库主机:</td>
<td>
<input name="dbhost" id="dbhost" type="text" lay-verify="empty" placeholder="请输入数据库主机" value="" class="input-txt" onChange="testDb()" />
<small>一般为localhost</small>
</td>
</tr>
<tr>
<td class="onetd"><span class="required">*</span>Mysql端口</td>
<td>
<input name="dbport" id="dbport" type="text" value="3306" class="input-txt" lay-verify="empty" placeholder="请输入Mysql端口"/>
<small>一般为3306</small>
</td>
</tr>
<tr>
<td class="onetd"><span class="required">*</span>数据库用户:</td>
<td>
<input name="dbuser" id="dbuser" type="text" value="" class="input-txt" onChange="testDb()" lay-verify="empty" placeholder="请输入数据库用户"/>
<small>默认root</small>
</td>
</tr>
<tr>
<td class="onetd"><span class="required">*</span>数据库密码:</td>
<td>
<div style='float:left;margin-right:3px;'>
<input name="dbpwd" id="dbpwd" type="text" class="input-txt" onChange="testDb()" lay-verify="empty" placeholder="请输入数据库密码" />
</div>
<div style='float:left' class="mysql-message" id='dbpwdsta'></div>
</td>
</tr>
<tr>
<td class="onetd"><span class="required">*</span>数据库名称:</td>
<td>
<div style='float:left;margin-right:3px;'><input name="dbname" id="dbname" type="text" value="" class="input-txt" onChange="haveDB()" lay-verify="empty" placeholder="请输入数据库名称" /></div>
<div style='float:left' class="mysql-message" id='havedbsta'></div>
</td>
</tr>
<tr>
<td class="onetd">数据表前缀:</td>
<td>
<div style='float:left;margin-right:3px;'><input name="dbprefix" id="dbprefix" type="text" value="" class="input-txt" placeholder="请输入数据表前缀"/></div>
</td>
</tr>
<tr>
<td class="onetd">数据库编码:</td>
<td>
<label class="install-code">UTF8</label>
</td>
</tr>
</table>
</div>
<div class="testing-item">
<h3>网站设置</h3>
<table border="0" align="center" cellpadding="0" cellspacing="0" class="twbox">
<tr>
<td class="onetd"><span class="required">*</span><span>网站标题:</span></td>
<td>
<input name="admin_name" id="admin_name" type="text" value="" class="input-txt" lay-verify="empty" placeholder="请输入网站标题"/>
<small id="mess_admin_name">网站标题 必填</small>
</td>
</tr>
<tr>
<td class="onetd"><span class="required">*</span><span>管理员用户名:</span></td>
<td>
<input name="username" id="username" type="text" value="" class="input-txt" lay-verify="empty" placeholder="请输入平台用户名"/>
<small id="mess_username">管理员用户名 必填</small>
</td>
</tr>
<tr>
<td class="onetd"><span class="required">*</span><span>管理员密码:</span></td>
<td>
<input name="password" id="password" type="password" value="" class="input-txt" lay-verify="empty" placeholder="请输入平台密码"/>
<small id="mess_password">密码 必填</small>
</td>
</tr>
<tr>
<td class="onetd"><span class="required">*</span><span>确认密码:</span></td>
<td>
<input name="password2" id="password2" type="password" value="" class="input-txt" lay-verify="empty" placeholder="请输入平台确认密码"/>
<small id="mess_password2">确认密码 必填</small>
</td>
</tr>
</table>
<!-- <h3>默认站点</h3>-->
<!-- <table border="0" align="center" cellpadding="0" cellspacing="0" class="twbox">-->
<!-- <tr>-->
<!-- <td class="onetd"><span class="required">*</span><span>站点名称:</span></td>-->
<!-- <td>-->
<!-- <input name="site_name" id="site_name" type="text" value="" class="input-txt" lay-verify="empty" placeholder="请输入站点用户名"/>-->
<!-- <small id="mess_site_name">站点名称 必填</small>-->
<!-- </td>-->
<!-- </tr>-->
<!-- <tr>-->
<!-- <td class="onetd"><span class="required">*</span><span>站点管理员:</span></td>-->
<!-- <td>-->
<!-- <input name="site_username" id="site_username" type="text" value="" class="input-txt" lay-verify="empty" placeholder="请输入站点用户名"/>-->
<!-- <small id="mess_site_username">站点管理员 必填</small>-->
<!-- </td>-->
<!-- </tr>-->
<!-- <div>-->
<!-- <td class="td-aux"></td>-->
<!-- <td class="td-aux"><span id="">请不要和网站管理员相同</span></td>-->
<!-- </div>-->
<!-- <tr>-->
<!-- <td class="onetd"><span class="required">*</span><span>管理员密码:</span></td>-->
<!-- <td>-->
<!-- <input name="site_password" id="site_password" type="password" value="" class="input-txt" lay-verify="empty" placeholder="请输入站点密码"/>-->
<!-- <small id="mess_site_password">管理员密码 必填</small>-->
<!-- </td>-->
<!-- </tr>-->
<!-- <tr>-->
<!-- <td class="onetd"><span class="required">*</span><span>确认密码:</span></td>-->
<!-- <td>-->
<!-- <input name="site_password2" id="site_password2" type="password" value="" class="input-txt" lay-verify="empty" placeholder="请输入站点确认密码"/>-->
<!-- <small id="mess_site_password2">确认密码 必填</small>-->
<!-- </td>-->
<!-- </tr>-->
<!-- </table>-->
</div>
</div>
</form>
<div class="layui-form layui-hide testing" id="install-log">
<div class="install-log">
</div>
<div class="btn-box layui-hide">
<input type="button" class="btn-back" value="后退" onclick="back()" />
</div>
</div>
</div>
<div class="btn-box">
<input type="button" class="btn-back" value="后退" onclick="window.location.href='{$root_url}/install.php/index/index?step=2'" />
<input type="button" class="btn-next" lay-submit lay-filter="install"value="开始安装" id="form_submit">
</div>
</div>
{/block}
{block name='script'}
<script language="javascript" type="text/javascript">
ControlContent(2);
var is_existdb = 1;//数据库是否存在
var message = '数据库账号或密码不能为空';
var is_install = false;
function inputBoxPointer(id){
return document.getElementById(id);
}
layui.use('form', function(){
var form = layui.form;
form.verify({
empty: function(value, item){ //value表单的值、item表单的DOM对象
if(value == ''){
var msg = $(item).attr("placeholder");
return msg;
}
}
});
form.on('submit(install)', function(data){
if(is_existdb == 2){
layer.confirm('数据库存在,系统将覆盖数据库!', {
btn: ['继续','取消'] //按钮
}, function(){
layer.closeAll();
install(data.field);
}, function(){
layer.closeAll();
return false;
});
}else{
if(is_existdb <= 0){
error(message);
return false;
}
install(data.field);
}
return false;
});
});
//数据库连接测试
function testDb()
{
var dbhost = inputBoxPointer('dbhost').value;
var dbuser = inputBoxPointer('dbuser').value;
var dbpwd = inputBoxPointer('dbpwd').value;
var dbport = inputBoxPointer('dbport').value;
inputBoxPointer('dbpwdsta').innerHTML='<img src="INSTALL_IMG/ajax-loader.gif">';
$.ajax({ //post也可
url: '{$root_url}/install.php/index/testdb',
data: { dbhost: dbhost, dbport : dbport, dbuser:dbuser, dbpwd:dbpwd},
type: "post",
dataType: 'json',
success: function(data){
inputBoxPointer('dbpwdsta').innerHTML = data.data.message;
is_existdb = data.data.status;
message = data.data.message;
}
});
}
/**
*验证数据库是否存在
*/
function haveDB()
{
var dbhost = inputBoxPointer('dbhost').value;
var dbname = inputBoxPointer('dbname').value;
var dbuser = inputBoxPointer('dbuser').value;
var dbpwd = inputBoxPointer('dbpwd').value;
var dbport = inputBoxPointer('dbport').value;
inputBoxPointer('havedbsta').innerHTML='<img src="INSTALL_IMG/ajax-loader.gif">';
$.ajax({ //post也可
url: '{$root_url}/install.php/index/testdb',
data: { dbhost: dbhost, dbport : dbport, dbuser:dbuser, dbpwd:dbpwd,dbname:dbname},
type: "post",
dataType: 'json',
success: function(data){
inputBoxPointer('havedbsta').innerHTML = data.data.message;
is_existdb = data.data.status;
message = data.data.message;
}
});
}
function getStatus() {
$.ajax({
url: "{$root_url}/install.php/index/getInstallInfo",
dataType: 'json',
type: 'get',
success : function(data) {
if(data.code == 1) {
$(data.data.log).each(function (i, e){
if($('.log-'+i).length == 0) {
let html = `<div class="log-${i}">
<span>${e[0]}${e[1] == 'success' ? "成功" : ""}</span>
<span>${e[2]}</span>
</div>`;
$('.install-log').append(html);
SetScroll();
}
})
if(data.data.status == 0 || data.data.status == 1) {
setTimeout(() => {
getStatus();
}, 200)
}else{
$('#install-log .btn-box').removeClass('layui-hide')
}
}
}
})
}
function install(data){
if(is_install) return false;
$('#install-form').addClass('layui-hide')
$('#install-log').removeClass('layui-hide')
// $('.install-log').html('<div class="install-head">正在安装...</div>');
$('.install-title').removeClass('layui-hide')
$('.install-title').html('<div class="install-head">正在安装...</div>');
$('.pright>.btn-box').addClass('layui-hide')
is_install = true;
$.ajax({
url: "{$root_url}/install.php/index/install",
data: data,
dataType: 'json',
type: 'post',
success : function(res) {
layer.close(index);
if(res.code == 1){
$.ajax({
url: "{$root_url}/install.php/index/initData",
data: data,
dataType: 'json',
type: 'post',
success : function(data) {
if(data.code == 1){
window.location.href = '{$root_url}/install.php/index/installSuccess';
}
}
})
}else{
error(res.msg);
is_install = false;
}
},
})
setTimeout(() => {
getStatus();
}, 500)
}
function back(){
$('#install-form').removeClass('layui-hide')
$('#install-log').addClass('layui-hide')
$('.install-title').addClass('layui-hide')
$('.pright>.btn-box').removeClass('layui-hide')
}
window.onload = SetScroll;
function SetScroll(){
var height=$(".install-log")[0].scrollHeight;
$(".install-log").scrollTop(height);
}
</script>
{/block}