[转]ionic 通过PouchDB + SQLite来实现app的本地存储(Local Storage)
本文转自:http://www.cnblogs.com/ailen226/p/ionic.html
首先声明,本教程参考国外网站(http://gonehybrid.com/how-to-use-pouchdb-sqlite-for-local-storage-in-your-ionic-app/)
代码书写格式上不一样!
1. ionic是跨平台app开发的工具(Cordova)的一个框架!
2.PouchDB是操作SQLite数据库的javascript库(跟mongoose操作mongodb一样)!
3.SQLite是一种轻量级的嵌入式数据库(数据库不需要你安装的,手机系统自带,你需要安装的就是SQLite插件)!
第一步 :安装Cordova 和 ionic 命令如下:
npm install -g cordova ionic
第二步:创建工程 命令如下:
ionic start birthday
第三步:安装SQLite插件和pouchdb.js库,并将pouchdb引入到index.html中。
1
2
3
4
5
6
7
8
|
//安装SQLite插件 cordova plugin add io.litehelpers.cordova.sqlitestorage //安装pouchdb库 bower install pouchdb //在index.html引入pouchdb <script src= "lib/pouchdb/dist/pouchdb.min.js" ></script> |
第四步:环境基本OK了!接下来开始写代码了!
首先配置service你也可以用factory,我用的service。在www/js/services.js 末尾去掉分号,添加一下代码。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
.service( 'birthday' , function () { var _db; //dateFix 函数是用来处理SQLite读出的数据的,因为SQLite的存储的数据结构层次优点不同, //感兴趣的同学可以把数据打印出来研究下 function dateFix (result) { var data = [];<br> result.forEach( function (each) {<br> data.push(each.doc);<br> }); return data }; return { initDB: function () { _db = new PouchDB( 'birthday' , {adapter: 'websql' }); }, getAllBirthday: function (callback) { _db.allDocs({include_docs: true }).then( function (result) { callback(dateFix(result.rows)); }) }, addBirthday: function (birthday) { _db.post(birthday); }, removeBirthday: function (birthday) { _db.remove(birthday); } } }); |
第五步:项目启动时我们要初始化数据库,所以我们在.run()方法里初始化数据库;
有颜色的地方就是加的代码,第一处时注入我们之前定义的service('birthday')。现在注入进去。
第二处表示$ionicPlatform准备好之后初始化数据库
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
.run( function ($ionicPlatform<span style= "background-color: rgb(255, 0, 255);" >, birthday</span>) { $ionicPlatform.ready( function () { <span style= "background-color: rgb(255, 0, 255);" >birthday.initDB();</span> // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard // for form inputs) if (window.cordova && window.cordova.plugins && window.cordova.plugins.Keyboard) { cordova.plugins.Keyboard.hideKeyboardAccessoryBar( true ); cordova.plugins.Keyboard.disableScroll( true ); } if (window.StatusBar) { // org.apache.cordova.statusbar required StatusBar.styleLightContent(); } } |
第六步:开始controller里和views里的代码了
工程中的路由都已经配置好了,我们直接修改她的controller和views就行了!
展示生日我们用tab-dash.html, 对应的controller是DashCtrl;
tab-dash.html中的代码修改如下:
1
2
3
4
5
6
7
8
9
10
11
12
|
<ion-view view-title= "Dashboard" > <ion-content class = "padding" > <div class = "list card" ng-repeat= "birthday in birthdays" > <div class = "item item-divider" >{{birthday.date}}</div> <div class = "item item-body" > <div> {{birthday.name}} </div> </div> </div> </ion-content> </ion-view> |
DashCtrl中修改如下:
1
2
3
4
5
6
7
8
9
10
|
.controller( 'DashCtrl' , function ($scope, birthday) { $scope.birthdays = []; $scope.init = function () { birthday.getAllBirthday( function (data) { console.log(data); //还没保存数据目前打印的是空数组 $scope.birthdays = data; }) }; $scope.init(); }) |
第七步:开始保存数据页面的controller和views编写了!
存储数据的页面就用tab-account.html, controller就用AccountCtrl。
tab-account.html的页面代码改成这样
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
|
<ion-view view-title= "Account" > <ion-content> <ion-list> <div class = "row" > <div class = "col col-100" style= "height:100px;" ></div> </div> <div class = "row" > <div class = "col col-10" >{{name}}</div> <div class = "col col-80" ></div> <div class = "col col-10" >{{date}}</div> </div> <div class = "row" > <div class = "col col-20" > 姓名: </div> <div class = "col col-80" > <input type= "text" ng-model= "a.name" style= "border:1px solid black" > </div> </div> <div class = "row" > <div class = "col col-20" > 生日: </div> <div class = "col col-80" > <input type= "text" ng-model= "a.date" style= "border:1px solid black" > </div> </div> <div class = "row" > <div class = "col col-20" ></div> <div class = "col col-20" > <button ng-click= "psotBirthday()" >保存</button> </div> <div class = "col col-60" ></div> </div> </ion-list> </ion-content> </ion-view> |
接下来修改AccountCtrl
代码改成这样:
1
2
3
4
5
6
7
8
9
10
11
12
13
|
.controller( 'AccountCtrl' , function ($scope, birthday) { $scope.a = {} $scope.psotBirthday = function () { console.log($scope.a); if (!$scope.a.name && !$scope.a.date) { alert( "姓名和日期不能为空!" ); return ; }; birthday.addBirthday($scope.a); $scope.a.name = '' ; $scope.a.date = '' ; } }); |
效果图:在此页面输入 再点击Status显示如下:
OK到现在,我已经把通过pouchdb和SQLite在手机本地存储数据,取出数据的过程已经演示完成。至于删除也很简单的。
我相信你可以自己去查看官方文档,自己去实现的!
pouchdb官方API地址:http://pouchdb.com/api.html#delete_document
[转]ionic 通过PouchDB + SQLite来实现app的本地存储(Local Storage)的更多相关文章
- ionic 通过PouchDB + SQLite来实现app的本地存储(Local Storage)
首先声明,本教程参考国外网站(http://gonehybrid.com/how-to-use-pouchdb-sqlite-for-local-storage-in-your-ionic-app/) ...
- [转]App离线本地存储方案
App离线本地存储方案 原文地址:http://ask.dcloud.net.cn/article/166 HTML5+的离线本地存储有如下多种方案:HTML5标准方案:cookie.localsto ...
- [转]Dcloud App离线本地存储方案
原文地址:http://ask.dcloud.net.cn/article/166 HTML5+的离线本地存储有如下多种方案:HTML5标准方案:cookie.localstorage.session ...
- ionic 运用pouchdb/sqlite 数据库做本地存储
配置数据库环境需要3步: 1.安装slqite插件 在ionic 工程目录对应终端执行一下命令: npm install cordova-plugin-sqlite 2.安装pouchdb 在ioni ...
- Wijmo 5 + Ionic Framework之:费用跟踪 App
Wijmo 5 + Ionic Framework之:费用跟踪 App 费用跟踪应用采用了Wijmo5和Ionic Framework创建,目的是构建一个hybird app. 我们基于<Mob ...
- Mobile first! Wijmo 5 + Ionic Framework之:费用跟踪 App
费用跟踪应用采用了Wijmo5和Ionic Framework创建,目的是构建一个hybird app. 我们基于<Mobile first! Wijmo 5 + Ionic Framework ...
- ionic react-native和native开发移动app那个好
ionic react-native和native开发移动app那个好 ? 移动端开发如何选型?这里介绍一下我眼中的ionic,react-native,native 三种移动端开发选型对比.欢迎大家 ...
- ionic react-native和native开发移动app到底那个好
ionic react-native和native开发移动app那个好 ? 移动端开发如何选型?这里介绍一下我眼中的ionic,react-native,native 三种移动端开发选型对比.欢迎大家 ...
- ionic构建APP--简单操作实现APP制作
ionic--基于AngularJS的app框架 1安装ionic .HBuilder创建APP项目,导入ionic的css,js(fonts)文件. .导入ionic.css和ionic.bundl ...
随机推荐
- 404 Not Found错误页面的解决方法和注意事项
最近这段时间一直忙于整理网站的错误页面,期间整理了很多关于404 Not Found错误页面的知识,加之最近也在帮团队新来的人员培训seo优化知识,所以在此借助马海祥博客的平台就拿出来跟大家一起分享一 ...
- string.join加引号
columnsGen = string.Join(",", modelDictionary.Keys); valueGen = modelDictionary.Values.Agg ...
- u-boot移植总结(一)start.S分析
本次移植u-boot-2010.09是基于S3C2440的FL440板子,板子自带NANDFLASH而没有NORFLASH,所以在U-BOOT启动的过程中必须实现从NANDFLASH到SDRAM的重定 ...
- .Net开发人员有趣的Podcast
如果你是一个.Net开发人员,那么一定不要错过这些Podcasts,它们可是即可以了解IT业态,又可以锻炼英文听力.有采访很多开源人员,涉及项目等等.先尽力听他们说什么,然后再看Tra ...
- PowerShell与CMD在路径解析上的一点不同
对于路径含有空格的文件夹,在加入PATH环境变量时,前后往往会加上引号.这种情况,CMD可以正确识别:但是Powershell却不能加上引号,否则无法定位路径. 例如,在PS中,$env:path查看 ...
- 改变mvc web api 支持android ,ios ,ajax等方式跨域调用
公司一个移动后端的项目用到了 webapi 项目搭建到外网环境共app开发者调用测试接口时遇到了一个问题 接口不允许跨域调用 .查阅资料明白 同源策略原则根据请求报头值 Origin 与回应报头值 A ...
- js中创建对象的几种方式
创建对象指创建一个object并给这个对象添加属性和方法,有以下几个方式: 最基本的: var Person={}; Person.name='tom'; Person.age='20'; Perso ...
- HTML 块元素
分为3类 1. 结构块 只能包含块级元素.它们包含结构含义,但没有语义含义,也就是,不能说明内容是什么,只能说明其组织方式. <ol> <ul> <dl> < ...
- 破解 “PEDIY CrackMe 2007” 之 KeygenMe_1_by_boonz
系统 : Windows xp 程序 :KeygenMe_1_by_boonz 程序下载地址 :http://www.crackmes.de/users/boonz/keygenme_1_by_boo ...
- oracle10g 统计信息查看、收集
1. 统计信息查看 1.1 单个表的全局统计信息.统计效果查看 2. 统计信息分析(收集) 2.1 分析工具选择 2.2 分析前做index重建 2.3 分析某数据表,可以在PL/SQL的comm ...