zoukankan      html  css  js  c++  java
  • HBuilder webApp开发 Websql增删改查操作

    来源:http://blog.csdn.net/zhuming3834/article/details/51471434

    这段时间公司要求我们做原生iOS安卓的都转做H5开发APP,使用的工具HBuilder。公司这么要求我们也就只能转行做了。大家都是小白,好在公司有两位H5大神,他们先给我们一些代码看看,所以,我们上手也比较快。在做APP的过程中用到了一些本地存储,关于本地存储大家可以看看《App离线本地存储方案》 。里面我只说说Web SQL,因为里面的localstorageplus.storagewebsql都是我使用过的,其中localstorage和plus.storage是以键值对的形式存储,操作比较简单,但是websql操作数据库就有点不一样了,这个我也是搞了一天才调试好。 
    在使用HBuilder的过程中,感觉最坑爹的是有时错了都不知道错在哪里了,又不能断点调试,但是有点好的是做界面的时候可以边改边看。出现问题就只能自己慢慢的找了。还好,代码写了 一段时间就有一些调试技巧,写代码的错误率也降低了。

    界面

    这里写图片描述

    数据库的操作

    增删改查基本就是我们操作数据库的四个最基本的操作了。 
    界面按钮的操作步骤: 
    新建数据库–>插入数据–>查找一条数据–>修改数据–>查找一条数据–>查找全部数据–>删除一条数据–>删除全部数据。

    [LOG] : 新建数据库  
    [LOG] : 插入数据
    [LOG] : 插入websqlTable小明成功
    [LOG] : 插入websqlTable小红成功
    [LOG] : 插入websqlTable小强成功
    [LOG] : 查找一条数据
    [LOG] : NAME = 小明
    [LOG] : AGE = 18
    [LOG] : HEIGHT = 175cm
    [LOG] : WEIGTH = 60kg
    [LOG] : 修改数据
    [LOG] : 查找一条数据
    [LOG] : NAME = 小明
    [LOG] : AGE = 1000  /*修改之后的结果*/
    [LOG] : HEIGHT = 175cm
    [LOG] : WEIGTH = 60kg
    [LOG] : 查找全部数据
    [LOG] : NAME = 小明
    [LOG] : AGE = 1000
    [LOG] : HEIGHT = 175cm
    [LOG] : WEIGTH = 60kg
    [LOG] : -------- 我是分割线 -------
    [LOG] : NAME = 小红
    [LOG] : AGE = 17
    [LOG] : HEIGHT = 160cm
    [LOG] : WEIGTH = 45kg
    [LOG] : -------- 我是分割线 -------
    [LOG] : NAME = 小强
    [LOG] : AGE = 19
    [LOG] : HEIGHT = 185cm
    [LOG] : WEIGTH = 70kg
    [LOG] : -------- 我是分割线 -------
    
    websql.js文件:
    
    /**
    *数据库操作辅助类,定义对象、数据操作方法都在这里定义
    */
    var dbname='websql';/*数据库名*/
    var version = '1.0'; /*数据库版本*/
    var dbdesc = 'websql练习'; /*数据库描述*/
    var dbsize = 2*1024*1024; /*数据库大小*/
    var dataBase = null; /*暂存数据库对象*/
    /*数据库中的表单名*/
    var websqlTable = "websqlTable";
    
    /**
     * 打开数据库
     * @returns  dataBase:打开成功   null:打开失败
     */
    function websqlOpenDB(){
        /*数据库有就打开 没有就创建*/
        dataBase = window.openDatabase(dbname, version, dbdesc, dbsize,function() {});
        if (dataBase) {
            alert("数据库创建/打开成功!");
        } else{
            alert("数据库创建/打开失败!");
        }
        return dataBase;
    }
    /**
     * 新建数据库里面的表单
     * @param tableName:表单名
     */
    function websqlCreatTable(tableName){
    //  chinaAreaOpenDB();
        var creatTableSQL = 'CREATE TABLE IF  NOT EXISTS '+ tableName + ' (rowid INTEGER PRIMARY KEY AUTOINCREMENT, NAME text,AGE text,HEIGHT text,WEIGTH text)';
        dataBase.transaction(function (ctx,result) {
            ctx.executeSql(creatTableSQL,[],function(ctx,result){
                alert("表创建成功 " + tableName);
            },function(tx, error){ 
                alert('创建表失败:' + tableName + error.message);
            });
        });
    }
    /**
     * 往表单里面插入数据
     * @param tableName:表单名
     * @param NAME:姓名
     * @param AGE:年龄
     * @param HEIGHT:身高
     * @param WEIGTH:体重
     */
    function websqlInsterDataToTable(tableName,NAME,AGE,HEIGHT,WEIGTH){
        var insterTableSQL = 'INSERT INTO ' + tableName + ' (NAME,AGE,HEIGHT,WEIGTH) VALUES (?,?,?,?)';
        dataBase.transaction(function (ctx) {
            ctx.executeSql(insterTableSQL,[NAME,AGE,HEIGHT,WEIGTH],function (ctx,result){
                console.log("插入" + tableName  + NAME + "成功");
            },
            function (tx, error) {
                alert('插入失败: ' + error.message);
            });
        });
    }
    /**
     * 获取数据库一个表单里面的所有数据
     * @param tableName:表单名
     * 返回数据集合
     */
    function websqlGetAllData(tableName){   
        var selectALLSQL = 'SELECT * FROM ' + tableName;
        dataBase.transaction(function (ctx) {
            ctx.executeSql(selectALLSQL,[],function (ctx,result){
                alert('查询成功: ' + tableName + result.rows.length);
                var len = result.rows.length;
                for(var i = 0;i < len;i++) {
                    console.log("NAME = "  + result.rows.item(i).NAME);
                    console.log("AGE = "  + result.rows.item(i).AGE);
                    console.log("HEIGHT = "  + result.rows.item(i).HEIGHT);
                    console.log("WEIGTH = "  + result.rows.item(i).WEIGTH);
                    console.log("-------- 我是分割线 -------");
                }
            },
            function (tx, error) {
                alert('查询失败: ' + error.message);
            });
        });
    }
    /**
     * 获取数据库一个表单里面的部分数据
     * @param tableName:表单名
     * @param name:姓名
     */
    function websqlGetAData(tableName,name){    
        var selectSQL = 'SELECT * FROM ' + tableName + ' WHERE NAME = ?'
        dataBase.transaction(function (ctx) {
            ctx.executeSql(selectSQL,[name],function (ctx,result){
                alert('查询成功: ' + tableName + result.rows.length);
                var len = result.rows.length;
                for(var i = 0;i < len;i++) {
                    console.log("NAME = "  + result.rows.item(i).NAME);
                    console.log("AGE = "  + result.rows.item(i).AGE);
                    console.log("HEIGHT = "  + result.rows.item(i).HEIGHT);
                    console.log("WEIGTH = "  + result.rows.item(i).WEIGTH);
                }
            },
            function (tx, error) {
                alert('查询失败: ' + error.message);
            });
        });
    }
    /**
     * 删除表单里的全部数据
     * @param tableName:表单名
     */
    function websqlDeleteAllDataFromTable(tableName){
        var deleteTableSQL = 'DELETE FROM ' + tableName;
        localStorage.removeItem(tableName);
        dataBase.transaction(function (ctx,result) {
            ctx.executeSql(deleteTableSQL,[],function(ctx,result){
                alert("删除表成功 " + tableName);
            },function(tx, error){ 
                alert('删除表失败:' + tableName + error.message);
            });
        });
    }
    /**
     * 根据name删除数据
     * @param tableName:表单名
     * @param name:数据的姓名
     */
    function websqlDeleteADataFromTable(tableName,name){
        var deleteDataSQL = 'DELETE FROM ' + tableName + ' WHERE NAME = ?';
        localStorage.removeItem(tableName);
        dataBase.transaction(function (ctx,result) {
            ctx.executeSql(deleteDataSQL,[name],function(ctx,result){
                alert("删除成功 " + tableName + name);
            },function(tx, error){ 
                alert('删除失败:' + tableName  + name + error.message);
            });
        });
    }
    /**
     * 根据name修改数据
     * @param tableName:表单名
     * @param name:姓名
     * @param age:年龄
     */
    function websqlUpdateAData(tableName,name,age){
        var updateDataSQL = 'UPDATE ' + tableName + ' SET AGE = ? WHERE NAME = ?';
        dataBase.transaction(function (ctx,result) {
            ctx.executeSql(updateDataSQL,[age,name],function(ctx,result){
                alert("更新成功 " + tableName + name);
            },function(tx, error){ 
                alert('更新失败:' + tableName  + name + error.message);
            });
        });
    }
    html文件:
    
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
            <meta name="apple-mobile-web-app-capable" content="yes">
            <meta name="apple-mobile-web-app-status-bar-style" content="black">
            <title></title>
            <script type="text/javascript" src="../../js/websql.js" ></script>
        </head>
    
        <script>
                function creatTable() {
                    console.log("新建数据库");
                    websqlOpenDB();
                    websqlCreatTable(websqlTable);
                }
                function insterData() {
                    console.log("插入数据");
                    websqlInsterDataToTable(websqlTable,"小明","18","175cm","60kg");
                    websqlInsterDataToTable(websqlTable,"小红","17","160cm","45kg");
                    websqlInsterDataToTable(websqlTable,"小强","19","185cm","70kg");
                }
                function updateData() {
                    console.log("修改数据");
                    websqlUpdateAData(websqlTable,"小明","1000")
                }
                function deleteAData() {
                    console.log("删除一条数据");
                    websqlDeleteADataFromTable(websqlTable,"小明");
                }
                function deleteAllData() {
                    console.log("删除全部数据");
                    websqlDeleteAllDataFromTable(websqlTable);
                }
                function selectAData() {
                    console.log("查找一条数据");
                    websqlGetAData(websqlTable,"小明");
                }
                function selectALlData() {
                    console.log("查找全部数据");
                    websqlGetAllData(websqlTable);
                }
            </script>
    
            <style>
                .content {
                    padding-top: 50px;
                }
                .websql {
                    margin-top: 10px;
                }
                /*设置按钮样式*/
                .websql button{
                    height: 44px;
                    width: 120px;
                }
            </style>
    
        <body>
            <div class="content">
                <div class="websql">
                    <button type="button" onclick="creatTable()">新建数据库</button>
                </div>
                <div class="websql">
                    <!---->
                    <button type="button" onclick="insterData()">插入数据</button> 
                </div>
                <div class="websql">
                    <!---->
                    <button type="button" onclick="deleteAData()">删除一条数据</button>
                    <button type="button" onclick="deleteAllData()">删除全部数据</button>
                </div>
                <div class="websql">
                    <!---->
                    <button type="button" onclick="updateData()">修改数据</button>
                </div>
                <div class="websql">
                    <!---->
                    <button type="button" onclick="selectAData()">查找一条数据</button>
                    <button type="button" onclick="selectALlData()">查找全部数据</button>
                </div>
            </div>
        </body>
    </html>

    总结

    在使用websql的时候,就是操作数据库sql的操作,操作的sql语句也是一样的。前后接触过CoreDate,FMDB,sqlite3和websql,使用的sql语句都是一样的,只是不同的平台和封装导致具体的使用有些不一致。《【iOS】一种仿京东搜索历史记录的表格的实现(sqlite3的使用)》 
    这里有操作CoreDate,FMDB,sqlite3的介绍。

     
     
  • 相关阅读:
    Java实现 洛谷 P1060 开心的金明
    (Java实现) 洛谷 P1605 迷宫
    (Java实现) 洛谷 P1605 迷宫
    (Java实现)洛谷 P1093 奖学金
    (Java实现)洛谷 P1093 奖学金
    Java实现 洛谷 P1064 金明的预算方案
    Java实现 洛谷 P1064 金明的预算方案
    (Java实现) 洛谷 P1031 均分纸牌
    QT树莓派交叉编译环开发环境搭建(附多个exe工具下载链接)
    武则天红人对唐睿宗的桃色报复(如此缺少城府,注定了要在宫廷中过早地出局)
  • 原文地址:https://www.cnblogs.com/zouhao/p/7220972.html
Copyright © 2011-2022 走看看