312 lines
10 KiB
PHP
312 lines
10 KiB
PHP
<!DOCTYPE html>
|
||
<htm lang="zh-cn">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<title>配置数据库</title>
|
||
<link rel="stylesheet" type="text/css" href="<?=Yii::$app->request->baseUrl?>/web/static/css/globle.css"/>
|
||
<link rel="stylesheet" href="<?=Yii::$app->request->baseUrl?>/web/static/css/azlogin.css">
|
||
<!-- <link rel="stylesheet" href="<?=Yii::$app->request->baseUrl?>/web/static/css/ysw-globle.css">
|
||
<link rel="stylesheet" href="<?=Yii::$app->request->baseUrl?>/web/static/css/ysw-animate.css"> -->
|
||
<script src="<?=Yii::$app->request->baseUrl?>/web/static/js/lib/vue.js" type='text/javascript' charset='utf-8'></script>
|
||
<script src="<?=Yii::$app->request->baseUrl?>/web/static/js/lib/index.js" type='text/javascript' charset='utf-8'></script>
|
||
<script src="<?=Yii::$app->request->baseUrl?>/web/static/js/commont/axios.js" type='text/javascript' charset='utf-8'></script>
|
||
<script src="<?=Yii::$app->request->baseUrl?>/web/static/js/commont/jq.js" type='text/javascript' charset='utf-8'></script>
|
||
<script src="<?=Yii::$app->request->baseUrl?>/web/static/js/config.js" type="text/javascript" charset="utf-8"></script>
|
||
<style type="text/css">
|
||
/* 公共样式所有页面 */
|
||
.form-list {
|
||
color: #FFFFFF;
|
||
font-size: 1rem;
|
||
margin-top: 3.75rem;
|
||
}
|
||
.form-list h3{
|
||
font-size: 1.125rem;
|
||
font-weight: 600;
|
||
padding-bottom: 2rem;
|
||
}
|
||
.list-item {
|
||
/* margin-bottom: 4.125rem; */
|
||
}
|
||
|
||
.list-item input {
|
||
color: #FFFFFF;
|
||
background: #676767;
|
||
border: none;
|
||
border-bottom: solid 0.0625rem #797979;
|
||
padding: 1.125rem 0;
|
||
width: 18.75rem;
|
||
|
||
}
|
||
.footer-case{
|
||
margin-top: 30px;
|
||
}
|
||
.el-input__inner{
|
||
width: 340px;
|
||
}
|
||
input::-webkit-input-placeholder { /* WebKit browsers 适配谷歌 */
|
||
color: #ffffff;
|
||
}
|
||
input:-moz-placeholder { /* Mozilla Firefox 4 to 18 适配火狐 */
|
||
color: #ffffff;
|
||
}
|
||
input::-moz-placeholder { /* Mozilla Firefox 19+ 适配火狐 */
|
||
color: #ffffff;
|
||
}
|
||
input:-ms-input-placeholder { /* Internet Explorer 10+ 适配ie*/
|
||
color: #ffffff;
|
||
}
|
||
|
||
.list-item-p {
|
||
margin-right: 2rem;
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: flex-end;
|
||
padding: 1.125rem 0;
|
||
|
||
}
|
||
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="outerLayer" id="box" v-loading="cardLoading" element-loading-text="正在写入数据库，请勿刷新页面">
|
||
<div class="logo">
|
||
<div class="logoimg">
|
||
<img src="<?=Yii::$app->request->baseUrl?>/web/static/img/logo.png"/>
|
||
</div>
|
||
<div class="logofont">
|
||
<div class="logotext">武汉云贝网络科技有限公司</div>
|
||
</div>
|
||
</div>
|
||
<div class="leftBg"></div>
|
||
<div class="rightBg"></div>
|
||
<div class="warp_content2">
|
||
<div class="title">
|
||
<h3 class="stepTitle">配置数据库</h3>
|
||
<span class="txt"></span>
|
||
</div>
|
||
<el-form ref="ruleForm" label-width="35%"
|
||
class="demo-ruleForm">
|
||
<div class="formInfo">
|
||
<div class="formText">
|
||
<el-form-item label="数据库主机">
|
||
<el-input v-model="databaseHost" autocomplete="off"
|
||
placeholder="请输入数据库主机"></el-input>
|
||
<div class="color_9 fon_12 lh20">数据库地址一般不做修改</div>
|
||
</el-form-item>
|
||
</div>
|
||
<div class="formText">
|
||
<el-form-item label="数据库用户">
|
||
<el-input v-model="databaseUser" autocomplete="off"
|
||
placeholder="请输入数据库用户名"></el-input>
|
||
</el-form-item>
|
||
</div>
|
||
<div class="formText">
|
||
<el-form-item label="数据库密码">
|
||
<el-input v-model="databasePassword" type="password" autocomplete="off"
|
||
placeholder="请输入数据库密码"></el-input>
|
||
</el-form-item>
|
||
</div>
|
||
<div class="formText">
|
||
<el-form-item label="数据库名称">
|
||
<el-input v-model="databaseName" autocomplete="off"
|
||
placeholder="请输入数据库名称"></el-input>
|
||
</el-form-item>
|
||
</div>
|
||
<div class="formText">
|
||
<el-form-item label="数据表前缀">
|
||
<el-input v-model="databasePrefix" autocomplete="off"
|
||
placeholder="请输入数据表前缀" disabled></el-input>
|
||
<div class="color_9 fon_12 lh20">数据库前缀一般不做修改</div>
|
||
</el-form-item>
|
||
</div>
|
||
<div class="footer-case flex-center">
|
||
<el-button type="primary" @click="goBack" >上一步</el-button>
|
||
<el-button type="primary" @click="submit">下一步</el-button>
|
||
</div>
|
||
</div>
|
||
</el-form>
|
||
</div>
|
||
<!-- <el-dialog
|
||
class="flex-center"
|
||
title="正在写入数据库,请稍后..."
|
||
:visible.sync="centerDialogVisible"
|
||
width="50%"
|
||
:show-close="false"
|
||
:close-on-click-modal="false"
|
||
center>
|
||
<el-progress class="flex-center" v-show="true" type="circle" :percentage="percentageTime" status="success"></el-progress>
|
||
<span slot="footer" class="dialog-footer">
|
||
</span>
|
||
</el-dialog> -->
|
||
</div>
|
||
<!-- <div id="box" class=" flex-center" v-loading="cardLoading">
|
||
<div class=" flex-rj-sb-ac ">
|
||
<div class="tab-list flex-column flex-center">
|
||
<div class="tab-list-header">
|
||
<h1 class="install-title">安装步骤</h1>
|
||
</div>
|
||
|
||
<div class="flex-column install-tab-item flex-center">
|
||
<div class="flex-column flex-center">
|
||
<div class="icon">
|
||
<input type="image" src="<?=Yii::$app->request->baseUrl?>/web/static/img/txzl-xz.png" />
|
||
</div>
|
||
<p>TEP1：填写资料</p>
|
||
</div>
|
||
<div class="flex-column flex-center">
|
||
<div class="icon">
|
||
<input type="image" src="<?=Yii::$app->request->baseUrl?>/web/static/img/jchj-xz.png" />
|
||
</div>
|
||
<p>TEP2：检测环境</p>
|
||
</div>
|
||
<div class="flex-column flex-center">
|
||
<div class="icon">
|
||
<input type="image" src="<?=Yii::$app->request->baseUrl?>/web/static/img/zczh-xz.png" />
|
||
</div>
|
||
<p>TEP3：注册账号</p>
|
||
</div>
|
||
<div class="flex-column flex-center">
|
||
<div class="icon">
|
||
<input type="image" src="<?=Yii::$app->request->baseUrl?>/web/static/img/azwc-wxz.png" />
|
||
</div>
|
||
<p>TEP4：安装完成</p>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
<div class="container flex-column">
|
||
<h2>TEP2：检测环境</h2>
|
||
|
||
<div class="form-list flex-column flex-center">
|
||
<h3>配置数据库参数</h3>
|
||
<div class="flex-r flex-center">
|
||
<div class="flex-column">
|
||
<p class="list-item-p">数据库主机</p>
|
||
<p class="list-item-p">数据库用户</p>
|
||
<p class="list-item-p">数据库密码</p>
|
||
<p class="list-item-p">数据库名称</p>
|
||
<p class="list-item-p">数据表前缀</p>
|
||
</div>
|
||
<div class="flex-column">
|
||
<p class="list-item"><input type="text" v-model="databaseHost" disabled /></p>
|
||
<p class="list-item"><input type="text" v-model="databaseUser" /></p>
|
||
<p class="list-item"><input type="text" v-model="databasePassword" placeholder="请输入数据库密码"/></p>
|
||
<p class="list-item"><input type="text" v-model="databaseName" placeholder="首位必须为字母"/></p>
|
||
<p class="list-item"><input type="text" v-model="databasePrefix" placeholder="请输入数据库前缀"/></p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="footer-case flex-center">
|
||
<button class="btn" @click="goBack" >
|
||
上一步
|
||
</button>
|
||
<button class="btn bg" @click="submit">
|
||
下一步
|
||
</button>
|
||
</div>
|
||
<div class="right-progress">
|
||
<p class="active-p"></p>
|
||
<p class="active-p"></p>
|
||
<p></p>
|
||
<p></p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div> -->
|
||
|
||
</body>
|
||
</html>
|
||
<script type="text/javascript">
|
||
// 配置请求API
|
||
|
||
var vm = new Vue({
|
||
el: "#box",
|
||
data: {
|
||
percentageTime:1,
|
||
centerDialogVisible: false,
|
||
cardLoading:false,
|
||
databaseHost: '127.0.0.1:3306',
|
||
databaseUser: '',
|
||
databasePassword: '',
|
||
databaseName:'',
|
||
databasePrefix:'ims_',
|
||
install_type:"mysql"
|
||
},
|
||
watch: {
|
||
// phone(val) {
|
||
// this.phoneChange();
|
||
// }
|
||
|
||
},
|
||
methods: {
|
||
isDatabaseName() {
|
||
// 首位为字母的5至20位的正则
|
||
var c = /^[a-zA-Z]+[a-zA-Z0-9_]*$/;
|
||
return c.test(this.databaseName);
|
||
},
|
||
goBack(){
|
||
window.history.back(-1);
|
||
},
|
||
// 提交登录信息
|
||
async submit() {
|
||
|
||
if (!this.databasePassword) {
|
||
|
||
return this.$message({
|
||
message: "请输入数据库密码",
|
||
type: "error",
|
||
offset:"200",
|
||
duration:1000
|
||
|
||
});
|
||
}
|
||
if (!this.databaseName) {
|
||
|
||
return this.$message({
|
||
message: "请输入正确的数据库名称",
|
||
type: "error",
|
||
offset:"200",
|
||
duration:1000
|
||
|
||
});
|
||
}
|
||
if (!this.databasePrefix) {
|
||
|
||
return this.$message({
|
||
message: "请输入正确的数据库前缀",
|
||
type: "error",
|
||
offset:"200",
|
||
duration:1000,
|
||
});
|
||
}
|
||
this.cardLoading=true;
|
||
var requstData = {
|
||
databaseName: this.databaseName,
|
||
databaseUser: this.databaseUser,
|
||
databasePassword: this.databasePassword,
|
||
databasePrefix:this.databasePrefix,
|
||
databaseHost: this.databaseHost,
|
||
}
|
||
res = await utils.requestPost({
|
||
data: requstData,
|
||
url: "admin/install/reset_mysql"
|
||
},this)
|
||
if (res.code == 1) {
|
||
this.cardLoading=false;
|
||
this.$message({
|
||
message: "数据库创建成功!,请稍后...",
|
||
type: "success",
|
||
offset:"200",
|
||
duration:1000
|
||
});
|
||
setTimeout(()=>{
|
||
window.location.href = '/index.php/admin/install/registered_account';
|
||
},1000)
|
||
}
|
||
},
|
||
|
||
}
|
||
})
|
||
</script>
|