JQmobile实现的订餐webAPP

学习一段时间JQmobile后，用来实现一个简单的订餐webAPP，本应用功能十分简单，用户能够进行注册，登录，并且能下订单，和查看订单，取消订单，数据利用本地存储localStore和IndexDB，不了解localStore和IndexDB的可以看我上一篇博客 浅谈WebView利用localStore websql和IndexDB 来存储数据
用例图如下：

webAPP的开发流程
用户注册
用户登录
用户订餐
用户查看订单
用户取消订单
开发流程图

下面是代码实现
用户注册

function insert(tableName,data){
        var objectStore=initDB(tableName,"readwrite");
        //add 或者put
        var request = objectStore.add(data);
            request.onerror = function(event) {
                alert("发生错误：" + request.error);
            };
            request.onsuccess = function(event) {
                if(tableName==tbNameUser)
                    alert("注册成功");
                else
                    alert("下单成功");
            };
    }  

用户登录

function login(username,pass){
        var objectStore=initDB(tbNameUser,"readonly");
        var request=objectStore.get(username);
        request.onerror=function(e){
            alert("发生错误：" + request.error);
        };
        request.onsuccess=function(e){
            var result=e.target.result;
             try {
                if(result.pass==pass){
                    localStorage.loginStatus=true;
                    localStorage.username=result.username;
                    $(".loginStatus").html(localStorage.username+"•注销");
                }else
                    alert_back("密码错误"); 
            } 
            catch (e){ 
                    alert_back("账号错误"); 
            } 
        }
    }

用户订餐

$('#addToStorage').click(function(e){
        var mydate = new Date();
        var str =mydate.getFullYear() + "年-";
        str += (mydate.getMonth()+1) + "月-";
        str += mydate.getDate() + "日 ";
        str += mydate.getHours() + ":";
        str += mydate.getMinutes() + ":";
        str += mydate.getSeconds() ;
        foots.username=localStorage.username;
        foots.footName=localStorage.foot;
        foots.price=localStorage.price;
        foots.number=$("#num").val();
        foots.location=$("#location").val();
        foots.phone=$("#phone").val();
        foots.sum=foots.price*foots.number;
        foots.date=str;
        insert(tbNameBook,foots);
    });

用户查看订单

function selectAll(tableName){
        var objectStore = initDB(tableName,"readonly");
        var response="";
        var i=0;
        // 打开游标，遍历customers中所有数据  
        objectStore.openCursor().onsuccess = function(event) {  
            var cursor = event.target.result;  
            if (cursor) {  
                var rowData = cursor.value;  
                if(rowData["username"]==localStorage.username){
                    var tb="";
                    var count=0;
                    for (var Key in rowData){
                        count++;
                        if(count==9)
                            ids[i++]=rowData[Key];
                        else
                            tb =tb+"<td>"+rowData[Key]+"</td>";
                    }
                    tb="<tr>"+tb+"</tr>";
                    response+=tb;
                }
                cursor.continue();  
            }else{
                $("#footlist").html(response);
            }
        }  
}

用户取消订单

function deleteAll(tableName){
        var objectStore=initDB(tableName,"readwrite");
        var count=0;
        for (var i = 0; i < ids.length; i++) {
            var id=ids[i];
            var request = objectStore.delete(id);
                request.onerror = function(event) {
                    alert("发生错误：" + request.error);
                };
                request.onsuccess = function(event) {
                    count++;
                    if(count==ids.length-1)
                        alert_link("取消订单成功","index.html#home");
                };
        }
    }

至此，核心代码完成，下面请看效果（由于优快云限制上传图片大小，所以只能看到一部分，详细可以下载源码，安装即可运行，不用配置环境，数据库）

源代码地址：
https://github.com/huazhouwujinbiao/Demo_H5.git