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 相关文章推荐
使用JQUERY Tabs插件宿主IFRAMES
Jan 01 Javascript
js href的用法
May 13 Javascript
基于jquery实现省市联动效果
Nov 23 Javascript
KnockoutJs快速入门教程
May 16 Javascript
详解webpack介绍&安装&常用命令
Jun 29 Javascript
详解EasyUi控件中的Datagrid
Aug 23 Javascript
vue webpack实用技巧总结
Apr 24 Javascript
vue实现引入本地json的方法分析
Jul 12 Javascript
深入剖析JavaScript instanceof 运算符
Jun 14 Javascript
Vue使用路由钩子拦截器beforeEach和afterEach监听路由
Nov 16 Javascript
用vue设计一个日历表
Dec 03 Vue.js
js实现鼠标拖曳效果
Dec 30 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生成xml简单实例代码
2009/12/16 PHP
php中用date函数获取当前时间有误的解决办法
2013/08/02 PHP
php发送post请求函数分享
2014/03/06 PHP
jQuery之选择组件的深入解析
2013/06/19 Javascript
浅谈NodeJS中require路径问题
2015/05/07 NodeJs
javascript省市区三级联动下拉框菜单实例演示
2015/11/29 Javascript
js获取时间精确到秒(年月日)
2016/03/16 Javascript
Javascript生成带参数的二维码示例
2016/10/10 Javascript
Vue.js组件tree实现无限级树形菜单
2016/12/02 Javascript
适用于手机端的jQuery图片滑块动画
2016/12/09 Javascript
微信小程序 登陆流程详细介绍
2017/01/17 Javascript
jQuery的三种bind/One/Live/On事件绑定使用方法
2017/02/23 Javascript
vue使用drag与drop实现拖拽的示例代码
2017/09/07 Javascript
mescroll.js上拉加载下拉刷新组件使用详解
2017/11/13 Javascript
解决koa2 ctx.render is not a function报错问题
2018/08/07 Javascript
layui 根据后台数据动态创建下拉框并同时默认选中的实例
2019/09/02 Javascript
vue实现表格过滤功能
2019/09/27 Javascript
python读取Android permission文件
2013/11/01 Python
零基础写python爬虫之urllib2使用指南
2014/11/05 Python
总结Python中逻辑运算符的使用
2015/05/13 Python
Python格式化日期时间操作示例
2018/06/28 Python
python调用百度REST API实现语音识别
2018/08/30 Python
在scrapy中使用phantomJS实现异步爬取的方法
2018/12/17 Python
Python爬取破解无线网络wifi密码过程解析
2019/09/17 Python
python自动结束mysql慢查询会话的实例代码
2019/10/27 Python
Python 找出出现次数超过数组长度一半的元素实例
2020/05/11 Python
Python基于pandas绘制散点图矩阵代码实例
2020/06/04 Python
No module named ‘win32gui‘ 的解决方法(踩坑之旅)
2021/02/18 Python
英文版餐饮运营管理求职信
2013/11/06 职场文书
自荐书模板
2013/12/19 职场文书
政治表现评语
2014/05/04 职场文书
企业法人代表授权委托书
2014/10/02 职场文书
群众路线查摆问题整改措施
2014/10/10 职场文书
学期个人工作总结
2015/02/13 职场文书
优秀共产党员主要事迹材料
2015/11/05 职场文书
Centos7 Shell编程之正则表达式、文本处理工具详解
2022/08/05 Servers