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 document.execCommand() 常用解析
Dec 14 Javascript
Javascript异步表单提交,图片上传,兼容异步模拟ajax技术
May 10 Javascript
初窥JQuery(一)jquery选择符 必备知识点
Nov 25 Javascript
jQuery EasyUI API 中文文档 - DataGrid数据表格
Nov 17 Javascript
网页前端优化之滚动延时加载图片示例
Jul 13 Javascript
基于jQuery的判断iPad、iPhone、Android是横屏还是竖屏的代码
May 11 Javascript
node.js适合游戏后台开发吗?
Sep 03 Javascript
jQuery和CSS仿京东仿淘宝列表导航菜单
Jan 04 Javascript
整理关于Bootstrap警示框的慕课笔记
Mar 29 Javascript
微信小程序实现滴滴导航tab切换效果
Jul 24 Javascript
动态内存分配导致影响Javascript性能的问题
Dec 18 Javascript
Vue调用后端java接口的实例代码
Oct 28 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
PHP版网站缓存加快打开速度的方法分享
2012/06/03 PHP
WordPres对前端页面调试时的两个PHP函数使用小技巧
2015/12/22 PHP
Jquery AutoComplete自动完成 的使用方法实例
2010/03/19 Javascript
javascript动画浅析
2012/08/30 Javascript
jquery教程限制文本框只能输入数字和小数点示例分享
2014/01/13 Javascript
使用jQuery实现的掷色子游戏动画效果
2014/03/14 Javascript
js获取时间并实现字符串和时间戳之间的转换
2015/01/05 Javascript
vue2实现移动端上传、预览、压缩图片解决拍照旋转问题
2017/04/13 Javascript
浅谈express 中间件机制及实现原理
2017/08/31 Javascript
详解Nodejs 通过 fs.createWriteStream 保存文件
2017/10/10 NodeJs
AntV F2和vue-cli构建移动端可视化视图过程详解
2019/10/08 Javascript
JS实现联想、自动补齐国家或地区名称的功能
2020/07/07 Javascript
JavaScript实现商品评价五星好评
2020/11/30 Javascript
[01:36:57]【09DOTA2第一视角】小骷髅
2014/04/16 DOTA
Python使用Django实现博客系统完整版
2020/09/29 Python
Django restframework 源码分析之认证详解
2019/02/22 Python
Python基础学习之基本数据结构详解【数字、字符串、列表、元组、集合、字典】
2019/06/18 Python
pandas 如何分割字符的实现方法
2019/07/29 Python
python不使用for计算两组、多个矩形两两间的iou方式
2020/01/18 Python
让IE6支持css3,让 IE7、IE8 都支持CSS3
2011/10/09 HTML / CSS
豆腐の盛田屋官网:日本自然派的豆乳面膜、肥皂、化妆水、乳液等
2016/10/08 全球购物
Kathmandu美国网站:新西兰户外运动品牌
2019/03/23 全球购物
大学生就业自荐信
2013/10/26 职场文书
中国梦的演讲稿
2014/01/08 职场文书
中医临床专业自我鉴定范文
2014/01/15 职场文书
《冬阳童年骆驼队》教学反思
2014/04/15 职场文书
《蜗牛的奖杯》教后反思
2014/04/24 职场文书
房地产端午节活动方案
2014/08/24 职场文书
辞职信格式模板
2015/02/27 职场文书
计生个人工作总结
2015/02/28 职场文书
重阳节主题班会
2015/08/17 职场文书
2016年庆祝六一儿童节活动总结
2016/04/06 职场文书
2019年大学生暑期社会实践调查报告模板
2019/11/07 职场文书
python程序的组织结构详解
2021/12/06 Python
Python可变与不可变数据和深拷贝与浅拷贝
2022/04/06 Python