Ionic2调用本地SQlite实例


Posted in Javascript onApril 22, 2017

普通的app用ionic内置的Storage存储键值对的方式可以满足日常的使用,但是有时候遇到一些奇怪的需求。比如说有个网友留言说做一个离线版的App,怎样调用本地Sqlite执行SQL语句。问题描述清楚直接上代码。

需要说明的是SQLite是手机内置的数据库存储方式,在Ionic2中需要安装相应的插件和安装包。过程很简单

第一步

安装插件、并加入项目

$ ionic plugin add cordova-sqlite-storage
$ npm install --save @ionic-native/sqlite

第二步

把服务加入到src/app/app.moudle.ts

...
import { SQLite } from '@ionic-native/sqlite';
...
providers: [
 ...
 SQLite
]
...

第三步

使用数据库,常规来说,这一步应该封装成公共服务或者工具类。类中是具体的创建数据库,调用数据库,CRUD等方法。这里只是说明原理,直接调用

import { Component } from '@angular/core';
import { SQLite, SQLiteObject } from '@ionic-native/sqlite';
@Component({
 selector: 'page-hello-ionic',
 templateUrl: 'hello-ionic.html'
})
export class HelloIonicPage {
 constructor(
       private sqlite: SQLite) {

 }
 database :SQLiteObject;
 ngOnInit(){
  this.initDB();
 }
 initDB(){
  this.sqlite.create({
   name: 'data.db',
   location: 'default'
  })
  .then((db: SQLiteObject) => {
  db.executeSql('create table t_log(name VARCHAR(32))', {})//建表
   .then(() => console.log('Executed SQL'))
   .catch(e => console.log(e));

  this.database = db;
  db.executeSql("insert into t_log values('123')",{});//插入数据
  })
  .catch(e => console.log(e));

 }
//查询
query() {
  let results = this.database.executeSql("select * from t_log",{});
  alert(data.rows.length);
  alert(data.rows.item(0).name);
  })
 }
}

最后一步

这一步一定要生成app安装到手机才能得到结果,毕竟是调用手机内置的SQLite。
ionic build android

用上面的命令构建APP并安装到手机看看效果吧

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 简练的几个函数
Aug 29 Javascript
extjs 学习笔记(三) 最基本的grid
Oct 15 Javascript
jquery遍历select元素(实例讲解)
Dec 31 Javascript
js获取判断上传文件后缀名的示例代码
Feb 19 Javascript
详解JS面向对象编程
Jan 24 Javascript
前端性能优化及技巧
May 06 Javascript
JS定义类的六种方式详解
May 12 Javascript
JavaScript知识点总结(十一)之js中的Object类详解
May 31 Javascript
微信小程序手势操作之单触摸点与多触摸点
Mar 10 Javascript
微信小程序使用navigateTo数据传递的实例
Sep 26 Javascript
Angular中支持SCSS的方法
Nov 18 Javascript
Angular6 正则表达式允许输入部分中文字符
Sep 10 Javascript
ionic+AngularJs实现获取验证码倒计时按钮
Apr 22 #Javascript
移动端使用localResizeIMG4压缩图片
Apr 22 #Javascript
使用Xcache缓存器加速PHP网站的配置方法
Apr 22 #Javascript
AngularJS的脏检查深入分析
Apr 22 #Javascript
在node中如何使用 ES6
Apr 22 #Javascript
JS实现异步上传压缩图片
Apr 22 #Javascript
vue 和vue-touch 实现移动端左右导航效果(仿京东移动站导航)
Apr 22 #Javascript
You might like
采集邮箱的php代码(抓取网页中的邮箱地址)
2012/07/17 PHP
三种php连接access数据库方法
2013/11/11 PHP
ThinkPHP页面跳转success与error方法概述
2014/06/25 PHP
thinkphp3.2.3 分页代码分享
2016/07/28 PHP
删除PHP数组中的重复元素的实现代码
2017/04/10 PHP
PHP实现一个按钮点击上传多个图片操作示例
2020/01/23 PHP
javascript document.images实例
2008/05/27 Javascript
Javascript 解疑
2009/11/11 Javascript
Jqyery中同等与js中windows.onload的应用
2011/05/10 Javascript
让innerText在firefox火狐和IE浏览器都能用的写法
2011/05/14 Javascript
Jquery图片滚动与幻灯片的实例代码
2013/04/08 Javascript
ECMAScript5中的对象存取器属性:getter和setter介绍
2014/12/08 Javascript
javascript实现下班倒计时效果的方法(可桌面通知)
2015/07/10 Javascript
jquery动画效果学习笔记(8种效果)
2015/11/13 Javascript
jQuery实现表格冻结顶栏效果
2017/08/20 jQuery
在vue项目中使用Nprogress.js进度条的方法
2018/01/31 Javascript
setTimeout时间设置为0详细解析
2018/03/13 Javascript
Mint UI组件库CheckList使用及踩坑总结
2018/12/20 Javascript
JavaScript设计模式之享元模式实例详解
2019/01/17 Javascript
jQuery实现动态添加和删除input框实例代码
2019/03/26 jQuery
vue实现鼠标移入移出事件代码实例
2019/03/27 Javascript
JavaScript算法学习之冒泡排序和选择排序
2019/11/02 Javascript
vue 检测用户上传图片宽高的方法
2020/02/06 Javascript
浅谈Vue static 静态资源路径 和 style问题
2020/11/07 Javascript
[02:36]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Magma 选手采访
2021/03/11 DOTA
python备份文件以及mysql数据库的脚本代码
2013/06/10 Python
使用Python实现windows下的抓包与解析
2018/01/15 Python
matplotlib调整子图间距,调整整体空白的方法
2018/08/03 Python
Python检查 云备份进程是否正常运行代码实例
2019/08/22 Python
python数组循环处理方法
2019/08/26 Python
Python如何获取Win7,Win10系统缩放大小
2020/01/10 Python
PyTorch-GPU加速实例
2020/06/23 Python
制冷与电控专业应届生求职信
2013/11/11 职场文书
公司经理聘任书
2014/03/29 职场文书
教育读书笔记
2015/07/02 职场文书
redis 限制内存使用大小的实现
2021/05/08 Redis