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定义类或函数的几种方式小结
Jan 09 Javascript
JavaScript中用getDate()方法返回指定日期的教程
Jun 09 Javascript
浅谈javascript中的 “ && ” 和 “ || ”
Feb 02 Javascript
JavaScript之排序函数_动力节点Java学院整理
Jun 30 Javascript
javascript 玩转Date对象(实例讲解)
Jul 11 Javascript
Javascript获取某个月的天数
May 30 Javascript
vue侧边栏动态生成下级菜单的方法
Sep 07 Javascript
Vue $emit $refs子父组件间方法的调用实例
Sep 12 Javascript
jQuery中使用validate插件校验表单功能
May 24 jQuery
layui自定义插件citySelect实现省市区三级联动选择
Jul 26 Javascript
JS数组Reduce方法功能与用法实例详解
Apr 29 Javascript
bootstrap-table后端分页功能完整实例
Jun 01 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 删除数组元素
2009/01/16 PHP
PHP的单引号和双引号 字符串效率
2009/05/27 PHP
php实现下载限制速度示例分享
2014/02/13 PHP
php通过rmdir删除目录的简单用法
2015/03/18 PHP
PHP模板引擎Smarty内建函数详解
2016/04/11 PHP
CakePHP框架Session设置方法分析
2017/02/23 PHP
PHP基于phpqrcode类生成二维码的方法详解
2018/03/14 PHP
引用外部js乱码问题分析及解决方案
2013/04/12 Javascript
jquery 提交值不为空的元素示例代码
2013/05/10 Javascript
容易造成JavaScript内存泄露几个方面
2014/09/04 Javascript
JavaScript设计模式之单件模式介绍
2014/12/28 Javascript
使用Jquery实现每日签到功能
2015/04/03 Javascript
JavaScript中的继承之类继承
2016/05/01 Javascript
JS实现页面载入时随机显示图片效果
2016/09/07 Javascript
浅谈jquery之on()绑定事件和off()解除绑定事件
2016/10/26 Javascript
jquery实现提示语淡入效果
2017/05/05 jQuery
基于JavaScript实现图片连播和联级菜单实例代码
2017/07/28 Javascript
原生JavaScript实现进度条
2021/02/19 Javascript
[58:12]Ti4第二日主赛事败者组 LGD vs iG 3
2014/07/21 DOTA
python del()函数用法
2013/03/24 Python
Python批量合并有合并单元格的Excel文件详解
2018/04/05 Python
django连接mysql配置方法总结(推荐)
2018/08/18 Python
Python将列表数据写入文件(txt, csv,excel)
2019/04/03 Python
python实战串口助手_解决8串口多个发送的问题
2019/06/12 Python
python爬虫 批量下载zabbix文档代码实例
2019/08/21 Python
canvas画布实现手写签名效果的示例代码
2019/04/23 HTML / CSS
Uber Eats台湾:寻找附近提供送餐服务的餐厅
2018/05/07 全球购物
如何减少垃圾回收让内存更加有效使用
2013/10/18 面试题
旷课检讨书大全
2014/01/21 职场文书
电气工程自动化求职信
2014/03/14 职场文书
初中作文评语大全
2014/04/23 职场文书
2014年校务公开工作总结
2014/12/18 职场文书
企业反腐倡廉心得体会
2015/08/15 职场文书
《青山不老》教学反思
2016/02/22 职场文书
nginx+lua单机上万并发的实现
2021/05/31 Servers
用PYTHON去计算88键钢琴的琴键频率和音高
2022/04/10 Python