From 0cd9129efa5dc365aa314fb8922c2becfbd55a9c Mon Sep 17 00:00:00 2001 From: bunny <1319900154@qq.com> Date: Wed, 25 Jun 2025 21:48:07 +0800 Subject: [PATCH] =?UTF-8?q?:lipstick:=20=E4=B8=BB=E9=A1=B5=E9=9D=A2?= =?UTF-8?q?=E7=BB=84=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/main/resources/application.yml | 2 +- .../static/lib/vue/index/AppHeader.js | 16 ++ .../static/lib/vue/index/MainCard.js | 194 ++++++++++++++++++ .../static/lib/vue/index/MainTable.js | 142 +++++++++++++ 4 files changed, 353 insertions(+), 1 deletion(-) create mode 100644 generator-code-server/generator-code/src/main/resources/static/lib/vue/index/AppHeader.js create mode 100644 generator-code-server/generator-code/src/main/resources/static/lib/vue/index/MainCard.js create mode 100644 generator-code-server/generator-code/src/main/resources/static/lib/vue/index/MainTable.js diff --git a/generator-code-server/generator-code/src/main/resources/application.yml b/generator-code-server/generator-code/src/main/resources/application.yml index 6c73de8..df0fbdf 100644 --- a/generator-code-server/generator-code/src/main/resources/application.yml +++ b/generator-code-server/generator-code/src/main/resources/application.yml @@ -3,7 +3,7 @@ server: spring: profiles: - active: prod + active: dev application: name: generator-code thymeleaf: diff --git a/generator-code-server/generator-code/src/main/resources/static/lib/vue/index/AppHeader.js b/generator-code-server/generator-code/src/main/resources/static/lib/vue/index/AppHeader.js new file mode 100644 index 0000000..fcccfff --- /dev/null +++ b/generator-code-server/generator-code/src/main/resources/static/lib/vue/index/AppHeader.js @@ -0,0 +1,16 @@ +// 如果一开始定义过了 defineComponent 就不要在下 script 标签中再写了 +const {defineComponent} = Vue; + +// 定义 Header 组件 +const AppHeader = defineComponent({ + name: "AppHeader", + template: ` +
+

+ + 代码生成器 +

+

快速生成数据库表对应的代码

+
+ ` +}); diff --git a/generator-code-server/generator-code/src/main/resources/static/lib/vue/index/MainCard.js b/generator-code-server/generator-code/src/main/resources/static/lib/vue/index/MainCard.js new file mode 100644 index 0000000..48725a7 --- /dev/null +++ b/generator-code-server/generator-code/src/main/resources/static/lib/vue/index/MainCard.js @@ -0,0 +1,194 @@ +const MainCard = defineComponent({ + name: "MainCard", + props: { + rawTableList: { + type: Array, + default: () => [] + }, + }, + data() { + return { + // 选择的数据库名称 + dbName: ref(""), + // 输入的表名 + tableName: ref(""), + // 查询数据库加载 + dbLoading: ref(false), + // 数据库信息 + databaseInfo: ref({}), + // 所有数据库列表 + databaseList: ref([]), + } + }, + template: ` +
+ +
+
+
+
+ 使用提示 +
+
+
+ + + 数据库: {{databaseList.length}} + + + + 数据库表: {{rawTableList.length}} + +
+
+

+ + 点击 表名 或 + 生成 进行跳转 +

+
+ + +
+
+ + + + + + GitHub 仓库 + + + + + + + + Gitee 仓库 + +
+
+ + +
+
+
+ + +
+ +
+ + +
+ +
+ + + +
+
+ +
+ + + 数据库连接详情 + + +
+
+
    +
  • + 数据库: {{databaseInfo.databaseProductName}} + {{databaseInfo.databaseProductVersion}} +
    • +
  • + 驱动: {{databaseInfo.driverName}} + ({{databaseInfo.driverVersion}}) +
    • +
  • URL: + {{databaseInfo.url}} +
    • +
  • 用户: {{databaseInfo.username}}
    • +
  • 当前库: {{dbName}}
    • +
+
+
+
+
+
+ `, + methods: { + /* 当前连接的数据库信息 */ + async getDatabaseInfoMetaData() { + this.dbLoading = true; + + const response = await axios.get("/table/databaseInfoMetaData"); + const {data, code} = response.data; + if (code !== 200) return; + + this.databaseInfo = data + + // 设置返回的所有的数据库列表 + this.databaseList = data.databaseList; + + // 设置当前的数据库，为空时赋值，否则就用自己选择的 + if (!this.dbName) { + this.dbName = data.currentDatabase; + } + + this.dbLoading = false; + }, + + /* 刷新查询 */ + async onRefresh() { + await this.getDatabaseInfoMetaData(); + this.$emit("getDatabaseTableList") + } + }, + async mounted() { + // 当前连接的数据库信息 + await this.getDatabaseInfoMetaData(); + }, + watch: { + /* 绑定到外部的变量---dbSelect */ + dbName: { + handler(val) { + this.$emit("update:dbSelect", val) + }, + }, + + /* 绑定到外部的变量---tableSelect */ + tableName: { + handler(val) { + this.$emit("update:tableSelect", val) + } + } + } +}) \ No newline at end of file diff --git a/generator-code-server/generator-code/src/main/resources/static/lib/vue/index/MainTable.js b/generator-code-server/generator-code/src/main/resources/static/lib/vue/index/MainTable.js new file mode 100644 index 0000000..3b75799 --- /dev/null +++ b/generator-code-server/generator-code/src/main/resources/static/lib/vue/index/MainTable.js @@ -0,0 +1,142 @@ +const MainTable = defineComponent({ + name: "MainTable", + props: ["tableList", "rawTableList", "loading"], + template: ` +
+
+
+ 数据表列表 +
+
+ +
+
+ +
+ +
+ + + + + + + + + + + + + + + + + + + + + +
#表名注释所属数据库操作
{{index + 1}}{{ table.tableName}}{{ table.comment }}{{ table.tableCat }} + +
+
+
+ + +
+
+
共 {{ totalItems }} 条
+ + + +
+ + +
+
+
+
+ `, + data() { + return { + // 分页相关数据 + currentPage: ref(1), + // 每页数 + itemsPerPage: ref(10), + // 总的数据条数 + totalItems: ref(0), + // 表格选项 + tablePageOptions: [5, 10, 20, 50, 100, 150, 200] + } + }, + computed: { + // 计算总页数 + totalPages() { + return Math.ceil(this.totalItems / this.itemsPerPage); + }, + // 分页后的数据 + paginatedTableList() { + const start = (this.currentPage - 1) * this.itemsPerPage; + const end = start + this.itemsPerPage; + return this.tableList.slice(start, end); + } + }, + methods: { + /* 计算可见的页码范围 */ + visiblePages() { + // 显示当前页前后各2页 + const range = 2; + const start = Math.max(1, this.currentPage - range); + const end = Math.min(this.totalPages, this.currentPage + range); + + const pages = []; + for (let i = start; i <= end; i++) { + pages.push(i); + } + return pages; + } + } +}) \ No newline at end of file