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 NaN和Infinity特殊值 [译]
Sep 20 Javascript
JavaScript把数组作为堆栈使用的方法
Mar 20 Javascript
JavaScript中window.open用法实例详解
Apr 15 Javascript
JS实现选择TextArea内文本的方法
Aug 03 Javascript
javascript实现鼠标移到Image上方时显示文字效果的方法
Aug 07 Javascript
Javascript 实现简单计算器实例代码
Oct 23 Javascript
微信小程序 网络API 上传、下载详解
Nov 09 Javascript
详解Jquery Easyui的验证扩展
Jan 09 Javascript
一篇文章搞定JavaScript类型转换(面试常见)
Jan 21 Javascript
js判断手机系统是android还是ios
Mar 07 Javascript
微信小程序点击view动态添加样式过程解析
Jan 21 Javascript
Vue图片裁剪组件实例代码
Jul 02 Vue.js
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
投票管理程序
2006/10/09 PHP
PHP中ADODB类详解
2008/03/25 PHP
PHP读取大文件的类SplFileObject使用介绍
2014/04/09 PHP
php比较两个字符串长度的方法
2015/07/13 PHP
微信支付开发动态链接Native支付
2016/07/12 PHP
php操作mongodb封装类与用法实例
2018/09/01 PHP
php的扩展写法总结
2019/05/14 PHP
javascript 时间比较实现代码
2009/10/28 Javascript
可在线编辑网页文字效果代码(单击)
2013/03/02 Javascript
javascript判断机器是否联网的2种方法
2013/08/09 Javascript
JavaScript日期类型的一些用法介绍
2015/03/02 Javascript
JS中JSON对象和String之间的互转及处理技巧
2016/04/06 Javascript
js验证框架实现代码分享
2016/05/18 Javascript
jQuery实现导航高亮的方法【附demo源码下载】
2016/11/09 Javascript
Vuejs 组件——props数据传递的实例代码
2017/03/07 Javascript
nodejs开发——express路由与中间件
2017/03/24 NodeJs
vue项目webpack中Npm传递参数配置不同域名接口
2018/06/15 Javascript
原生js添加一个或多个类名的方法分析
2019/07/30 Javascript
jQuery--遍历操作实例小结【后代、同胞及过滤】
2020/05/22 jQuery
[45:25]完美世界DOTA2联赛循环赛 PXG vs IO 第一场 11.06
2020/11/09 DOTA
10 行 Python 代码教你自动发送短信(不想回复工作邮件妙招)
2018/10/11 Python
理想高通滤波实现Python opencv示例
2019/01/30 Python
nginx+uwsgi+django环境搭建的方法步骤
2019/11/25 Python
一款纯css3实现的鼠标经过按钮特效教程
2014/11/09 HTML / CSS
柏林通行证:Berlin Pass
2018/04/11 全球购物
美国受信赖的教育产品供应商:Nest Learning
2018/06/14 全球购物
如何开启linux的ssh服务
2015/02/14 面试题
销售类个人求职信范文
2013/09/25 职场文书
男方父母证婚词
2014/01/12 职场文书
《孔子拜师》教学反思
2014/02/24 职场文书
小学语文国培感言
2014/03/04 职场文书
购房委托书范本
2014/09/18 职场文书
不遵守课堂纪律的检讨书
2014/09/24 职场文书
英文邀请函
2015/02/02 职场文书
导游词之徐州云龙湖
2019/11/19 职场文书
SpringBoot整合MongoDB的实现步骤
2021/06/23 MongoDB