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 源码分析笔记(3) Deferred机制
Jun 19 Javascript
JQuery自动触发事件的方法
Jun 13 Javascript
bootstrap读书笔记之CSS组件(上)
Oct 17 Javascript
Angularjs 设置全局变量的方法总结
Oct 20 Javascript
详解vue + vuex + directives实现权限按钮的思路
Oct 24 Javascript
jQuery实现图片简单轮播功能示例
Aug 13 jQuery
详解如何在webpack中做预渲染降低首屏空白时间
Aug 22 Javascript
JS实现的获取银行卡号归属地及银行卡类型操作示例
Jan 08 Javascript
详解vue引入子组件方法
Feb 12 Javascript
Vue项目环境搭建详细总结
Sep 26 Javascript
解决vue打包 npm run build-test突然不动了的问题
Nov 13 Javascript
vue打开新窗口并实现传参的图文实例
Mar 04 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
重置版宣传动画
2020/04/09 魔兽争霸
php设计模式 Composite (组合模式)
2011/06/26 PHP
[原创]ThinkPHP中SHOW_RUN_TIME不能正常显示运行时间的解决方法
2015/10/10 PHP
WordPress中用于获取文章信息以及分类链接的函数用法
2015/12/18 PHP
TP3.2框架分页相关实现方法分析
2020/06/03 PHP
一款js和css代码压缩工具[附JAVA环境配置方法]
2010/04/16 Javascript
javascript中类的定义及其方式(《javascript高级程序设计》学习笔记)
2011/07/04 Javascript
jQuery对象数据缓存Cache原理及jQuery.data方法区别介绍
2013/04/07 Javascript
jQuery事件之键盘事件(ctrl+Enter回车键提交表单等)
2014/05/11 Javascript
jQuery手机浏览器中拖拽动作的艰难性分析
2015/02/04 Javascript
jquery简单的弹出层浮动层代码
2015/04/27 Javascript
原生js模拟淘宝购物车项目实战
2015/11/18 Javascript
微信小程序 Storage API实例详解
2016/10/02 Javascript
JQuery实现图片轮播效果
2017/05/08 jQuery
js实现图片轮播效果学习笔记
2017/07/26 Javascript
JavaScript中Object基础内部方法图
2018/02/05 Javascript
使用Vuex实现一个笔记应用的方法
2018/03/13 Javascript
微信小程序中时间戳和日期的相互转换问题
2018/07/09 Javascript
详解angular分页插件tm.pagination二次触发问题解决方案
2018/07/20 Javascript
js控制随机数生成概率代码实例
2019/03/21 Javascript
JavaScript逻辑运算符相关总结
2020/09/04 Javascript
Django中实现点击图片链接强制直接下载的方法
2015/05/14 Python
Linux下多个Python版本安装教程
2018/08/15 Python
记一次python 内存泄漏问题及解决过程
2018/11/29 Python
python命令行工具Click快速掌握
2019/07/04 Python
Python 使用元类type创建类对象常见应用详解
2019/10/17 Python
纯CSS3实现图片无间断轮播效果
2016/08/25 HTML / CSS
手工制作的意大利太阳镜和光学元件:Illesteva
2019/01/19 全球购物
下面代码从性能上考虑,有什么问题
2015/04/03 面试题
个人求职信范例
2014/01/29 职场文书
消防应急演练方案
2014/02/12 职场文书
民族学专业大学生职业规划范文:清晰未来的构想
2014/09/20 职场文书
单位工资证明范本
2015/06/12 职场文书
2015七夕情人节宣传语
2015/07/14 职场文书
小学数学新课改心得体会
2016/01/22 职场文书
React-vscode使用jsx语法的问题及解决方法
2021/06/21 Javascript