HBuilder webApp開發 Websql增刪改查操做

時間 2019-11-17

原文原文鏈接

來源：http://blog.csdn.net/zhuming3834/article/details/51471434javascript

這段時間公司要求咱們作原生iOS和安卓的都轉作H5開發APP,使用的工具HBuilder。公司這麼要求咱們也就只能轉行作了。你們都是小白，好在公司有兩位H5大神，他們先給咱們一些代碼看看，因此，咱們上手也比較快。在作APP的過程當中用到了一些本地存儲，關於本地存儲你們能夠看看《App離線本地存儲方案》。裏面我只說說Web SQL,由於裏面的localstorage，plus.storage和websql都是我使用過的，其中localstorage和plus.storage是以鍵值對的形式存儲，操做比較簡單，可是websql操做數據庫就有點不同了，這個我也是搞了一天才調試好。
在使用HBuilder的過程當中，感受最坑爹的是有時錯了都不知道錯在哪裏了，又不能斷點調試，可是有點好的是作界面的時候能夠邊改邊看。出現問題就只能本身慢慢的找了。還好，代碼寫了一段時間就有一些調試技巧，寫代碼的錯誤率也下降了。html

界面

數據庫的操做

增刪改查基本就是咱們操做數據庫的四個最基本的操做了。
界面按鈕的操做步驟：
新建數據庫–>插入數據–>查找一條數據–>修改數據–>查找一條數據–>查找所有數據–>刪除一條數據–>刪除所有數據。java

[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的介紹。mysql

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。