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 防止刷新,后退,关闭
Aug 07 Javascript
jquery对象和DOM对象的区别介绍
Aug 09 Javascript
js string 转 int 注意的问题小结
Aug 15 Javascript
开发插件的两个方法jquery.fn.extend与jquery.extend
Nov 21 Javascript
js二维数组排序的简单示例代码
Jan 24 Javascript
javascript 数组操作详解
Jan 29 Javascript
JS实现的竖向折叠菜单代码
Oct 21 Javascript
Node.js连接Sql Server 2008及数据层封装详解
Aug 27 Javascript
详解在vue-cli项目下简单使用mockjs模拟数据
Oct 19 Javascript
Vue.js数字输入框组件使用方法详解
Oct 19 Javascript
JS如何在数组指定位置插入元素
Mar 10 Javascript
浅谈Vue的computed计算属性
Mar 21 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
获取远程文件大小的php函数
2010/01/11 PHP
理解php Hash函数,增强密码安全
2011/02/25 PHP
如何优雅的使用 laravel 的 validator验证方法
2018/11/11 PHP
Laravel5.1 框架路由基础详解
2020/01/04 PHP
JavaScript 错误处理与调试经验总结
2010/08/10 Javascript
解决jquery插件冲突的问题
2014/01/23 Javascript
jquery解析xml字符串示例分享
2014/03/25 Javascript
28个常用JavaScript方法集锦
2015/01/14 Javascript
jQuery封装的tab选项卡插件分享
2015/06/16 Javascript
高性能JavaScript DOM编程(1)
2015/08/11 Javascript
jQuery选择器总结之常用元素查找方法
2016/08/04 Javascript
Layui table 组件的使用之初始化加载数据、数据刷新表格、传参数
2017/09/11 Javascript
vue实现文章内容过长点击阅读全文功能的实例
2017/12/28 Javascript
Bootstrap table中toolbar新增条件查询及refresh参数使用方法
2018/05/18 Javascript
Vue两种组件类型:递归组件和动态组件的用法
2020/08/06 Javascript
夯基础之手撕javascript继承详解
2020/11/09 Javascript
js实现有趣的倒计时效果
2021/01/19 Javascript
Python通过解析网页实现看报程序的方法
2014/08/04 Python
使用Python进行目录的对比方法
2018/11/01 Python
Python学习笔记之图片人脸检测识别实例教程
2019/03/06 Python
Python实现查找字符串数组最长公共前缀示例
2019/03/27 Python
python实现图片九宫格分割
2021/03/07 Python
使用Python调取任意数字资产钱包余额功能
2019/08/15 Python
浅析使用Python搭建http服务器
2019/10/27 Python
关于Python3 lambda函数的深入浅出
2019/11/27 Python
Python3的unicode编码转换成中文的问题及解决方案
2019/12/10 Python
postman和python mock测试过程图解
2020/02/22 Python
雪花秀美国官方网站:韩国著名草本护肤化妆品品牌
2016/10/19 全球购物
印度首选时尚目的地:Reliance Trends
2018/01/17 全球购物
煤矿班组长的职责
2013/12/25 职场文书
外贸英语专业求职信范文
2013/12/25 职场文书
大学生职业生涯规划书范文
2014/01/14 职场文书
《猫》教学反思
2014/02/26 职场文书
法人委托书范本
2014/09/15 职场文书
教师个人事迹材料
2014/12/17 职场文书
文艺演出主持词
2015/07/01 职场文书