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 相关文章推荐
node在两个div之间移动,用ztree实现
Mar 06 Javascript
你必须知道的Javascript知识点之"单线程事件驱动"的使用
Apr 23 Javascript
jQuery Ajax异步处理Json数据详解
Nov 05 Javascript
jquery弹出层类代码分享
Dec 27 Javascript
Javascript实现带关闭按钮的网页漂浮广告代码
Jan 12 Javascript
html dom节点操作(获取/修改/添加或删除)
Jan 23 Javascript
使用JQ来编写最基本的淡入淡出效果附演示动画
Oct 31 Javascript
jquery实现手机号码选号的方法
Jul 31 Javascript
原生js编写2048小游戏
Mar 17 Javascript
详解vue-cli快速构建项目以及引入bootstrap、jq
May 26 Javascript
微信小程序云开发实现云数据库读写权限
May 17 Javascript
微信小程序实现批量倒计时功能
Nov 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来处理多个提交任务
2006/10/09 PHP
xajax写的留言本
2006/11/25 PHP
PHP文件缓存类实现代码
2015/10/26 PHP
php unlink()函数使用教程
2018/07/12 PHP
用脚本调用样式的几种方法
2006/12/09 Javascript
一些有用的JavaScript和jQuery的片段分享
2011/08/23 Javascript
firefox下input type="file"的size是多大
2011/10/24 Javascript
jquery清空textarea等输入框实现代码
2013/04/22 Javascript
js实现头像图片切割缩放及无刷新上传图片的方法
2015/07/17 Javascript
微信js-sdk界面操作接口用法示例
2016/10/12 Javascript
Vue声明式渲染详解
2017/05/17 Javascript
Vue框架中正确引入JS库的方法介绍
2017/07/30 Javascript
小程序开发基础之view视图容器
2018/08/21 Javascript
对TypeScript库进行单元测试的方法
2019/07/18 Javascript
Element MessageBox弹框的具体使用
2020/07/27 Javascript
vue实现前端列表多条件筛选
2020/10/26 Javascript
[02:51]2014DOTA2国际邀请赛 IG战队官方纪录片
2014/07/21 DOTA
python实现上传样本到virustotal并查询扫描信息的方法
2014/10/05 Python
Python读写Excel文件方法介绍
2014/11/22 Python
Python利用ansible分发处理任务
2015/08/04 Python
如何使用Python进行PDF图片识别OCR
2021/01/22 Python
纯CSS3实现带动画效果导航菜单无需js
2013/09/27 HTML / CSS
澳洲小众品牌的集合网站:BNKR
2018/02/23 全球购物
The Beach People美国:澳洲海滨奢华品牌
2018/07/05 全球购物
《一株紫丁香》教学反思
2014/02/19 职场文书
幼儿园教师师德师风演讲稿:我自豪我是一名幼师
2014/09/10 职场文书
县政府领导班子四风问题对照检查材料思想汇报
2014/09/26 职场文书
领导干部作风建设自查报告
2014/10/23 职场文书
爱心募捐通知范文
2015/04/27 职场文书
2015年党总支工作总结
2015/05/25 职场文书
红领巾广播站广播稿
2015/08/19 职场文书
《纸船和风筝》教学反思
2016/02/18 职场文书
《鲸》教学反思
2016/02/23 职场文书
告诉你创业计划书的8个实用技巧
2019/07/12 职场文书
MySQL Shell import_table数据导入的实现
2021/08/07 MySQL
SpringBoot+Vue+JWT的前后端分离登录认证详细步骤
2021/09/25 Java/Android