# utools_sql_convert_vue

**Repository Path**: chargeduck/utools_sql_convert_vue

## Basic Information

- **Project Name**: utools_sql_convert_vue
- **Description**: Utools插件SqlConvert的Vite+Vue3版本
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2024-07-20
- **Last Updated**: 2025-02-26

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README


# 0. 项目迁移通知
插件已重构，[新项目地址]( https://gitcode.com/qq_42059717/utools_sql_convert_vite)


# 0. Utools应用安装
1. 官网地址: [https://u.tools/](https://u.tools/download/)
![下载安装utools](img/utools下载.png)
2. 安装完成之后，使用`Alt + 空格`打开插件
3. 搜索插件市场
![搜索插件市场](img/搜索插件市场.png)
4. 搜索`SqlConvert`插件，点击安装
![搜索SqlConvert插件](img/搜索插件SqlConvert.png)
5. 更新插件，点击左侧的`SqlConvert`插件
![pluginDetail](img/pluginDetail.png)
![updatePlugin](img/updatePlugin.png)
# 1. 安装运行

1. 下载项目到本地

```shell
git clone git@gitee.com:chargeduck/utools_sql_convert_vue.git
```

2. 使用`npm`运行

```shell
npm install
npm run dev
```

3. 启动之后访问[localhost:5173](http://localhost:5713)

# 2. 在Utools中调试

> 想要调试插件，需要先安装`Utools开发者工具`,这个直接在utools的插件应用市场下载就行了

## 1. 创建插件信息

> 根据提示，创建自己的插件信息即可

1. 新建Utools项目

![创建Utools插件](./img/新建utools插件.png)

2. 填写项目信息

![插件信息填写](img/utools插件信息填写.png)

3. 选择`plugin.json`,这个文件的位置在项目目录的`utools`文件夹下

![选择plugin.json](img/选择plugin配置.png)

## 2. 调试

### 1. 实时调试

1. 进入到项目的`utools`文件夹下
2. 修改`plugin.json`

```json
{
	"main": "http://localhost:5173/index.html",
}
```

3. 在刚才选择`plugin.json`的地方，刷新一下
4. 输入关键字激活`SqlConvert`插件, 想要其他的可以在加

```json
{
    "cmds": [
        "sql转换",
        "转换",
        "MybatisLogsFormat",
        "代码生成",
        "Mybatis"
    ]
}
```

5. 在`vscode`或者`WebStorm`中更改代码，`utools`插件内就会自动更新

### 2. 打包测试

1. 进入项目根目录

2. 执行打包命令

```shell
npm run build
```

3. 将生成的`dist`目录，移动到`utools`文件夹下
4. 修改`plugin.json`

```json
{
   "main": "dist/index.html", 
}
```

5. 刷新`utools`中的`plugin.json`

# 3. 功能说明
> 使用说明 
- [使用说明](help/help.mp4)

<video >
    <source src="help/help.mp4" type="video/mp4">
</video>

- [MybatisLogFormat](help/log.mp4)

<video src="help/log.mp4"></video>

## 1. 列转in

> 该功能是最早支持的功能，从`Excel`或者`Navicat`等工具中复制查询结果到左侧输入框之中，点击转换就会转换成`sql`支持的in语句。

- 列转in语句

![](img/col2In1.png)

- 添加括号

![](img/col2in2.png)

## 2. 列转foreach

> 这个功能主要是为了方便书写foreach语句的。
>
> 比方说你现在使用`mybatis`有一个地方需要一个`<foreach>`语句,需要用三个字段
>
> ```sql
> id,nick_name,user_id
> ```
>
> 这个时候直接复制到左边，点击转换就能够生成`<foreach>`语句，
>
> 当然也支持只填写一个`id`匹配需要批量删除的场景

- 字段转foreach

![](img/col2Each.png)

- 批量删除或者只需要一个字段的场景

![](img/col2Each2.png)

## 3. 批量插入

> 将表所有的字段填写到左侧，在下方输入表名，选择数据库类型。点击转换即可生成批量插入语句
>
> **<font color=red>当前只实现了mysql,.oracle,postgresql</font>**
>
> 不填写表名会默认生成一个

![](img/insertBatch.png)

## 4. 批量更新

> 与上方功能类似，也是将所有的字段输入进入，输入表名，填写主键，选择数据库类型生成
>
> **<font color=red>0.0.5版本存在样式错乱问题，待下个版本修复</font>**

![](img/updateBatch.png)

## 5. 代码生成

> 这个功能比较复杂，暂时还没有完成，想要抢先体验的可以下载仓库代码，按照第一二章节试试

1. 点击配置 添加配置信息

![](img/sqlGenConfig.png)

2. 设置自定义的类型映射

​	(暂时没图，还没写)

3. 查看模板

> 本来准备用`velocity`模板引擎写呢，后来折腾了一天发现不行，然后就还用前端的[EJS](https://ejs.bootcss.com/#features)
>
> **<font color=red>这里更改配置之后，点击保存即可。重置的话会使用我写的一套配置</font>**
>
> **<font color=red>有一个问题就是我用的vue打包后的文件实现的，然后呢这个玩意我保存到了localStorage里边。utools插件自带的`utools.db.get()`和`utools.db.put()`这两个方法我不知道怎么用了。有大神可以修改一下 </font>**

![](img/sqlGenTemp.png)

4. 使用

> 将`sql`建表语句粘贴到左侧输入框，选择数据库类型和生成类型，点击生成即可,如果生成失败，建议看看配置里边是否填写了

![](img/genEntity.png)

## 6. MybaitsLogFormat

> idea里边有一个插件，就是你选中了`mybatis`打印的日志,然后生成可执行的sql

![](img/logFormat.png)