feat(环境配置): 数据库驱动和连接URL调整位置并联动显示URL示例

数据库驱动和连接URL调整位置并联动显示URL示例
This commit is contained in:
song-tianyang 2021-09-16 13:54:45 +08:00 committed by 刘瑞斌
parent 9afe9da9c5
commit e533964194
2 changed files with 123 additions and 99 deletions

View File

@ -7,17 +7,17 @@
:placeholder="$t('commons.input_content')"/> :placeholder="$t('commons.input_content')"/>
</el-form-item> </el-form-item>
<el-form-item :label="$t('api_test.request.sql.database_driver')" prop="driver">
<el-select v-model="currentConfig.driver" class="select-100" @change="driverChange" clearable>
<el-option v-for="p in drivers" :key="p" :label="p" :value="p"/>
</el-select>
</el-form-item>
<el-form-item :label="$t('api_test.request.sql.database_url')" prop="dbUrl"> <el-form-item :label="$t('api_test.request.sql.database_url')" prop="dbUrl">
<el-input v-model="currentConfig.dbUrl" maxlength="500" show-word-limit <el-input v-model="currentConfig.dbUrl" maxlength="500" show-word-limit
:placeholder="$t('commons.input_content')"/> :placeholder="$t('commons.input_content')"/>
</el-form-item> </el-form-item>
<el-form-item :label="$t('api_test.request.sql.database_driver')" prop="driver">
<el-select v-model="currentConfig.driver" class="select-100" clearable>
<el-option v-for="p in drivers" :key="p" :label="p" :value="p"/>
</el-select>
</el-form-item>
<el-form-item :label="$t('api_test.request.sql.username')" prop="username"> <el-form-item :label="$t('api_test.request.sql.username')" prop="username">
<el-input v-model="currentConfig.username" maxlength="300" show-word-limit <el-input v-model="currentConfig.username" maxlength="300" show-word-limit
:placeholder="$t('commons.input_content')"/> :placeholder="$t('commons.input_content')"/>
@ -131,7 +131,19 @@
this.result = this.$post('/api/database/validate', this.currentConfig, () => { this.result = this.$post('/api/database/validate', this.currentConfig, () => {
this.$success(this.$t('commons.connection_successful')); this.$success(this.$t('commons.connection_successful'));
}) })
},
driverChange(type){
this.currentConfig.dbUrl = "";
if(type === "com.mysql.jdbc.Driver"){
this.currentConfig.dbUrl = "jdbc:mysql://127.0.0.1:3306/database";
}else if(type === "com.microsoft.sqlserver.jdbc.SQLServerDriver"){
this.currentConfig.dbUrl = "jdbc:sqlserver://127.0.0.1:1433;DatabaseName=database";
}else if(type === "org.postgresql.Driver"){
this.currentConfig.dbUrl = "jdbc:postgresql://127.0.0.1:5432/database";
}else if(type === "oracle.jdbc.OracleDriver"){
this.currentConfig.dbUrl = "jdbc:oracle:thin:192.168.2.1:1521:database";
} }
},
} }
} }
</script> </script>

View File

@ -7,17 +7,17 @@
:placeholder="$t('commons.input_content')"/> :placeholder="$t('commons.input_content')"/>
</el-form-item> </el-form-item>
<el-form-item :label="$t('api_test.request.sql.database_driver')" prop="driver">
<el-select v-model="currentConfig.driver" class="select-100" @change="driverChange" clearable>
<el-option v-for="p in drivers" :key="p" :label="p" :value="p"/>
</el-select>
</el-form-item>
<el-form-item :label="$t('api_test.request.sql.database_url')" prop="dbUrl"> <el-form-item :label="$t('api_test.request.sql.database_url')" prop="dbUrl">
<el-input v-model="currentConfig.dbUrl" maxlength="500" show-word-limit <el-input v-model="currentConfig.dbUrl" maxlength="500" show-word-limit
:placeholder="$t('commons.input_content')"/> :placeholder="$t('commons.input_content')"/>
</el-form-item> </el-form-item>
<el-form-item :label="$t('api_test.request.sql.database_driver')" prop="driver">
<el-select v-model="currentConfig.driver" class="select-100" clearable>
<el-option v-for="p in drivers" :key="p" :label="p" :value="p"/>
</el-select>
</el-form-item>
<el-form-item :label="$t('api_test.request.sql.username')" prop="username"> <el-form-item :label="$t('api_test.request.sql.username')" prop="username">
<el-input v-model="currentConfig.username" maxlength="300" show-word-limit <el-input v-model="currentConfig.username" maxlength="300" show-word-limit
:placeholder="$t('commons.input_content')"/> :placeholder="$t('commons.input_content')"/>
@ -52,9 +52,9 @@
</template> </template>
<script> <script>
import {DatabaseConfig} from "../../../model/ScenarioModel"; import {DatabaseConfig} from "../../../model/ScenarioModel";
export default { export default {
name: "MsDatabaseFrom", name: "MsDatabaseFrom",
components: {}, components: {},
props: { props: {
@ -135,15 +135,27 @@
this.result = this.$post('/api/database/validate', this.currentConfig, () => { this.result = this.$post('/api/database/validate', this.currentConfig, () => {
this.$success(this.$t('commons.connection_successful')); this.$success(this.$t('commons.connection_successful'));
}) })
},
driverChange(type){
this.currentConfig.dbUrl = "";
if(type === "com.mysql.jdbc.Driver"){
this.currentConfig.dbUrl = "jdbc:mysql://127.0.0.1:3306/database";
}else if(type === "com.microsoft.sqlserver.jdbc.SQLServerDriver"){
this.currentConfig.dbUrl = "jdbc:sqlserver://127.0.0.1:1433;DatabaseName=database";
}else if(type === "org.postgresql.Driver"){
this.currentConfig.dbUrl = "jdbc:postgresql://127.0.0.1:5432/database";
}else if(type === "oracle.jdbc.OracleDriver"){
this.currentConfig.dbUrl = "jdbc:oracle:thin:192.168.2.1:1521:database";
} }
},
} }
} }
</script> </script>
<style scoped> <style scoped>
.buttons { .buttons {
float: right; float: right;
} }
</style> </style>