sqlite-manage数据库可视化管理uniqpp

痛定思痛。 2024-03-17 16:38 3阅读 0赞

## 一、sqlite-manage介绍 ##

> **sqlite-manage** 是 **SQLite** 数据库**可视化管理**插件，更方前期查看和操作**SQLite**数据库，给**APP**开发者提供方便，**避免重复造轮子**。  
> 内置**增删改查**工具类，可按需**全局引用**或**单独引用**。

## 二、使用sqlite要打开模块选项 ##

![在这里插入图片描述][1b337ffcdec94381b20f06a3b9bc3ab1.png]

## 三、页面展示 ##

## 四、可视化使用方法 ##

### 1、下载插件 ###

[https://ext.dcloud.net.cn/publish?id=13429&op=edit][https_ext.dcloud.net.cn_publish_id_13429_op_edit]  
![在这里插入图片描述][951e5efe562e484094fcc34e65320c59.png]

### 2、使用可视化模块 ###

> 新建页面导入 sqliteManage模块

#### 接收参数 ####

<table> 
 <thead> 
  <tr> 
   <th>参数名称</th> 
   <th>类型</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>dbName</td> 
   <td>String</td> 
   <td>数据库名称</td> 
  </tr> 
  <tr> 
   <td>tableSqls</td> 
   <td>Array</td> 
   <td>创建表的Sql语句</td> 
  </tr> 
  <tr> 
   <td></td> 
   <td></td> 
   <td></td> 
  </tr> 
 </tbody> 
</table>

<template>
    	<view>
    		<sqlite-manage :dbName="dbName" :tableSqls="tableSqls"></sqlite-manage>
    	</view>
    </template>
    
    <script>
    	// 导入可视化页面组件
    	import sqliteManage from '@/uni_modules/zjy-sqlite-manage/components/zjy-sqlite-manage/zjy-sqlite-manage.vue'
    
    	export default {
        
    		components: {
        
    			sqliteManage
    		},
    		data() {
        
    			return {
        
    				title: 'Hello',
    				//数据库名称
    				dbName: 'testDb',
    				//初始化的表
    				tableSqls: [{
        
    					tableName: 'user',
    					sql: `CREATE TABLE "user" (
    						  "id" text NOT NULL,
    						  "name" TEXT NOT NULL, --名称
    						  "createTime" DATE, --创建时间
    						  "remark" TEXT, --描述
    						  PRIMARY KEY ("id") --主键
    						);`
    				}, {
        
    					tableName: 'hobby',
    					sql: `CREATE TABLE "hobby" (
    						  "id" text NOT NULL, --ID
    						  "userId" text, --用户ID
    						  "hobby" text, --爱好
    						  "createTime" DATE, --创建时间
    						  "remark" TEXT, --描述
    						  PRIMARY KEY ("id") --主键
    						);`
    				}]
    			}
    		},
    	}
    </script>
    <style>
    </style>

## 五、使用数据库工具类 ##

### 1、dbUtils工具包 ###

#### (局部导入) ####

> 在页面中直接引用工具包使用即可。

// 使用内置SQLite数据库操作工具类
    import dbUtils from '@/uni_modules/zjy-sqlite-manage/components/zjy-sqlite-manage/dbUtils.js'

#### （全局导入） ####

> 在main.js文件中导入工具包，并挂载到全局变量中。

import dbUtils from "/common/dbUtils.js"

// Vue2
    Vue.prototype.$dbUtils = dbUtils

// Vue3
    app.config.globalProperties.$dbUtils = dbUtils;

![在这里插入图片描述][e4281abe960d4a4cacd3dd95ba74650d.png]

#### 2、方法使用说明 ####

全局引用时使用方法：

this.$dbUtils.open('testDb');

局部引用时使用方法：

dbUtils.open('testDb');

<table> 
 <thead> 
  <tr> 
   <th align="left">方法名称</th> 
   <th align="left">参数含义</th> 
   <th align="left">描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">openDb(name)</td> 
   <td align="left">(库名)</td> 
   <td align="left">打开数据库</td> 
  </tr> 
  <tr> 
   <td align="left">init(name, tableSqls)</td> 
   <td align="left">(库名,创建表的Sql语句的数组)<br>数组格式[{tableName:‘’,sql:‘’},tableName:‘’,sql:‘’}]</td> 
   <td align="left">初始化数据库</td> 
  </tr> 
  <tr> 
   <td align="left">getTable(name)</td> 
   <td align="left">(库名)</td> 
   <td align="left">获取所有的表信息</td> 
  </tr> 
  <tr> 
   <td align="left">getCount(name, tabName)</td> 
   <td align="left">(库名,表名)</td> 
   <td align="left">查询表数据总条数</td> 
  </tr> 
  <tr> 
   <td align="left">isTable(name, tabName)</td> 
   <td align="left">(库名,表名)</td> 
   <td align="left">表是否存在</td> 
  </tr> 
  <tr> 
   <td align="left">updateSQL(name, tabName, setData, setName, setVal)</td> 
   <td align="left">(库名,表名,要更新的对象如:{id:1,name:‘张三’,age:18},条件名如:id,条件值如:1)</td> 
   <td align="left">修改数据</td> 
  </tr> 
  <tr> 
   <td align="left">delData(name, tabName, setData)</td> 
   <td align="left">(库名,表名, 条件如:{name:‘张三’,age:18})</td> 
   <td align="left">删除数据库数据</td> 
  </tr> 
  <tr> 
   <td align="left">closeSQL(name)</td> 
   <td align="left">(库名)</td> 
   <td align="left">关闭数据库</td> 
  </tr> 
  <tr> 
   <td align="left">isOpen(name)</td> 
   <td align="left">(库名)</td> 
   <td align="left">监听数据库是否开启</td> 
  </tr> 
  <tr> 
   <td align="left">delTable(name, tabName)</td> 
   <td align="left">(库名,表名)</td> 
   <td align="left">删除表</td> 
  </tr> 
  <tr> 
   <td align="left">addTab(name, sql)</td> 
   <td align="left">(库名,创建表的Sql语句)</td> 
   <td align="left">创建表</td> 
  </tr> 
  <tr> 
   <td align="left">addTabItem(name, tabName, obj)</td> 
   <td align="left">(库名,表名,插入的对象如:{id:1,name:‘张三’,age:18})</td> 
   <td align="left">添加数据</td> 
  </tr> 
  <tr> 
   <td align="left">mergeSql(name, tabName, tabs)</td> 
   <td align="left">(库名,目标表名如:user, 数据源表名集合如:[‘user1’,‘user2’,‘user3’])</td> 
   <td align="left">合并数据</td> 
  </tr> 
  <tr> 
   <td align="left">getDataList(name, tabName, num, size, byName, byType)</td> 
   <td align="left">(库名,表名, 第几页, 每页条数, 排序字段, 排序类型)</td> 
   <td align="left">获取分页数据库数据</td> 
  </tr> 
  <tr> 
   <td align="left">selectDataList(name, tabName, setData, byName, byType)</td> 
   <td align="left">(库名,表名, 查询条件, 排序字段, 排序类型)</td> 
   <td align="left">查询数据库数据</td> 
  </tr> 
  <tr> 
   <td align="left">selectCount(name, tabName, setData)</td> 
   <td align="left">(库名,表名, 查询条件)</td> 
   <td align="left">查询数据条数</td> 
  </tr> 
  <tr> 
   <td align="left"></td> 
   <td align="left"></td> 
   <td align="left"></td> 
  </tr> 
 </tbody> 
</table>

## 有问题留言或私信 ##

[1b337ffcdec94381b20f06a3b9bc3ab1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/11e3296cf07e41d7bf6a2d4fd1c09d7c.png
[https_ext.dcloud.net.cn_publish_id_13429_op_edit]: https://ext.dcloud.net.cn/publish?id=13429&op=edit
[951e5efe562e484094fcc34e65320c59.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/ca6fa72579374c2c8037126924d59fa9.png
[e4281abe960d4a4cacd3dd95ba74650d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/aa83182e590848c893f9030cf7fd006a.png