1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
| <template>
<div style="padding:20px;" id="app">
<div class="panel panel-primary">
<div class="panel-heading">ceshi</div>
<div class="align-center">
<el-form ref="form" :model="form" label-width="80px">
<el-form-item label="数据源类型">
<el-select v-model="form.dtype" placeholder="请选择数据源类型">
<el-option label="Mysql" value="0"></el-option>
<el-option label="Hive" value="1"></el-option>
<el-option label="Hbase" value="2"></el-option>
<el-option label="Clickhouse" value="3"></el-option>
</el-select>
</el-form-item>
<el-form-item label="数据源名称">
<el-input v-model="form.dbname"></el-input>
</el-form-item>
<el-form-item label="用户名">
<el-input v-model="form.username"></el-input>
</el-form-item>
<el-form-item label="密码">
<el-input v-model="form.userpassw"></el-input>
</el-form-item>
<el-form-item label="连接地址">
<el-input v-model="form.dadress"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">添 加</el-button>
<el-button type="primary" @click="test()">测试连接</el-button>
<el-button>取消</el-button>
</el-form-item>
</el-form>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
name: "test",
form: {
dbname: '',
dtype: '',
username: '',
userpassw: '',
dadress:''
}
}
},
methods: {
onSubmit() {
var _myvue = this
console.log('submit!');
this.$http.post('http://127.0.0.1:8091/datasource/insertDatasource',
{ "dname":this.form.dbname,
"dtype":this.form.dtype,
"username":this.form.username,
"userpassw":this.form.userpassw,
"dadress":this.form.dadress
}
,{emulateJSON: true}).then((response) => {
// if(response.bodyText = "success"){
alert("添加成功")
if(this.form.dtype == 0){
_myvue.$router.push({name:'mysqllistdatasourceinfo',params:{}})
}else if(this.form.dtype == 1){
_myvue.$router.push({name:'hivelistdatasourceinfo',params:{}})
}else if(this.form.dtype == 2){
_myvue.$router.push({name:'hbaselistdatasourceinfo',params:{}})
}else if (this.form.dtype == 3){
_myvue.$router.push({name:'clickhouselistdatasourceinfo',params:{}})
}
});
// }
},
test(){
this.$http.post('http://127.0.0.1:8091/datasource/testConnetc',
{ "dname":this.form.dbname,
"dtype":this.form.dtype,
"username":this.form.username,
"userpassw":this.form.userpassw,
"dadress":this.form.dadress
}
,{emulateJSON: true}).then((response) => {
debugger
if(response.bodyText == "true"){
alert("连接成功")
}else{
alert("连接失败")
}
});
}
}
}
</script>
<style type="text/css">
.align-center{
margin:0 auto; /* 居中 这个是必须的，，其它的属性非必须 */
width:1000px; /* 给个宽度 顶到浏览器的两边就看不出居中效果了 */
background:white; /* 背景色 */
text-align:center; /* 文字等内容居中 */
}
</style>
|
