本文转自: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
时间: 2024-08-04 14:14:39