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 相关文章推荐
extjs 学习笔记(一) 一些基础知识
Oct 13 Javascript
解决jquery的.animate()函数在IE6下的问题
Dec 03 Javascript
JavaScript 基本概念
Jan 20 Javascript
JavaScript验证Email(3种方法)
Sep 21 Javascript
JS实现为排序好的字符串找出重复行的方法
Mar 02 Javascript
浅谈js里面的InttoStr和StrtoInt
Jun 14 Javascript
基于javascript实现数字英文验证码
Jan 25 Javascript
JavaScript数组_动力节点Java学院整理
Jun 26 Javascript
详解Node.js模板引擎Jade入门
Jan 19 Javascript
ElementUI之Message功能拓展详解
Oct 18 Javascript
微信小程序wx.request的简单封装
Nov 13 Javascript
JS 数组基本用法入门示例解析
Jan 16 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
建立动态的WML站点(三)
2006/10/09 PHP
PHP中获取变量的变量名的一段代码的bug分析
2011/07/07 PHP
PHP图像处理类库及演示分享
2015/05/17 PHP
PHP数组中头部和尾部添加元素的方法(array_unshift,array_push)
2017/04/10 PHP
关于laravel 子查询 & join的使用
2019/10/16 PHP
List Installed Hot Fixes
2007/06/12 Javascript
为JavaScript类型增加方法的实现代码(增加功能)
2011/12/29 Javascript
JavaScript中setInterval的用法总结
2013/11/20 Javascript
jQuery实现鼠标经过图片预览大图效果
2014/04/10 Javascript
浅谈JSON.parse()和JSON.stringify()
2015/07/14 Javascript
AngularJS+Node.js实现在线聊天室
2015/08/28 Javascript
简单谈谈JS数组中的indexOf方法
2016/10/13 Javascript
jQuery在header中设置请求信息的方法
2017/03/06 Javascript
简单实现JavaScript弹幕效果
2020/08/27 Javascript
vue 文件目录结构详解
2017/11/24 Javascript
详解基于vue的服务端渲染框架NUXT
2018/06/20 Javascript
vue 使用html2canvas将DOM转化为图片的方法
2018/09/11 Javascript
微信小程序如何使用canvas二维码保存至手机相册
2019/07/15 Javascript
[01:28:31]《加油DOTA》真人秀 第五期
2014/09/01 DOTA
Python牛刀小试密码爆破
2011/02/03 Python
深入理解python try异常处理机制
2016/06/01 Python
python中字符串类型json操作的注意事项
2017/05/02 Python
python爬虫获取京东手机图片的图文教程
2017/12/29 Python
python中dir()与__dict__属性的区别浅析
2018/12/10 Python
详解Numpy中的数组拼接、合并操作(concatenate, append, stack, hstack, vstack, r_, c_等)
2019/05/27 Python
Python脚本去除文件的只读性操作
2020/03/05 Python
python 用opencv实现图像修复和图像金字塔
2020/11/27 Python
详解css3使用transform出现字体模糊的解决办法
2020/10/16 HTML / CSS
浅谈three.js中的needsUpdate的应用
2012/11/12 HTML / CSS
奥地利汽车配件店:Pkwteile.at
2017/03/10 全球购物
NOTINO英国:在线购买美容和香水
2020/02/25 全球购物
大学生求职自我评价
2014/01/16 职场文书
煤矿安全生产责任书
2014/04/15 职场文书
踏青活动策划方案
2014/08/19 职场文书
Python&Matlab实现樱花的绘制
2022/04/07 Python
nginx之queue的具体使用
2022/06/28 Servers