<!DOCTYPE html>
|
<html>
|
<head>
|
<div th:replace="common/header.html"></div>
|
|
|
</head>
|
<body th:class="${application.sidebarCollapse}">
|
<div th:replace="common/chart.html"></div>
|
|
<div class="wrapper">
|
|
<div th:replace="common/navbar.html"></div>
|
|
<div th:replace="common/aside.html"></div>
|
|
<!-- Content Wrapper. Contains page content -->
|
<div class="content-wrapper" style="font-size:0.90rem">
|
<!-- Content Header (Page header) -->
|
<section class="content-header">
|
<div class="container-fluid">
|
<div class="row mb-2">
|
<div class="col-sm-6">
|
<h1></h1>
|
</div>
|
<div class="col-sm-6">
|
<ol class="breadcrumb float-sm-right">
|
<li class="breadcrumb-item active"></li>
|
</ol>
|
</div>
|
</div>
|
</div><!-- /.container-fluid -->
|
</section>
|
|
<!-- Main content -->
|
<section class="content">
|
<div class="container-fluid">
|
<div class="row">
|
|
<div class="col-md-10">
|
<div class="card card-primary">
|
<div class="card-header">
|
<h3 class="card-title">数据源配置</h3>
|
<div class=" float-sm-right">
|
<a href="javascript:history.back()">返回</a>
|
</div>
|
</div>
|
<!-- /.card-header -->
|
<!-- form start -->
|
<form role="form" id="form1" method="post" th:action="@{'/dbInfo/save'}" onsubmit="onSubmit()">
|
<input type="hidden" name="id" th:value="${dbInfo.id}"/>
|
<div class="card-body">
|
<div class="form-group">
|
<label><font color="red">*</font>数据源别名</label>
|
<input type="text" th:value="${dbInfo.aliasName}" autocomplete="off" class="validate[required,maxSize[50]] form-control" name="aliasName" id="aliasName" placeholder="输入别名如订单数据库">
|
</div>
|
<div class="form-group">
|
<label><font color="red">*</font>数据库类型</label>
|
<select class="validate[required] form-control" onchange="setDriver();" name="dbType" id="dbType">
|
<option value="mysql">MySQL</option>
|
<option value="oracle">Oracle</option>
|
<option value="postgresql">PostgreSQL</option>
|
<option value="sqlserver">SQLServer</option>
|
<option value="mariadb">MariaDB</option>
|
<option value="redis">Redis</option>
|
<option value="mongodb">MongoDB</option>
|
<option value="db2">DB2</option>
|
</select>
|
</div>
|
<div class="form-group" id="driveClassNameDiv">
|
<label><font color="red"></font>驱动名称</label>
|
<input type="text" disabled="true" id="driveClassName" autocomplete="off" class="form-control"/>
|
</div>
|
<div class="form-group">
|
<label><font color="red">*</font><span id="dbUrlSpan">JDBC连接字符串</span><span class="text-muted">（请替换IP，端口，数据库名称）</span></label>
|
<textarea class="validate[required,maxSize[500]] form-control" name="dbUrl" id="dbUrl"
|
th:text="${dbInfo.dbUrl}" rows="3" placeholder="数据库连接字符串(请替换IP，端口，数据库名称)"></textarea>
|
</div>
|
<div class="form-group" id="userNameDiv">
|
<label><font color="red">*</font><span id="userNameSpan">用户名</span></label>
|
<input type="text" th:value="${dbInfo.userName}" autocomplete="off" class="validate[maxSize[40]] form-control" name="userName" id="userName" placeholder="输入数据库用户名">
|
</div>
|
<div class="form-group" id="passwdDiv">
|
<label><font color="red"></font>密码 <span data-trigger="hover" data-container="body" data-toggle="popover" data-placement="top" data-content="显示密码" onclick="javascript:showPasswd();" style="cursor:pointer;margin-left: 5px"><i id="eyeSwitch" class="fa fa-eye"></i></span></label>
|
<input type="password" th:value="${dbInfo.passwd}" class="validate[maxSize[50]] form-control" name="passwd" id="passwd" placeholder="输入数据库密码">
|
</div>
|
</div>
|
<!-- /.card-body -->
|
|
<div class="card-footer">
|
<button type="button" onclick="test()" class="btn btn-primary btn-sm">连接测试</button>
|
<button type="submit" class="btn btn-primary btn-sm">保 存</button>
|
<button type="button" th:onclick="goback()" class="btn bg-gradient-danger btn-sm">返 回</button>
|
</div>
|
|
</form>
|
<!-- /.card-body -->
|
</div>
|
<!-- /.card -->
|
|
|
</div>
|
|
</div>
|
</div>
|
</section>
|
</div>
|
|
|
<div th:replace="common/footer.html"></div>
|
|
</div>
|
<!-- ./wrapper -->
|
<link rel="stylesheet" th:href="@{'/static/js/jQuery/validationEngine.jquery.css'}" type="text/css"/>
|
<script th:src="@{'/static/js/jQuery/jquery.validationEngine-zh_CN.js'}" type="text/javascript" charset="utf-8"></script>
|
<script th:src="@{'/static/js/jQuery/jquery.validationEngine.js'}" type="text/javascript" charset="utf-8"></script>
|
<script th:src="@{'/static/js/jQuery/jquery.form.min.js'}" type="text/javascript" charset="utf-8"></script>
|
|
<script th:inline="javascript">
|
$(document).ready(function(){
|
$("#form1").validationEngine();
|
$("#dbType").val([[${dbInfo.dbType}]]);
|
if($("#dbType").val()=='mysql'){
|
$("#driveClassName").val('com.mysql.jdbc.Driver');
|
}
|
if($("#dbType").val()=='oracle'){
|
$("#driveClassName").val('oracle.jdbc.driver.OracleDriver');
|
}
|
if($("#dbType").val()=='postgresql'){
|
$("#driveClassName").val('org.postgresql.Driver');
|
}
|
if($("#dbType").val()=='sqlserver'){
|
$("#driveClassName").val('com.microsoft.sqlserver.jdbc.SQLServerDriver');
|
}
|
if($("#dbType").val()=='mariadb'){
|
$("#driveClassName").val('org.mariadb.jdbc.Driver');
|
}
|
if($("#dbType").val()=='db2'){
|
$("#driveClassName").val('com.ibm.db2.jdbc.app.DB2Driver');
|
}
|
if($("#dbType").val()=='redis'){
|
$("#driveClassNameDiv").hide();
|
$("#dbUrlSpan").html("Redis服务器IP");
|
$("#userNameSpan").html("Redis端口");
|
}
|
if($("#dbType").val()=='mongodb'){
|
$("#driveClassNameDiv").hide();
|
$("#userNameDiv").hide();
|
$("#passwdDiv").hide();
|
$("#dbUrlSpan").html("MongoDB URL");
|
}
|
});
|
function onSubmit() {
|
$("#form1").attr("action","/wgcloud/dbInfo/save");
|
return true;
|
}
|
|
function test(){
|
$("#form1").attr("action","/wgcloud/dbInfo/validate");
|
$("#form1").ajaxSubmit(function(message) {
|
var msg = JSON.parse(message);
|
if(msg.code!=""){
|
if(msg.msg!='' && msg.code=="0"){
|
toastr.success(msg.msg);
|
}
|
if(msg.msg!='' && msg.code=="1"){
|
toastr.error(msg.msg);
|
}
|
}
|
});
|
}
|
|
function setDriver(){
|
$("#driveClassNameDiv").show();
|
$("#userNameDiv").show();
|
$("#passwdDiv").show();
|
$("#dbUrlSpan").html("JDBC连接字符串");
|
$("#userNameSpan").html("用户名");
|
|
if($("#dbType").val()=='mysql'){
|
$("#driveClassName").val('com.mysql.jdbc.Driver');
|
$("#dbUrl").val('jdbc:mysql://192.168.1.2:3306/wgcloud');
|
}
|
if($("#dbType").val()=='mariadb'){
|
$("#driveClassName").val('org.mariadb.jdbc.Driver');
|
$("#dbUrl").val('jdbc:mariadb://192.168.1.2:3306/wgcloud');
|
}
|
if($("#dbType").val()=='oracle'){
|
$("#driveClassName").val('oracle.jdbc.driver.OracleDriver');
|
$("#dbUrl").val('jdbc:oracle:thin:@192.168.1.2:1521:orcl');
|
}
|
if($("#dbType").val()=='postgresql'){
|
$("#driveClassName").val('org.postgresql.Driver');
|
$("#dbUrl").val('jdbc:postgresql://192.168.1.2:5432/wgcloud');
|
}
|
if($("#dbType").val()=='sqlserver'){
|
$("#driveClassName").val('com.microsoft.sqlserver.jdbc.SQLServerDriver');
|
$("#dbUrl").val('jdbc:sqlserver://192.168.1.2:1433;DatabaseName=wgcloud');
|
}
|
if($("#dbType").val()=='db2'){
|
$("#driveClassName").val('com.ibm.db2.jdbc.app.DB2Driver');
|
$("#dbUrl").val('jdbc:db2://192.168.1.2:5000/wgcloud');
|
}
|
if($("#dbType").val()=='redis'){
|
$("#driveClassNameDiv").hide();
|
$("#dbUrlSpan").html("Redis服务器IP");
|
$("#dbUrl").val('192.168.1.2');
|
$("#userNameSpan").html("Redis端口");
|
$("#userName").val("6379");
|
}
|
if($("#dbType").val()=='mongodb'){
|
$("#driveClassNameDiv").hide();
|
$("#userNameDiv").hide();
|
$("#passwdDiv").hide();
|
$("#dbUrlSpan").html("MongoDB URL");
|
$("#dbUrl").val('mongodb://192.168.1.2:27017');
|
}
|
}
|
|
function showPasswd(){
|
var type = $("#passwd").attr("type");
|
if(type=='text'){
|
$("#eyeSwitch").attr("class","fa fa-eye");
|
$("#passwd").attr("type","password");
|
}else{
|
$("#eyeSwitch").attr("class","fa fa-eye-slash");
|
$("#passwd").attr("type","text");
|
}
|
|
}
|
|
function goback() {
|
history.back();
|
}
|
|
|
|
|
|
</script>
|
</body>
|
</html>
|
