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中JSON.parse的影响概述
Jul 17 Javascript
设置jsf的选择框h:selectOneMenu为不可编辑状态的方法
Jan 07 Javascript
jQuery鼠标事件汇总
Aug 30 Javascript
基于jQuery仿淘宝产品图片放大镜代码分享
Jun 23 Javascript
基于jQuery Bar Indicator 插件实现进度条展示效果
Sep 30 Javascript
JavaScript继承学习笔记【新手必看】
May 10 Javascript
jquery遍历json对象集合详解
May 18 Javascript
AngularJS中table表格基本操作示例
Oct 10 Javascript
小程序扫描普通链接二维码跳转小程序指定界面方法
May 07 Javascript
Node.js 的 GC 机制详解
Jun 03 Javascript
Vue项目中使用WebUploader实现文件上传的方法
Jul 21 Javascript
JS模拟实现京东快递单号查询
Nov 30 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
CPU步进是什么意思?i3-9100F B0步进和U0步进区别知识科普
2020/03/17 数码科技
typecho插件编写教程(六):调用接口
2015/05/28 PHP
简单介绍PHP非阻塞模式
2016/03/03 PHP
Zend Framework框架教程之Zend_Db_Table_Rowset用法实例分析
2016/03/21 PHP
通过ifame指向的页面高度调整iframe的高度
2006/10/05 Javascript
JavaScript移除数组元素减少长度的方法
2013/09/05 Javascript
js中各种类型的变量在if条件中是true还是false
2014/07/16 Javascript
JavaScript数据类型之基本类型和引用类型的值
2015/04/01 Javascript
js实现改进的仿蓝色论坛导航菜单效果代码
2015/09/06 Javascript
浅谈js中test()函数在正则中的使用
2016/08/19 Javascript
微信小程序 location API实例详解
2016/10/02 Javascript
利用BootStrap的Carousel.js实现轮播图动画效果
2016/12/21 Javascript
基于jQuery实现文字打印动态效果
2017/04/21 jQuery
vue.js实现数据动态响应 Vue.set的简单应用
2017/06/15 Javascript
让bootstrap的carousel支持滑动滚屏的实现代码
2017/11/27 Javascript
vue中如何使用ztree
2018/02/06 Javascript
JavaScript简单实现的仿微博留言功能示例
2019/01/17 Javascript
vue实现随机验证码功能的实例代码
2019/04/30 Javascript
通过实例解析js简易模块加载器
2019/06/17 Javascript
windows下wxPython开发环境安装与配置方法
2014/06/28 Python
python 计算文件的md5值实例
2017/01/13 Python
python爬虫爬取快手视频多线程下载功能
2018/02/28 Python
Python开发的十个小贴士和技巧及长常犯错误
2018/09/27 Python
python实现狄克斯特拉算法
2019/01/17 Python
Python和Java的语法对比分析语法简洁上python的确完美胜出
2019/05/10 Python
django settings.py 配置文件及介绍
2019/07/15 Python
Python编写一个验证码图片数据标注GUI程序附源码
2019/12/09 Python
世界首屈一指的钓鱼用品商店:TackleDirect
2016/07/26 全球购物
Vans(范斯)德国官网:美国南加州的原创极限运动潮牌
2017/05/02 全球购物
瑞士领先的网上超市:LeShop.ch
2018/11/14 全球购物
自荐信的禁忌和要点
2013/10/15 职场文书
考试保密承诺书
2014/08/30 职场文书
2014保险公司个人工作总结
2014/12/09 职场文书
关于运动会的宣传稿
2015/07/23 职场文书
恶魔之树最顶端的三颗果实 震震果实上榜,第一可以制造岩浆
2022/03/18 日漫
TypeScript 内置高级类型编程示例
2022/09/23 Javascript