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 相关文章推荐
用倒置滤镜把div倒置,再把table倒置。
Jul 31 Javascript
js中通过split函数分割字符串成数组小例子
Sep 21 Javascript
js加载之使用DOM方法动态加载Javascript文件
Nov 08 Javascript
如何用javascript计算文本框还能输入多少个字符
Jul 29 Javascript
jQuery实现选中弹出窗口选择框内容后赋值给文本框的方法
Nov 23 Javascript
Javascript缓存API
Jun 14 Javascript
xmlplus组件设计系列之网格(DataGrid)(10)
May 05 Javascript
Vue实现web分页组件详解
Nov 28 Javascript
JS使用tween.js动画库实现轮播图并且有切换功能
Jul 17 Javascript
微信小程序实现搜索功能并跳转搜索结果页面
May 18 Javascript
layui实现checkbox的目录树tree的例子
Sep 12 Javascript
微信小程序云开发获取文件夹下所有文件(推荐)
Nov 14 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/06/09 PHP
php中如何判断一个网页请求是ajax请求还是普通请求
2013/08/10 PHP
php通过session防url攻击方法
2014/12/10 PHP
php 5.4 全新的代码复用Trait详解
2017/01/05 PHP
thinkPHP5.0框架自动加载机制分析
2017/03/18 PHP
PHP二维数组实现去除重复项的方法【保留各个键值】
2017/12/21 PHP
重定向实现代码
2006/11/20 Javascript
关于jQuery参考实例2.0 用jQuery选择元素
2013/04/07 Javascript
自定义ExtJS控件之下拉树和下拉表格附源码
2013/10/15 Javascript
js实现身份证号码验证的简单实例
2014/02/19 Javascript
jquery form表单序列化为对象的示例代码
2014/03/05 Javascript
js读取json的两种常用方法示例介绍
2014/10/19 Javascript
jQuery设置Cookie及删除Cookie实例分析
2016/04/15 Javascript
DWR3 访问WEB元素的两种方法实例详解
2017/01/03 Javascript
jquery编写日期选择器
2017/03/16 Javascript
微信小程序 密码输入(源码下载)
2017/06/27 Javascript
nodejs npm错误Error:UNKNOWN:unknown error,mkdir 'D:\Develop\nodejs\node_global'at Error
2019/03/02 NodeJs
微信小程序bindtap事件与冒泡阻止详解
2019/08/08 Javascript
通过数据库对Django进行删除字段和删除模型的操作
2015/07/21 Python
解决Python一行输出不显示的问题
2018/12/03 Python
通过shell+python实现企业微信预警
2019/03/07 Python
django框架forms组件用法实例详解
2019/12/10 Python
python实现简单学生信息管理系统
2020/04/09 Python
Python 如何创建一个线程池
2020/07/28 Python
如何把python项目部署到linux服务器
2020/08/26 Python
CSS3使用多列制作瀑布流
2016/05/10 HTML / CSS
非洲NO.1网上商店:Jumia肯尼亚
2016/08/18 全球购物
中国海淘族值得信赖的海淘返利网站:55海淘
2017/01/16 全球购物
英国电子产品购物网站:Tech in the basket
2019/11/08 全球购物
三八红旗手先进事迹材料
2014/05/13 职场文书
中学生的1000字检讨书
2014/10/11 职场文书
中标通知书范本
2015/04/17 职场文书
幼儿园园长六一致辞
2015/07/31 职场文书
Python中threading库实现线程锁与释放锁
2021/05/17 Python
Mysql查询时间区间日期列表,不会由于数据表数据影响
2022/04/19 MySQL
Python写情书? 10行代码展示如何把情书写在她的照片里
2022/04/21 Python