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 相关文章推荐
一个对于Array的简单扩展
Oct 03 Javascript
js中判断Object、Array、Function等引用类型对象是否相等
Aug 29 Javascript
JavaScript window.document的属性、方法和事件小结
Oct 24 Javascript
Javascript模块化编程(三)require.js的用法及功能介绍
Jan 17 Javascript
jQuery实现MSN中文网滑动Tab菜单效果代码
Sep 09 Javascript
JavaScript生成验证码并实现验证功能
Sep 24 Javascript
图片懒加载插件实例分享(含解析)
Jan 09 Javascript
JS正则表达式验证密码格式的集中情况总结
Feb 23 Javascript
详解在express站点中使用ejs模板引擎
Sep 21 Javascript
Element中的Cascader(级联列表)动态加载省\市\区数据的方法
Mar 27 Javascript
ES6的异步操作之promise用法和async函数的具体使用
Dec 06 Javascript
vue实现动态给id赋值,点击事件获取当前点击的元素的id操作
Nov 09 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笔记之:数据类型与常量的使用分析
2013/05/14 PHP
php中的mongodb select常用操作代码示例
2014/09/06 PHP
php+jquery+html实现点击不刷新加载更多的实例代码
2016/08/12 PHP
用JavaScript实现UrlEncode和UrlDecode的脚本代码
2008/07/23 Javascript
javascript提取URL的搜索字符串中的参数(自定义函数实现)
2013/01/22 Javascript
String.prototype实现的一些javascript函数介绍
2013/11/22 Javascript
Jjcarousellite 实现图片列表滚动的简单实例
2013/11/29 Javascript
jquery如何获取复选框的值
2013/12/12 Javascript
Jquery下EasyUI组件中的DataGrid结果集清空方法
2014/01/06 Javascript
IE 下Enter提交表单存在重复提交问题的解决方法
2014/05/04 Javascript
jquery动态调整div大小使其宽度始终为浏览器宽度
2014/06/06 Javascript
一个简单的jQuery计算器实现了连续计算功能
2014/07/21 Javascript
js实现鼠标触发图片抖动效果的方法
2015/02/27 Javascript
layui选项卡效果实现代码
2017/05/19 Javascript
node跨域转发 express+http-proxy-middleware的使用
2018/05/31 Javascript
vue-week-picker实现支持按周切换的日历
2019/06/26 Javascript
jQuery 隐藏/显示效果函数用法实例分析
2020/05/20 jQuery
element中table高度自适应的实现
2020/10/21 Javascript
[01:01:36]Optic vs paiN 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
[01:09:23]KG vs TNC 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
Python基于scrapy采集数据时使用代理服务器的方法
2015/04/16 Python
详解django中使用定时任务的方法
2018/09/27 Python
Python 数据库操作 SQLAlchemy的示例代码
2019/02/18 Python
django模板结构优化的方法
2019/02/28 Python
Spartoo比利时:欧洲时尚购物网站
2017/12/06 全球购物
Sephora丝芙兰马来西亚官方网站:国际化妆品购物
2018/03/15 全球购物
意大利在线购买隐形眼镜网站:VisionDirect.it
2019/03/18 全球购物
黄金酒广告词
2014/03/21 职场文书
《望庐山瀑布》教学反思
2014/04/22 职场文书
信用卡工资证明格式
2014/09/13 职场文书
雨花台导游词
2015/02/06 职场文书
2015年秋季学校开学标语
2015/07/16 职场文书
2021-4-3课程——SQL Server查询【2】
2021/04/05 SQL Server
Python常遇到的错误和异常
2021/11/02 Python
Nginx stream 配置代理(Nginx TCP/UDP 负载均衡)
2021/11/17 Servers
【海涛解说】暗牧也疯狂,牛蛙成配角
2022/04/01 DOTA