ionic sqlite的使用

简介: 自认为比较全地总结了一下ionic中sqlite的用法,希望能对更多我这样的菜鸟有所帮助。

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

(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");




相关文章
|
人工智能 Cloud Native Java
从云原生视角看 AI 原生应用架构的实践
本文核心观点: • 基于大模型的 AI 原生应用将越来越多,容器和微服务为代表的云原生技术将加速渗透传统业务。 • API 是 AI 原生应用的一等公民,并引入了更多流量,催生企业新的生命力和想象空间。 • AI 原生应用对网关的需求超越了传统的路由和负载均衡功能,承载了更大的 AI 工程化使命。 • AI Infra 的一致性架构至关重要,API 网关、消息队列、可观测是 AI Infra 的重要组成。
53072 109
|
11月前
|
JavaScript 前端开发 测试技术
React和Vue的性能对比如何?
需要注意的是,性能不仅仅取决于框架本身,还与开发者的代码质量、架构设计以及项目的优化程度等密切相关。因此,在评估性能时,应该综合考虑多个因素,而不是仅仅局限于框架之间的比较。
587 58
|
9月前
|
人工智能 前端开发 搜索推荐
研发智能化新篇章:通义灵码企业级方案与实践
《研发智能化新篇章:通义灵码企业级方案与实践》简介: 本文探讨了通义灵码在提升企业研发效能方面的核心影响和实际应用。首先分析了AIGC(人工智能生成内容)如何从个体效率、协同效率和持续化三个维度提升企业生产力。接着,通过亚信科技的实际案例,展示了其在不同场景下的智能化实践,包括智能编程助手的选型、部署及效果评估。最后,展望了未来研发智能化的发展方向,提出构建覆盖软件开发全流程的智能体工具集,以进一步降低使用门槛并提升整体效率。文中强调了通义灵码在代码补全、知识问答等方面的应用成效,并指出了企业在落地过程中面临的挑战及应对策略。
395 1
|
12月前
|
前端开发 JavaScript
💥【exceljs】纯前端如何实现Excel导出下载和上传解析?
本文介绍了用于处理Excel文件的库——ExcelJS,相较于SheetJS,ExcelJS支持更高级的样式自定义且易于使用。表格对比显示,ExcelJS在样式设置、内存效率及流式操作方面更具优势。主要适用于Node.js环境,也支持浏览器端使用。文中详细展示了如何利用ExcelJS实现前端的Excel导出下载和上传解析功能,并提供了示例代码。此外,还提供了在线调试的仓库链接和运行命令,方便读者实践。
1202 5
|
12月前
|
网络协议 网络虚拟化 网络架构
【网络实验】/主机/路由器/交换机/网关/路由协议/RIP+OSPF/DHCP(上)
【网络实验】/主机/路由器/交换机/网关/路由协议/RIP+OSPF/DHCP(上)
205 1
|
SQL 存储 监控
|
存储 缓存 数据库
Android之SQLite数据库使用详解
Android之SQLite数据库使用详解
1151 0
|
人工智能 自然语言处理 开发工具
Agent调研--19类Agent框架对比(下)
Agent调研--19类Agent框架对比(下)
3706 0
|
SQL 开发框架 数据库连接
uniapp中sqlite数据库常用操作的简单封装
uniapp中sqlite数据库常用操作的简单封装
1335 0
|
开发框架 移动开发 JavaScript
uniapp实现路线规划
uniapp实现路线规划
311 0