uniapp使用sqlite数据库做离线缓存功能

已于 2023-12-26 08:46:11 修改
阅读量554 收藏 12
点赞数 11
文章标签： oracle jvm 数据库 前端 uni-app javascript
于 2023-12-25 22:36:34 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_55701505/article/details/135203751
版权

前期工作

  • 在 manifest.json 中打开 SQLite 数据库
    在这里插入图片描述
  • 创建数据库存储文件
    在这里插入图片描述

开始封装 sqlite.js

module.exports = {
  dbName: 'chat', // 数据库名称
  dbPath: '_doc/chat.db', // 数据库地址
  // 判断数据库是否打开
  isOpen() {
    let open = plus.sqlite.isOpenDatabase({
      name: this.dbName,
      path: this.dbPath
    })
    return open
  },
  // 创建数据库，如果存在数据库就打开
  openSqlite() {
    return new Promise((resolve, reject) => {
      plus.sqlite.openDatabase({
        name: this.dbName,
        path: this.dbPath,
        success: (res) => {
          resolve(res)
        },
        fail: (err) => {
          reject(err)
        }
      })
    })
  },
  // 关闭数据库
  closeSqlite() {
    return new Promise((resolve, reject) => {
      plus.sqlite.closeDatabase({
        name: this.dbName,
        success: (res) => {
          resolve(res)
        },
        fail: (err) => {
          reject(err)
        }
      })
    })
  },
  /* 数据库建表 sql: 'CREATE TABLE IF NOT EXISTS dbTable("id" varchar(50),"name" TEXT) 
  创建 CREATE TABLE IF NOT EXISTS、 dbTable 是表名， 不能用数字开头、 括号里是表格的表头 */
  createTable(dbTable, data) {
    return new Promise((resolve, reject) => {
      plus.sqlite.executeSql({
        name: this.dbName,
        sql: `CREATE TABLE IF NOT EXISTS ${dbTable}(${data})`,
        success: (res) => {
          console.log('创建数据库表', res);
          resolve(res)
        },
        fail: (err) => {
          reject(err)
        }
      })
    })
  },
  // 数据库删表 
  dropTable(dbTable) {
    return new Promise((resolve, reject) => {
      plus.sqlite.executeSql({
        name: this.dbName,
        sql: `DROP TABLE ${dbTable}`,
        success: (res) => {
          resolve(res)
        },
        fail: (err) => {
          reject(err)
        }
      })
    })
  },
  /* 向表格里添加数据 sql:'INSERT INTO dbTable VALUES('x','x','x')'   对应新增
   或者 sql:'INSERT INTO dbTable ('x','x','x') VALUES('x','x','x')'   具体新增
   插入 INSERT INTO  、 dbTable 是表名、根据表头列名插入列值 */
  insertTableData(dbTable, data, condition) {
    // 判断有没有传参
    if (dbTable !== void 0 && data !== void 0) {
      // 判断传的参是否有值
      let bol = (JSON.stringify(data) == '{}')
      if (!bol) {
        let sql = condition == void 0 ? `INSERT INTO ${dbTable} VALUES('${data}')` :
          `INSERT INTO ${dbTable} (${condition}) VALUES(${data})`
        return new Promise((resolve, reject) => {
          // 表格添加数据
          plus.sqlite.executeSql({
            name: this.dbName,
            sql,
            success: (res) => {
              resolve(res)
            },
            fail: (err) => {
              reject(err)
            }
          })
        })
      } else {
        return new Promise((resolve, reject) => {
          reject('错误添加')
        })
      }
    } else {
      return new Promise((resolve, reject) => {
        reject('错误添加')
      })
    }
  },
  /* 根据条件向表格里添加数据  有数据更新、无数据插入
  (建表时需要设置主键) 例如 --- "roomid" varchar(50) PRIMARY KEY */
  insertOrReplaceData(dbTable, data, condition) {
    // 判断有没有参数
    if (dbTable !== void 0 && data !== void 0) {
      let sql = condition == void 0 ? `INSERT OR REPLACE INTO ${dbTable} VALUES('${data}')` :
        `INSERT OR REPLACE INTO ${dbTable} (${condition}) VALUES(${data})`;
      return new Promise((resolve, reject) => {
        plus.sqlite.executeSql({
          name: this.dbName,
          sql,
          success: (res) => {
            resolve(res)
          },
          fail: (err) => {
            reject(err)
          }
        })
      })
    } else {
      return new Promise((resolve, reject) => {
        reject('错误添加')
      })
    }
  },
  /* 查询获取数据库里的数据 sql:'SELECT * FROM dbTable WHERE lname = 'lvalue''
  查询 SELECT * FROM 、 dbTable 是表名、 WHERE 查找条件 lname,lvalue 是查询条件的列名和列值 */
  selectTableData(dbTable, uname, namevalue, upass, passvalue, urrn, rrnvalue) {
    if (dbTable !== undefined) {
      // 第一个是表单名称，后两个参数是列表名，用来检索
      if (uname !== undefined && upass !== undefined && urrn !== undefined) {
        // 三个检索条件
        var sql =
          `SELECT * FROM ${dbTable} WHERE ${uname} = '${namevalue}' AND ${upass} = '${passvalue}' AND ${urrn}='${rrnvalue}'`;
      }
      if (uname !== undefined && upass !== undefined && urrn == undefined) {
        // 两个检索条件
        var sql = `SELECT * FROM ${dbTable} WHERE ${uname} = '${namevalue}' AND ${upass} = '${passvalue}'`;
      }
      if (uname !== undefined && upass == undefined && urrn == undefined) {
        // 一个检索条件
        var sql = `SELECT * FROM ${dbTable} WHERE ${uname} = '${namevalue}'`;
        // console.log(sql);
      }
      if (uname == undefined) {
        var sql = `SELECT * FROM ${dbTable}`;
      }
      return new Promise((resolve, reject) => {
        // 表格查询数据  执行查询的SQL语句
        plus.sqlite.selectSql({
          name: this.dbName,
          sql: sql,
          success(e) {
            resolve(e);
          },
          fail(e) {
            reject(e);
          }
        })
      })
    } else {
      return new Promise((resolve, reject) => {
        reject('错误查询')
      });
    }
  },
  /* 删除表里的数据 sql:'DELETE FROM dbTable WHERE lname = 'lvalue''
  删除 DELETE FROM 、 dbTable 是表名、 WHERE 查找条件 lname,lvalue 是查询条件的列名和列值 */
  deleteTableData(dbTable, lname, lvalue, ww, ee) {
    if (dbTable !== void 0) {
      if (lname == void 0) {
        var sql = `DELETE FROM ${dbTable}`;
      } else {
        // ww !== void 0 ? 两个检索条件 ：一个检索条件 
        var sql = ww !== void 0 ? `DELETE FROM ${dbTable} WHERE ${lname} = '${lvalue}' AND ${ww} = '${ee}'` :
          `DELETE FROM ${dbTable} WHERE ${lname} = '${lvalue}'`;
      }
      return new Promise((resolve, reject) => {
        // 删除表格 
        plus.sqlite.executeSql({
          name: this.dbName,
          sql,
          success: (res) => {
            resolve(res)
          },
          fail: (err) => {
            reject(err)
          }
        })
      })
    } else {
      return new Promise((resolve, reject) => {
        reject('错误删除')
      })
    }
  },
  /* 修改数据表里的数据 sql:"UPDATE dbTable SET 列名 = '列值',列名 = '列值' WHERE lname = 'lvalue'"
  修改 UPDATE 、 dbTable 是表名, data: 要修改的列名=修改后列值, lname,lvalue 是查询条件的列名和列值 */
  updateTableData(dbTable, data, lname, lvalue) {
    let sql = lname == void 0 ? `UPDATE ${dbTable} SET ${data}` :
      `UPDATE ${dbTable} SET ${data} WHERE ${lname} = '${lvalue}'`;
    // WHERE 前面是要修改的列名、列值，后面是条件的列名、列值
    return new Promise((resolve, reject) => {
      // 修改数据
      plus.sqlite.executeSql({
        name: this.dbName,
        sql,
        success: (res) => {
          resolve(res)
        },
        fail: (err) => {
          reject(err)
        }
      })
    })
  },
  /* 获取指定数据条数  sql:"SELECT * FROM dbTable ORDER BY 'id' DESC LIMIT 15 OFFSET 'num'"
  dbTable 表名, ORDER BY 代表排序默认正序, id 是排序的条件 DESC 代表倒序，从最后一条数据开始拿
  LIMIT 15 OFFSET '${num}',这句的意思是跳过 num 条拿 15 条数据, num 为跳过多少条数据是动态值
  例 初始num设为0，就从最后的数据开始拿15条，下次不拿刚获取的数据，所以可以让num为15，这样就能一步一步的拿完所有的数据 */
  pullSQL(dbTable, id, num) {
    return new Promise((resolve, reject) => {
      plus.sqlite.selectSql({
        name: this.dbName,
        sql: `SELECT * FROM ${dbTable} ORDER BY ${id} DESC LIMIT 15 OFFSET ${num}`,
        success: (res) => {
          resolve(res)
        },
        fail: (err) => {
          reject(err)
        }
      })
    })
  }
}

使用 SQLite

  • 导入 sqlite
import DB from '@/utils/sqlite.js'
  • 打开数据库
openSQL() {
  let open = DB.isOpen();
  if (!open) {
  	DB.openSqlite()
  	.then(() => {
  	  console.log('数据库打开')	
	})
	.catch(() => {
	  console.log('数据库关闭')
	})
  }
}
  • 关闭数据库
closeSQL() {
  let open = DB.isOpen();
  if (open) {
  	DB.closeSqlite()
  	.then(() => {
  	  console.log("数据库已关闭");
  	})
  	.catch(() => {
  	  console.log("数据库关闭失败");
  	})
  }
}
  • 创建表
createTable() {
  let open = DB.isOpen();
  if (open) {
  	this.openSQL();
  	/**
     * id: 为一个 主键 id 
     * INTEGER PRIMARY KEY AUTOINCREMENT 自动生成一个自增的主键 id 
     * name...: 则是表内的键名
     */
  	let sql = '"id" INTEGER PRIMARY KEY AUTOINCREMENT,"name" text,"content" text,"time" text';
  	// 创建表 DB.createTable(表名，表的列)
  	DB.createTable('chat', sql)
  	.then(() => {
  	  console.log('创建 chat 表成功')
  	})
  	.catch(() => {
  	  console.log('创建表失败')
  	})
  } else {
  	console.log('数据库未打开')
  }
},
  • 删除表
detaleTable() {
  let open = DB.isOpen();
  if (open) {
    DB.dropTable('chat')
    .then(res => {
      console.log('删除表成功', res);
    })
    .catch(err => {
      console.log('删除表失败');
    })
  }
}
  • 查询表数据
selectTableData() {
  let open = DB.isOpen();
  if (open) {
    // 查询表 DB.selectTableData(表名,查询条件列名,查询条件列值)
    DB.selectTableData('chat')
    .then(res => {
      console.log('contact', res);
    })
    .catch(err => {
      console.log('查询失败');
    })
  } else {
    console.log('数据库未打开');
  }
}
  • 向表格里添加数据
insertTableData() {
  let open = DB.isOpen();
  if (open) {
    let arr = [
      { name: '小明', content: "你好呀" },
      { name: '小红', content: "HI" }
    ]
    arr.map(v => {
      let time = new Date().getTime();
      let sql = `'${v.name}','${v.content}','${time}'`;
      let condition = "'name','content','time'";
      DB.insertOrReplaceData('chat', sql, condition)
      .then(res => {
        console.log('添加成功', res);
        this.selectTableData()
      })
      .catch(err => {
        console.log('添加失败');
      })
  } else {
    console.log('数据库未打开');
  }
}
  • 根据条件向表格里添加数据 有数据更新、无数据插入
    • 需要更新数据则需要传主键 id
    • 不传主键 id 则继续向后添加
insertOrReplaceData() {
  let open = DB.isOpen()
  if (open) {
    let arr = [
      {id: 1, name: '小明呀!', content: "你好呀!" },
    ]
    arr.map(v => {
      let time = new Date().getTime();
      let sql = `'${v.id}','${v.name}','${v.content}','${time}'`;
      let condition = "'id','name','content','time'";
      DB.insertOrReplaceData('chat', sql, condition)
      .then(res => {
        console.log('新增成功', res);
        this.selectTableData()
      })
      .catch(err => {
        console.log('新增失败');
      })
    })
  } else {
    console.log('数据库未打开');
  }
},
  • 删除表数据
deleteTableData() {
  let open = DB.isOpen()
  if (open) {
    DB.deleteTableData('chat', 'name', '小明')
    .then(res => {
      console.log('删除表数据成功');
    })
    .catch(err => {
      console.log('删除失败');
    })
  } else {
    console.log('数据库未打开');
  }
},
  • 修改表数据
updateTableData() {
  let open = DB.isOpen()
  if (open) {
    let time = new Date().getTime();
    let data = `content = '我被修改了',time = '${time}'`;
    // 修改表数据 DB.updateTableData(表名, 要修改的列名=修改后列值, 修改条件的列名, 修改条件的列值)
    DB.updateTableData('chat', data, 'name', '小明')
    .then(res => {
      console.log('数据库更新成功');
    })
    .catch(err => {
      console.log('数据库更新失败');
    })
  } else {
    console.log('数据库未打开');
  }
},
  • 获取指定数据条数
pullSQL() {
  let open = DB.isOpen();
  if (open) {
    DB.pullSQL('chat', 'id', 1)
    .then(res => {
      console.log(res, '@@@');
    })
    .catch(err => {
      console.log(err, '!!!');
    })
  }
},
__夏天
关注
  • 11
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
uniAPP使用sqlite数据库demo
04-01
这个“uniAPP使用sqlite数据库demo”是一个示例项目，旨在展示如何在uniAPP中集成并操作SQLite数据库。下面我们将详细探讨相关知识点。 1. **uniAPP介绍**： - uniAPP是由HBuilderX开发的一款基于Vue.js的开源框架...
uniapp离线存储数据到SQLite数据库
LueLueLue77的博客
03-09 1404
这里我记录下我在uniapp离线存储数据到SQLite数据库中的方法，这里主要是uniapp去操作SQLite数据库的一些操作，我把这些操作写成一个class在此记录方便自己或者需要的人使用。最近在做项目中，有需求需要app在无网络的情况下存储数据，等到有网络的时候把数据发送给后端。这个文件只是去操作数据库，至于sql语句需要根据自己的需求去动态的创建。
Uniapp的APP端实现本地离线缓存
weixin_46820017的博客
09-06 8385
离线缓存
【解决】uniapp安卓端实现离线功能（非打包）
cv1002420186的博客
06-25 1277
【解决】uniapp解决离线功能实现（非打包）
5-8 uni-app 全端离线本地存储方案
能带孩子会做饭
09-20 2046
5-8 uni-app 全端离线本地存储方案 H5、小程序、App、安卓、IOS全端离线存储解决方案。`plus.sqlite` 是对原生的 `sqlite` 的封装。它也是一种可以通过 `sql` 在本地增删改查数据库的方案。`plus.io` 是文件读写, 虽然也可以通过读写 `txt` 等文件存储数据, 但并不如专业的 `storage` 和 `websql` 方便。plus.storage 键值对数据存储, 它是把 `OS` 给原生 `App` 使用的键值对存储数据库封装一层给 `JS` 使用, 没
Android卸载不删除sqlite,android开发：如何在卸载应用程序操作下，不删除原来程序数据库？...
weixin_33390343的博客
05-28 1197
情景：做项目中发现，如果手动卸载安卓应用程序，会清除掉应用原来的数据，比如sqlite3数据库中的数据，为了避免用户卸载应用程序操作下，不会删掉原来的数据。实现：public class MyApplication extends Application {@Overridepublic void onCreate() {super.onCreate();}//重载这个方法，是用来打开SD卡上的数...
uni-app的实用技巧及数据缓存
热门推荐
phpweiyi的博客
06-19 1万+
其中，STRING 是需要拦截的 HTTP 请求的 URL 的匹配规则，可以使用字符串或正则表达式来表示。uni-app的数据缓存是指对数据进行本地存储，从而在下次访问时可以直接从本地获取数据，提高了程序的性能和用户体验。通过这种方法，我们可以在做前端开发的时候对所有的 HTTP 请求进行全局的拦截处理，实现对请求的统一处理、简化开发流程、提高代码质量等目的。通过uni.setStorage可以将数据存储到storage中，通过uni.getStorage可以从storage中读取数据。
uni-app用sqlite数据库本地缓存
05-12
使用sqlite数据库本地缓存
uni-app中使用sqlite对本地缓存下数据进行处理
12-14
1.App配置权限配置选中SQLite 2.自定义调试基座 1.简单操作页面 判断数据库是否打开 打开数据库 关闭数据库 创建表 删除表 执行事务 新增数据 批量新增数据 删除所有数据 查询数据 2.模拟...
Android使用SQLite数据库的示例
01-05
Android中SQLite数据库的使用 1、创建SQLite数据库 SQLiteDatabase db= SQLiteDatabase.openOrCreateDatabase( /data/data/ + getPackageName() + /test.db, null); 执行完这条语句，可以在adb shell下进入/data/...
Android开发中使用SQLite数据库
01-31
SQLite一个非常流行的嵌入式数据库，它支持SQL语言，并且只利用很少的内存就有很好的性能。此外它还是开源的，任何人都可以使用它。许多开源项目（(Mozilla, PHP,Python）都使用了SQLite.SQLite由以下几个组件组成：...
uniapp + sqlite 缓存聊天数据
TeroZhang的博客
10-25 2209
【前言】缓存，这是一个老生常谈的话题，也常被作为前端面试的一个知识点。H5端为localStorage，浏览器限制5M大小，是缓存概念，可能会被清理；App端为原生的plus.storage，无大小限制，不是缓存，是持久化的。今天这里主要演示sqlite在uniapp中的使用！ 除此之外，其他数据存储方案： H5端还支持websql、indexedDB、sessionStorage App端还支持IO文件等本地存储方案。 SQLite sqlite语法学习 首先需要开启sqlite 这样你就可以在
17 数据缓存
wzjisking的专栏
01-05 368
一，全局变量（1）在app.js设置globalData的变量App({ onLaunch: function () { this.globalData.id = "51" }, globalData: { id: null, name:null, passwd:null } })（2）在使用页面获得保存参数 1，获取应用实例；2，获得实例变量 co
uniapp app端开发---离线状态数据保存
junjiehou的博客
08-04 1458
uniapp App端开发，使用html5+ plus.sqlite 模块，实现离线状态下的数据保存
Uniapp——App离线本地存储方案
乔的博客
06-17 2622
有人问三方清理工具清理垃圾会不会造成某些数据丢失，这个可能性是存在的，但概率并不高，取决于清理软件会不会分析你的存储数据里哪些是可以清除的垃圾数据。除了OS的清理工具外，一般没有root权限的清理工具是拿不到除了plus.io外的你的app的存储数据的。uni-app的Storage在不同端的实现不同，uni.storage在app侧，映射为plus.storage；1、图片下载不通过img的src，而是plus.dowload下载的，先下载图片，存好路径后，然后img的src动态指定文件路径。
uniapp本地数据库_uniapp中使用sqlite对本地缓存下数据进行处理
weixin_31693025的博客
12-28 3346
先说下我决定用sqlite的条件：主要是流程处理，需要在无网络的情况下实现，数据量多的时候用h5的缓存完全不够，在看了文档之后选择使用SQLite ，早起在mui的时候使用的indexDB；因为在社区也没收到具体的，所以写下记录下也和小伙伴分享下，有啥问题可以互相交流下。该文档中用到的两个点 (SQLite 和vue中的mixin)我这有两个环境，我先说一个简单；主页菜单进去 到列表界面 从该步...
uniapp plus.sqlite
x311609001028的博客
05-19 3821
uniapp中进行APP本地数据库操作,利用HTML5+的api及数据库语言可进行数据库表的创建删除，表数据的增删改查。 SQLite模块用于操作本地数据库文件，可实现数据库文件的创建，执行SQL语句等功能。 <template> <view> <view class="db-info"> <view> 数据库名:{{dbName}} </view> <view> 表名：{{dbTable}
教你如何无代码整合连接多个不同类型数据库
qq_35559533的博客
09-17 839
在已有多个互不相关且不同类型数据库的情况下想要将它们连接到一起整合并展示给用户,除了传统的使用 Spring 多数据源的搭建的方案外,可以在白码平台上通过无代码的方式进行整合。 此无代码方案有两种数据库连接方式： 通过数据库连接URL,直连客户原有数据库(云数据库或公网可连数据库)。 通过端口映射工具连接客户本地数据库。 以连接navicat中SQL server 2008/R2数据库中的会计科目表和MySQL 8.0数据库中的单据表为例： 1)配置SQL server 数据库中的会计科目表 数据库版
uniapp使用sqlite数据库
最新发布
08-19
在UniApp中使用SQLite数据库，你可以借助第三方插件uni-sqlite来实现。以下是使用uni-sqlite插件在UniApp中使用SQLite数据库的基本步骤： 1. 安装插件：在UniApp项目中，使用命令行工具或插件市场安装uni-sqlite...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值