133 行
5.3 KiB
HTML
可执行文件
133 行
5.3 KiB
HTML
可执行文件
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
|
<title>数据库信息配置</title>
|
|
<link rel="stylesheet" type="text/css" href="__PUBLIC__/vue/element-ui.2.8.2.css"/>
|
|
<script type="text/javascript" src="__PUBLIC__/vue/js/vue2.5.16.js"></script>
|
|
<script type="text/javascript" src="__PUBLIC__/vue/element-ui.2.8.2.js"></script>
|
|
<script type="text/javascript" src="__PUBLIC__/js/common.js"></script>
|
|
<style>
|
|
html, body {
|
|
padding: 0;
|
|
margin: 0;
|
|
background-color: #f5f5f5;
|
|
}
|
|
|
|
.logo-box {
|
|
text-align: center;
|
|
}
|
|
|
|
.logo {
|
|
height: 84px;
|
|
margin: 25px auto 0;
|
|
}
|
|
|
|
.tips {
|
|
font-size: 13px;
|
|
line-height: 18px;
|
|
color: #909399;
|
|
}
|
|
|
|
.el-input {
|
|
width: 200px;
|
|
}
|
|
|
|
.bottom-button {
|
|
margin-top: 10px;
|
|
text-align: right;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="app">
|
|
<div class="logo-box">
|
|
<img src="__PUBLIC__/Install/images/logo.png" alt="" class="logo"/>
|
|
</div>
|
|
|
|
<el-container>
|
|
<el-main>
|
|
<el-card shadow="always" style="width: 650px;margin: 0 auto">
|
|
<h4>请在下方填写您的数据库连接信息，如果您不确定，请联系您的服务提供商。</h4>
|
|
|
|
<el-form size="small" label-width="130px" :model="ruleForm" :rules="rules" ref="ruleForm">
|
|
<el-form-item label="数据库名" prop="sql_name">
|
|
<el-input placeholder="请输入数据库名" v-model="ruleForm.sql_name"></el-input>
|
|
<span class="tips">若数据库不存在则会创建数据库</span>
|
|
</el-form-item>
|
|
<el-form-item label="用户名" prop="sql_user_name">
|
|
<el-input placeholder="请输入用户名" v-model="ruleForm.sql_user_name"></el-input>
|
|
<span class="tips">您的数据库用户名</span>
|
|
</el-form-item>
|
|
<el-form-item label="密码" prop="sql_password">
|
|
<el-input placeholder="请输入密码" show-password v-model="ruleForm.sql_password"></el-input>
|
|
<span class="tips">您的数据库密码</span>
|
|
</el-form-item>
|
|
<el-form-item label="数据库主机地址" prop="sql_path">
|
|
<el-input placeholder="请输入数据库主机地址" v-model="ruleForm.sql_path"></el-input>
|
|
<span class="tips">可以从网站服务提供商处得到正确的信息</span>
|
|
</el-form-item>
|
|
</el-form>
|
|
<div class="bottom-button">
|
|
<el-button type="primary" size="medium" @click="nextOperate">继续</el-button>
|
|
</div>
|
|
|
|
</el-card>
|
|
</el-main>
|
|
</el-container>
|
|
</div>
|
|
<script>
|
|
var app = new Vue({
|
|
el: '#app',
|
|
data() {
|
|
return {
|
|
ruleForm: {
|
|
sql_name: '',
|
|
sql_user_name: '',
|
|
sql_password: '',
|
|
sql_path: '',
|
|
},
|
|
rules: {
|
|
sql_name: [{message: '请输入数据库名', required: true, trigger: 'blur'}],
|
|
sql_user_name: [{message: '请输入用户名', required: true, trigger: 'blur'}],
|
|
sql_password: [{message: '请输入密码', required: true, trigger: 'blur'}],
|
|
sql_path: [{message: '请输入数据库主机地址', required: true, trigger: 'blur'}],
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
nextOperate() {
|
|
this.$refs.ruleForm.validate((valid) => {
|
|
if (valid) {
|
|
let formData = new FormData();
|
|
for (let i in this.ruleForm) {
|
|
formData.append(i, this.ruleForm[i]);
|
|
}
|
|
fetch("{:U('Home/Index/home')}", {
|
|
method: 'POST',
|
|
headers: {},
|
|
body: formData
|
|
}).then((response) => response.json()).then((jsonData) => {
|
|
if (typeof jsonData != "object") {
|
|
this.$message.error('请求发生错误，请稍后重试');
|
|
} else {
|
|
if (jsonData.status == 1) {
|
|
window.location.href = "{:U('Home/index/push')}";
|
|
} else {
|
|
this.$message.error(res.message);
|
|
}
|
|
}
|
|
}).catch((error) => {
|
|
console.log(error);
|
|
this.$message.error('请求发生错误，请稍后重试');
|
|
});
|
|
} else {
|
|
this.$message.error('请检查必填项');
|
|
}
|
|
})
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |