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 相关文章推荐
使用jscript实现二进制读写脚本代码
Jun 09 Javascript
WEB页子窗口(showModalDialog和showModelessDialog)使用说明
Oct 25 Javascript
JavaScript 原型链学习总结
Oct 29 Javascript
通过jQuery源码学习javascript(三)
Dec 27 Javascript
关于eval 与new Function 到底该选哪个?
Apr 17 Javascript
javascript中直接写php代码的方法
Jul 31 Javascript
jQuery实现的一个tab切换效果内部还嵌有切换
Aug 10 Javascript
数据结构中的各种排序方法小结(JS实现)
Jul 23 Javascript
jQuery 的 ready()的纯js替代方法
Nov 20 Javascript
Node.js+Express+MySql实现用户登录注册功能
Jul 10 Javascript
在小程序中集成redux/immutable/thunk第三方库的方法
Aug 12 Javascript
Angular使用ControlValueAccessor创建自定义表单控件
Mar 08 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
浅谈web上存漏洞及原理分析、防范方法(安全文件上存方法)
2013/06/29 PHP
Ajax+PHP快速上手及简单应用说明
2013/07/24 PHP
thinkphp项目如何自定义微信分享描述内容
2017/02/20 PHP
详解PHP中的序列化、反序列化操作
2017/03/21 PHP
PHP如何获取Cookie并实现模拟登录
2020/07/16 PHP
转自Jquery官方 jQuery1.1.3发布,速度提升800%,体积保持20K
2007/08/19 Javascript
JavaScript 对象链式操作测试代码
2010/04/25 Javascript
用Javascript评估用户输入密码的强度(Knockout版)
2011/11/30 Javascript
CSS鼠标响应事件经过、移动、点击示例介绍
2013/09/04 Javascript
ZeroClipboard插件实现多浏览器复制功能(支持firefox、chrome、ie6)
2014/08/30 Javascript
jQuery实现仿QQ头像闪烁效果的文字闪动提示代码
2015/11/03 Javascript
基于Jquery和html5实现炫酷的3D焦点图动画
2016/03/02 Javascript
原生js实现addclass,removeclass,toggleclasss实例
2016/11/24 Javascript
JavaScript交换两个变量值的七种解决方案
2016/12/01 Javascript
微信小程序基于本地缓存实现点赞功能的方法
2017/12/18 Javascript
vue中实现图片和文件上传的示例代码
2018/03/16 Javascript
javascript中toFixed()四舍五入使用方法详解
2018/09/28 Javascript
JavaScript ES6常用基础知识总结
2019/02/09 Javascript
node 解析图片二维码的内容代码实例
2019/09/11 Javascript
javascript单张多张图无缝滚动实例代码
2020/05/10 Javascript
vue.js实现简单购物车功能
2020/05/30 Javascript
Openlayers实现扩散的动态点(水纹效果)
2020/08/17 Javascript
[46:49]完美世界DOTA2联赛PWL S3 access vs Rebirth 第二场 12.19
2020/12/24 DOTA
Python获取暗黑破坏神3战网前1000命位玩家的英雄技能统计
2016/07/04 Python
python url 参数修改方法
2018/12/26 Python
python内存监控工具memory_profiler和guppy的用法详解
2019/07/29 Python
Python中的Cookie模块如何使用
2020/06/04 Python
python与idea的集成的实现
2020/11/20 Python
canvas需要在标签里直接定义宽高
2014/12/17 HTML / CSS
REN Clean Skincare官网:英国本土有机护肤品牌
2019/02/23 全球购物
市场营销毕业生自荐信范文
2014/04/01 职场文书
优秀安全员事迹材料
2014/05/11 职场文书
护林员个人总结
2015/03/04 职场文书
看雷锋电影观后感
2015/06/10 职场文书
python如何在word中存储本地图片
2021/04/07 Python
Python Pandas读取Excel日期数据的异常处理方法
2022/02/28 Python