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 相关文章推荐
禁止IE用右键的JS代码
Dec 30 Javascript
JS使用ajax从xml文件动态获取数据显示的方法
Mar 24 Javascript
javascript中关于&& 和 || 表达式的小技巧分享
Apr 10 Javascript
微信小程序实战之仿android fragment可滑动底部导航栏(4)
Apr 16 Javascript
checkbox:click事件触发span元素内容改变的方法
Sep 11 Javascript
vue-router配合ElementUI实现导航的实例
Feb 11 Javascript
解决vue-cli3 使用子目录部署问题
Jul 19 Javascript
Vue-CLI 3.X 部署项目至生产服务器的方法
Mar 22 Javascript
Vue注册组件命名时不能用大写的原因浅析
Apr 25 Javascript
koa+mongoose实现简单增删改查接口的示例代码
May 13 Javascript
layui 富文本图片上传接口与普通按钮 文件上传接口的例子
Sep 23 Javascript
HTML+VUE分页实现炫酷物联网大屏功能
May 27 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图片缩放实现方法
2014/02/20 PHP
CentOS6.5 编译安装lnmp环境
2014/12/21 PHP
php格式化金额函数分享
2015/02/02 PHP
php处理抢购类功能的高并发请求
2018/02/08 PHP
Javascript 布尔型分析
2008/12/22 Javascript
jquery实现商品拖动选择效果代码(自写)
2013/05/28 Javascript
Js nodeType 属性全面解析
2013/11/14 Javascript
jquery五角星评分插件示例分享
2014/02/21 Javascript
使用jquery解析XML示例代码
2014/09/05 Javascript
js显示文本框提示文字的方法
2015/05/07 Javascript
js判断手机端(Android手机还是iPhone手机)
2015/07/22 Javascript
PhantomJS快速入门教程(服务器端的 JavaScript API 的 WebKit)
2015/08/06 Javascript
全面解析Bootstrap手风琴效果
2020/04/17 Javascript
JavaScript 函数的执行过程
2016/05/09 Javascript
解析如何利用iframe标签以及js制作时钟
2016/12/08 Javascript
JS 在数组指定位置插入/删除数据的方法
2017/01/12 Javascript
JavaScript实现鼠标滚轮控制页面图片切换功能示例
2017/10/14 Javascript
Vue实现移动端拖拽交换位置
2020/07/29 Javascript
Python使用函数默认值实现函数静态变量的方法
2014/08/18 Python
python中的闭包用法实例详解
2015/05/05 Python
Python随手笔记第一篇(2)之初识列表和元组
2016/01/23 Python
Python验证文件是否可读写代码分享
2017/12/11 Python
PHP实现发送和接收JSON请求
2018/06/07 Python
使用Python脚本从文件读取数据代码实例
2020/01/19 Python
Django 解决开发自定义抛出异常的问题
2020/05/21 Python
Python爬虫过程解析之多线程获取小米应用商店数据
2020/11/14 Python
世界上最大的折扣香水店:FragranceNet.com
2016/10/26 全球购物
法院先进个人事迹材料
2014/05/04 职场文书
机械工程学院大学生求职信
2014/05/25 职场文书
水利水电专业自荐信
2014/07/08 职场文书
银行会计主管岗位职责
2014/10/01 职场文书
2015年安全生产目标责任书
2015/01/29 职场文书
《作风建设永远在路上》心得体会
2016/01/21 职场文书
Python常用配置文件ini、json、yaml读写总结
2021/07/09 Python
Java练习之潜艇小游戏的实现
2022/03/16 Java/Android
一文搞懂Redis中String数据类型
2022/04/03 Redis