TRKJ/mayfly-go
2
0
Fork 0
mirror of https://gitee.com/dromara/mayfly-go synced 2025-11-03 07:50:25 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor: DB-数据操作优化

Browse Source
This commit is contained in:
meilin.huang
2023-11-13 17:41:03 +08:00
parent 76527d95bd
commit f234c72514
6 changed files with 125 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

92
mayfly_go_web/src/views/ops/db/SqlExec.vue
View File

@@ -16,12 +16,18 @@
<el-descriptions :column="4" size="small" border style="height: 10px" class="ml5">
<el-descriptions-item label-align="right" label="tag">{{ nowDbInst.tagPath }}</el-descriptions-item>
<el-descriptions-item label="实例" label-align="right">
<el-descriptions-item label-align="right">
<template #label>
<div>
<SvgIcon :name="DbInst.getIconName(nowDbInst.type)" :size="18" />
实例
</div>
</template>
{{ nowDbInst.id }}
<el-divider direction="vertical" border-style="dashed" />
{{ nowDbInst.type }}
<el-divider direction="vertical" border-style="dashed" />
{{ nowDbInst.name }}
<el-divider direction="vertical" border-style="dashed" />
{{ nowDbInst.host }}
</el-descriptions-item>
<el-descriptions-item label="库名" label-align="right">{{ state.db }}</el-descriptions-item>
@@ -36,10 +42,7 @@
<span v-if="data.type.value == SqlExecNodeType.DbInst">
<el-popover :show-after="500" placement="right-start" title="数据库实例信息" trigger="hover" :width="250">
<template #reference>
<SvgIcon v-if="data.params.type === 'mysql'" name="iconfont icon-op-mysql" :size="18" />
<SvgIcon v-if="data.params.type === 'postgres'" name="iconfont icon-op-postgres" :size="18" />
<SvgIcon name="InfoFilled" v-else />
<SvgIcon :name="DbInst.getIconName(data.params.type)" :size="18" />
</template>
<template #default>
<el-descriptions :column="1" size="small">
@@ -80,29 +83,37 @@
<el-col :span="20">
<el-container id="data-exec" class="mt5 ml5">
<el-tabs type="card" @tab-remove="onRemoveTab" @tab-change="onTabChange" style="width: 100%" v-model="state.activeName">
<el-tabs
v-if="state.tabs.size > 0"
type="card"
@tab-remove="onRemoveTab"
@tab-change="onTabChange"
style="width: 100%"
v-model="state.activeName"
>
<el-tab-pane closable v-for="dt in state.tabs.values()" :label="dt.label" :name="dt.key" :key="dt.key">
<!-- <template #label>
<el-popover :show-after="500" placement="right-start" title="数据库实例信息" trigger="hover" :width="250">
<template #label>
<el-popover :show-after="1000" placement="bottom-start" trigger="hover" :width="250">
<template #reference> {{ dt.label }} </template>
<template #default>
<el-descriptions :column="1" size="small">
<el-descriptions-item label="tagPath">
{{ dt.params.tagPath }}
</el-descriptions-item>
<el-descriptions-item label="名称">
{{ dt.params.name }}
</el-descriptions-item>
<el-descriptions-item label="host">
{{ `${dt.params.host}:${dt.params.port}` }}
<SvgIcon :name="DbInst.getIconName(dt.params.type)" :size="18" />
{{ dt.params.host }}
</el-descriptions-item>
<el-descriptions-item label="user">
{{ dt.params.username }}
</el-descriptions-item>
<el-descriptions-item label="备注">
{{ dt.params.remark }}
<el-descriptions-item label="库名">
{{ dt.params.dbName }}
</el-descriptions-item>
</el-descriptions>
</template>
</el-popover>
</template> -->
</template>
<db-table-data-op
v-if="dt.type === TabType.TableData"
@@ -147,6 +158,7 @@ import { TagTreeNode, NodeType } from '../component/tag';
import TagTree from '../component/TagTree.vue';
import { dbApi } from './api';
import { dispposeCompletionItemProvider } from '../../../components/monaco/completionItemProvider';
import SvgIcon from '@/components/svgIcon/index.vue';
const DbSqlEditor = defineAsyncComponent(() => import('./component/sqleditor/DbSqlEditor.vue'));
const DbTableDataOp = defineAsyncComponent(() => import('./component/table/DbTableDataOp.vue'));
@@ -195,7 +207,10 @@ class ContextmenuClickId {
// node节点点击时，触发改变db事件
const nodeClickChangeDb = (nodeData: TagTreeNode) => {
const params = nodeData.params;
changeDb({ id: params.id, name: params.name, type: params.type, tagPath: params.tagPath, databases: params.database }, params.db);
changeDb(
{ id: params.id, host: `${params.host}:${params.port}`, name: params.name, type: params.type, tagPath: params.tagPath, databases: params.database },
params.db
);
};
// tagpath 节点类型
@@ -221,6 +236,7 @@ const NodeTypeDbInst = new NodeType(SqlExecNodeType.DbInst)
id: params.id,
name: params.name,
type: params.type,
host: `${params.host}:${params.port}`,
dbs: dbs,
db: x,
})
@@ -372,9 +388,9 @@ onBeforeUnmount(() => {
* 设置editor高度和数据表高度
*/
const setHeight = () => {
state.editorHeight = window.innerHeight - 518 + 'px';
state.dataTabsTableHeight = window.innerHeight - 262 + 'px';
state.tablesOpHeight = window.innerHeight - 240 + 'px';
state.editorHeight = window.innerHeight - 500 + 'px';
state.dataTabsTableHeight = window.innerHeight - 250 + 'px';
state.tablesOpHeight = window.innerHeight - 220 + 'px';
state.tagTreeHeight = window.innerHeight - 165 + 'px';
};
@@ -420,7 +436,7 @@ const onCurrentContextmenuClick = (clickData: any) => {
}
};
// 选择数据库
// 选择数据库,改变当前正在操作的数据库信息
const changeDb = (db: any, dbName: string) => {
state.nowDbInst = DbInst.getOrNewInst(db);
state.db = dbName;
@@ -428,7 +444,6 @@ const changeDb = (db: any, dbName: string) => {
// 加载选中的表数据，即新增表数据操作tab
const loadTableData = async (db: any, dbName: string, tableName: string) => {
changeDb(db, dbName);
if (tableName == '') {
return;
}
@@ -448,6 +463,7 @@ const loadTableData = async (db: any, dbName: string, tableName: string) => {
tab.db = dbName;
tab.type = TabType.TableData;
tab.params = {
...getNowDbInfo(),
table: tableName,
};
state.tabs.set(key, tab);
@@ -459,7 +475,6 @@ const addQueryTab = async (db: any, dbName: string, sqlName: string = '') => {
ElMessage.warning('请选择数据库实例及对应的schema');
return;
}
changeDb(db, dbName);
const dbId = db.id;
let label;
@@ -491,6 +506,7 @@ const addQueryTab = async (db: any, dbName: string, sqlName: string = '') => {
tab.db = dbName;
tab.type = TabType.Query;
tab.params = {
...getNowDbInfo(),
sqlName: sqlName,
dbs: db.dbs,
};
@@ -510,7 +526,6 @@ const addTablesOpTab = async (db: any) => {
ElMessage.warning('请选择数据库实例及对应的schema');
return;
}
changeDb(db, dbName);
const dbId = db.id;
let key = `表操作:${dbId}:${dbName}.tablesOp`;
@@ -528,6 +543,7 @@ const addTablesOpTab = async (db: any) => {
tab.db = dbName;
tab.type = TabType.TablesOp;
tab.params = {
...getNowDbInfo(),
id: db.id,
db: dbName,
type: db.type,
@@ -589,6 +605,21 @@ const reloadTables = (nodeKey: string) => {
state.reloadStatus = true;
tagTreeRef.value.reloadNode(nodeKey);
};
/**
* 获取当前操作的数据库信息
*/
const getNowDbInfo = () => {
const di = state.nowDbInst;
return {
tagPath: di.tagPath,
id: di.id,
name: di.name,
type: di.type,
host: di.host,
dbName: state.db,
};
};
</script>
<style lang="scss">
@@ -601,13 +632,22 @@ const reloadTables = (nodeKey: string) => {
#data-exec {
min-height: calc(100vh - 155px);
.el-tabs {
--el-tabs-header-height: 30px;
}
.el-tabs__header {
margin: 0 0 10px;
margin: 0 0 5px;
.el-tabs__item {
padding: 0 10px;
}
}
.el-tabs__nav-next,
.el-tabs__nav-prev {
line-height: 30px;
}
}
.update_field_active {

17
mayfly_go_web/src/views/ops/db/component/sqleditor/DbSqlEditor.vue
View File

@@ -140,8 +140,8 @@ let monacoEditor: editor.IStandaloneCodeEditor;
const state = reactive({
token,
table: '', // 当前单表操作sql的表信息
sqlName: '',
sql: '', // 当前编辑器的sql内容
sql: '', // 当前编辑器的sql内容s
sqlName: '' as any, // sql模板名称
loading: false, // 是否在加载数据
execRes: {
data: [],
@@ -149,7 +149,7 @@ const state = reactive({
},
selectionDatas: [] as any,
editorHeight: '500',
tableDataHeight: 250 as any,
tableDataHeight: 240 as any,
hasUpdatedFileds: false,
});
@@ -170,8 +170,9 @@ onMounted(async () => {
console.log('in query mounted');
state.editorHeight = props.editorHeight;
state.sqlName = props.sqlName;
if (props.sqlName) {
const res = await dbApi.getSql.request({ id: props.dbId, type: 1, name: state.sqlName, db: props.dbName });
const res = await dbApi.getSql.request({ id: props.dbId, type: 1, db: props.dbName, name: props.sqlName });
state.sql = res.sql;
}
nextTick(() => {
@@ -255,6 +256,9 @@ const onDragSetHeight = () => {
};
const getKey = () => {
if (props.sqlName) {
return `${props.dbId}:${props.dbName}.${props.sqlName}`;
}
return props.dbId + ':' + props.dbName;
};
@@ -359,8 +363,7 @@ const saveSql = async () => {
notBlank(sql, 'sql内容不能为空');
let sqlName = state.sqlName;
const newSql = !sqlName;
if (newSql) {
if (!sqlName) {
try {
const input = await ElMessageBox.prompt('请输入SQL脚本名', 'SQL名', {
confirmButtonText: '确定',
@@ -382,7 +385,7 @@ const saveSql = async () => {
};
const deleteSql = async () => {
const sqlName = state.sqlName;
const sqlName = props.sqlName;
notBlank(sqlName, '该sql内容未保存');
const dbId = props.dbId;
const db = props.dbName;

31
mayfly_go_web/src/views/ops/db/db.ts
View File

@@ -28,6 +28,11 @@ export class DbInst {
*/
id: number;
/**
* ip:port
*/
host: string;
/**
* 实例名
*/
@@ -304,6 +309,7 @@ export class DbInst {
dbInst = new DbInst();
dbInst.tagPath = inst.tagPath;
dbInst.id = inst.id;
dbInst.host = inst.host;
dbInst.name = inst.name;
dbInst.type = inst.type;
dbInst.databases = inst.databases;
@@ -407,6 +413,31 @@ export class DbInst {
const flexWidth: number = contentWidth > columnWidth ? contentWidth : columnWidth;
return flexWidth > 500 ? 500 : flexWidth;
};
/**
* 根据数据库类型获取对应的图标名
* @param dbType 数据库类型
* @returns
*/
static getIconName = (dbType: string) => {
if (dbType == 'mysql') {
return 'iconfont icon-op-mysql';
}
if (dbType == 'postgres') {
return 'iconfont icon-op-postgres';
}
return 'InfoFilled';
};
static getIcon = (dbType: string) => {
if (dbType == 'mysql') {
return 'iconfont icon-op-mysql';
}
if (dbType == 'postgres') {
return 'iconfont icon-op-postgres';
}
return 'InfoFilled';
};
}
/**

2
server/go.mod
View File

@@ -13,7 +13,7 @@ require (
github.com/go-playground/validator/v10 v10.14.0
github.com/go-sql-driver/mysql v1.7.1
github.com/golang-jwt/jwt/v5 v5.1.0
github.com/gorilla/websocket v1.5.0
github.com/gorilla/websocket v1.5.1
github.com/kanzihuang/vitess/go/vt/sqlparser v0.0.0-20231018071450-ac8d9f0167e9
github.com/lib/pq v1.10.9
github.com/lionsoul2014/ip2region/binding/golang v0.0.0-20230712084735-068dc2aee82d

11
server/internal/db/api/db.go
View File

@@ -113,15 +113,14 @@ func (d *Db) ExecSql(rc *req.Ctx) {
for _, s := range sqls {
s = stringx.TrimSpaceAndBr(s)
// 多条执行，如果有查询语句，则跳过
if isMulti && strings.HasPrefix(strings.ToLower(s), "select") {
continue
// 多条执行，暂不支持查询语句
if isMulti {
biz.IsTrue(!strings.HasPrefix(strings.ToLower(s), "select"), "多条语句执行暂不不支持select语句")
}
execReq.Sql = s
execRes, err := d.DbSqlExecApp.Exec(execReq)
if err != nil {
biz.ErrIsNilAppendErr(err, fmt.Sprintf("[%s] -> 执行失败: ", s)+"%s")
}
biz.ErrIsNilAppendErr(err, fmt.Sprintf("[%s] -> 执行失败: ", s)+"%s")
if execResAll == nil {
execResAll = execRes

12
server/pkg/logx/logx.go
View File

@@ -44,6 +44,10 @@ func Debug(msg string, args ...any) {
Log(context.Background(), slog.LevelDebug, msg, args...)
}
func DebugContext(ctx context.Context, msg string, args ...any) {
Log(ctx, slog.LevelDebug, msg, args...)
}
func Debugf(format string, args ...any) {
Log(context.Background(), slog.LevelDebug, fmt.Sprintf(format, args...))
}
@@ -77,6 +81,10 @@ func Warn(msg string, args ...any) {
Log(context.Background(), slog.LevelWarn, msg, args...)
}
func WarnContext(ctx context.Context, msg string, args ...any) {
Log(ctx, slog.LevelWarn, msg, args...)
}
func Warnf(format string, args ...any) {
Log(context.Background(), slog.LevelWarn, fmt.Sprintf(format, args...))
}
@@ -89,6 +97,10 @@ func Error(msg string, args ...any) {
Log(context.Background(), slog.LevelError, msg, args...)
}
func ErrorContext(ctx context.Context, msg string, args ...any) {
Log(ctx, slog.LevelError, msg, args...)
}
func Errorf(format string, args ...any) {
Log(context.Background(), slog.LevelError, fmt.Sprintf(format, args...))
}