HBuilder webApp开发 Websql增删改查操作

最新推荐文章于 2024-05-07 12:27:36 发布

kehan628

最新推荐文章于 2024-05-07 12:27:36 发布

阅读量792

点赞数

这段时间公司要求我们做原生iOS和安卓的都转做H5开发APP,使用的工具HBuilder。公司这么要求我们也就只能转行做了。大家都是小白，好在公司有两位H5大神，他们先给我们一些代码看看，所以，我们上手也比较快。在做APP的过程中用到了一些本地存储，关于本地存储大家可以看看《App离线本地存储方案》。里面我只说说Web SQL,因为里面的localstorage，plus.storage和websql都是我使用过的，其中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] : -------- 我是分割线 -------

 
 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
 
 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

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);
        });
    });
}
 
 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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
 
 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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153

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>
 
 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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
 
 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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85

总结

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