ionic sqlite的使用

    xiaoxiao2026-06-10  17

    这方面的文章比较匮乏啊,博主这个菜鸟费了好大的力气才学个差不多。

    (PS:博主半路出家,尚是菜鸟,写的东西自己跑起来并没有什么问题但不敢保证写的一定对,语言也很随意,仅供参考。另,期待各位前辈的指教)

    添加插件:

    cordova plugin add https://github.com/brodysoft/Cordova-SQLitePlugin.git注意:用这个插件,需要在真机或模拟器上运行,ionic serve不支持调用真机api的插件 添加完插件,得在index.html里面加一行 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> <title></title> <link href="lib/ionic/css/ionic.css" rel="stylesheet"> <link href="css/style.css" rel="stylesheet"> <script src="lib/ionic/js/ionic.bundle.js"></script> <script src="js/ng-cordova.min.js"></script> //就这行,加上 <script src="cordova.js"></script> <script src="js/app.js"></script> </head> <body ng-app="starter"> 然后在app.js里面,声明一个db,在.run同一行的括号里加上"$cordovaSQLite" var db = null; //app.js最上面初始化一个值为null的db变量 var example = angular.module('starter', ['ionic', 'ngCordova']) //这个ngCordova忘了是不是要自己填进来了,没有就填上 .run(function($ionicPlatform, $cordovaSQLite) { //"$cordovaSQLite"写在这里 $ionicPlatform.ready(function() { if(window.cordova && window.cordova.plugins.Keyboard) { cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true); } if(window.StatusBar) { StatusBar.styleDefault(); } db = $cordovaSQLite.openDB("my.db"); //这个就是创建db了。好像不用提前创建,直接open就行。。 $cordovaSQLite.execute(db, "CREATE TABLE IF NOT EXISTS people (id integer primary key, firstname text, lastname text)"); //创建一个表,前面是数据库名字,后面是sql语句了 }); });

    ok,到此为止我们的数据表建立完成。

    接下来是操作数据库

    操作数据库,需要在对应controller中添加$cordovaSQLite

    .controller('AddThingsCtrl', function($scope, $cordovaSQLite, $scope, $ionicActionSheet, $timeout) {//就第二个

    然后就可以在controller里面写函数了

    1.insert

    $scope.add = function(name, introduce, pic, price, detail){ //外面传进来的参数 var qInsert = "INSERT INTO cafe (name, introduce, pic, price, detail) VALUES ( ?, ?, ?, ?, ?)"; //SQL $cordovaSQLite.execute(db, qInsert, [name, introduce, pic, price, detail]).then(function(res) { //三个参数,分别是数据库名,执行的sql语句,和待填入sql语句中对应位置的参数。后面是执行完毕的回调函数,res是返回的对象 console.log("INSERTED"); }, function (err) { console.log("Error"); }) }

    上面的add函数的参数和sql语句中的问号、中括号中的参数不需要保持一致

    这是我的一个函数,写的很难看,但是能说明问题,见笑了……

    HTML:

    <button class="button button-positive button-block" ng-click="add(name, introduce, pic)">完成添加</button>

    controller.js:

    $scope.idUnoccupied = ...; $scope.lastSort = ...; $scope.add = function(name, introduce, pic){ var qInsert = "INSERT INTO cafe (id, father, name, sort, introduce, pic) VALUES (?, ?, ?, ?, ?, ?)"; $cordovaSQLite.execute(db, qInsert, [$scope.idUnoccupied, -1, name, $scope.lastSort, introduce, pic]).then(function(res) { console.log("INSERTED"); }, function (err) { console.error(err); }) }

    2.select //有参数的select $scope.selectByPrice = function(byPrice){ var select = "SELECT * FROM cafe WHERE price = ?"; $cordovaSQLite.execute(db, select, [byPrice]).then(function(res) { //byPrice就是参数 if(res.rows.length > 0) { console.log(res.rows.item(0)); //这个就是对象。item()是一个拿对象的函数,参数是角标 console.log(res.rows.item); //需要拿什么值,直接item(0).xxx就行了 } else { console.log("No results found"); } }, function (err) { console.error(err); }); } //没有参数的select $scope.idUnoccupied = 0; $scope.ifCanInsert = function(){ //查找种类id列空缺位置 var queryFindUnoccupied = "SELECT MIN(id+1) FROM cafe AS a WHERE NOT EXISTS (SELECT id FROM cafe WHERE id=a.id+1)"; $cordovaSQLite.execute(db, queryFindUnoccupied, []).then(function(res) { //没有参数,中括号里不填东西就是了 if(res.rows.item(0)["MIN(id+1)"] == null){$scope.idUnoccupied = 0;} else{$scope.idUnoccupied = res.rows.item(0)["MIN(id+1)"];} //返回来的对象的名字是MIN(id+1),直接写item(0).MIN(id+1)会被当成函数查不了,所以这么写。 console.log($scope.idUnoccupied); }, function (err) { console.error(err); }); }

    另外两个操作应该就不用写了吧……

    需要注意的是,数据库的操作需要设备准备好,即app.js中的.run执行完,才能使用。如果在.run执行前就直接执行数据库操作,那么被操作的数据库就是null,会报错。这时在终端/cmd中按个r,reset一下就可以正常用了(当然,前提是没有写错的地方。。)

    删数据库,就是在app.js中写

    $cordovaSQLite.deleteDB("my.db");

    最新回复(0)