数字天堂HBuilder+MUI(一)websql数据库操作

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/bin470398393/article/details/53813150

        随着HTML5的越来越火,进行移动应用开发的前端框架也随着火了一把,刚好最近在使用HBuilder+MUI框架进行开发,正好抽空写一些相关的功能操作,很多东西也是慢慢摸索的过程,有写的不好的地方欢迎指正,希望大家能够从中共同学习指正文主要介绍的就是在HBuilder+MUI框架进行html5开发中websql数据库的操作方法,以具体实例说明如何通过JavaScript封装的html5操作websql数据库类,关键点已进行代码注释,希望大家可以互相学习进步,觉得不错的欢迎点赞。

<!DOCTYPE HTML>  
<html>  
<head>  
    <meta charset="utf-8"/>  
   <!--适应移动端,需要加下面meta-->
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
   
    <title>websql数据存储</title>  
    <!--
    	作者:Irvin-bin
    	时间:2016-12-22
    	描述:以下为mui框架常用文件
    -->
    <script src="js/mui.min.js"></script>
    <link href="css/mui.min.css" rel="stylesheet"/>
    <script type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript" src="js/common.js"></script>
    <!--end-->
    
    <script type="text/javascript">
    	//打开数据库  
    var db = openDatabase('websqldb','1.0.0','websql demo',204800);
//  var db = openDatabase(databasename,version,description,size)  
//  该方法有四个参数,作用分别为:
//  databasename:数据库名;
//  version:数据库版本号,可不填;
//  description:数据库描述;
//  size:给数据库分配的空间大小;
	//保存数据  
	function save(){  
	    var username = document.getElementById("username").value;  
	    var userno = document.getElementById("userno").value;  
	    var school = document.getElementById("school").value;  
	    //创建时间  
	    var time = new Date().getTime();  
	    db.transaction(function(tx){  
//	    	executeSql方法有四个参数,作用分别如下:
//			sqlQuery:需要具体执行的sql语句,可以是create、select、update、delete;
//			[value1,value2..]:sql语句中所有使用到的参数的数组,在executeSql方法中,将sql语句中所要使用的参数先用“?”代替,然后依次将这些参数组成数组放在第二个参数中;
//			dataHandler:执行成功是调用的回调函数,通过该函数可以获得查询结果集;
//			errorHandler:执行失败时调用的回调函数;
	        tx.executeSql('insert into class values(?,?,?,?)',[username,userno,school,time],onSuccess,onError);  
	    });  
	}  
	 //sql语句执行成功后执行的回调函数  
	function onSuccess(tx,rs){  
	    alert("操作成功");  
	    load();  
	}  
	//sql语句执行失败后执行的回调函数  
	function onError(tx,error){  
	    alert("操作失败,失败信息:"+ error.message);  
	} 
	
	//获取所有数据  
	function load(){  
	    var list = document.getElementById("list");  
	    db.transaction(function(tx){  
	        //如果数据表不存在,则创建数据表  
	        tx.executeSql('create table if not exists class (username text,userno text,school text,createtime INTEGER)',[]);  
	        //查询所有学生记录  
	        tx.executeSql('select * from class',[],function(tx,rs){  
	           if(rs.rows.length>0){  
	                var result = "<table>";  
	                result += "<tr><th>序号</th><th>姓名</th><th>学号</th><th>学校</th><th>添加时间</th><th>操作</th></tr>";  
	                for(var i=0;i<rs.rows.length;i++){  
	                    var row = rs.rows.item(i);  
	                    //转换时间,并格式化输出  
	                    var time = new Date();  
	                    time.setTime(row.createtime);  
	                    var timeStr = time.format("yyyy-MM-dd hh:mm:ss");  
	                    //拼装一个表格的行节点  
	                    result += "<tr><td>"+(i+1)+"</td><td>"+row.username+"</td><td>"+row.userno+"</td><td>"+row.school+"</td><td>"+timeStr+"</td><td><input type='button' value='删除' onclick='del("+row.userno+")'/></td></tr>";  
	                }  
	                list.innerHTML = result;  
	           }else{  
	                list.innerHTML = "学生信息为空,请添加";  
	           }   
	        });  
	    });  
	}  
	
	Date.prototype.format = function(format)  
	{  
	    var o = {  
	    "M+" : this.getMonth()+1, //month  
	    "d+" : this.getDate(),    //day  
	    "h+" : this.getHours(),   //hour  
	    "m+" : this.getMinutes(), //minute  
	    "s+" : this.getSeconds(), //second  
	    "q+" : Math.floor((this.getMonth()+3)/3),  //quarter  
	    "S" : this.getMilliseconds() //millisecond  
	    }  
	    if(/(y+)/.test(format)) format=format.replace(RegExp.$1,  
	    (this.getFullYear()+"").substr(4 - RegExp.$1.length));  
	    for(var k in o)if(new RegExp("("+ k +")").test(format))  
	    format = format.replace(RegExp.$1,  
	    RegExp.$1.length==1 ? o[k] :  
	    ("00"+ o[k]).substr((""+ o[k]).length));  
	    return format;  
	}  
	
	//根据学号删除学生信息  
	function del(userno){  
//		transaction方法使用一个回调函数作为参数,在这个函数中,执行访问数据库的具体操作;
	     db.transaction(function(tx){  
	        //注意这里需要显示的将传入的参数userno转变为字符串类型  
	        tx.executeSql('delete from class where userno=?',[String(userno)],onSuccess,onError);  
	    });  
	} 
    </script>
     <style>  
        th {  
		    font: bold 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;  
		    color: #4f6b72;  
		    border-right: 1px solid #C1DAD7;  
		    border-bottom: 1px solid #C1DAD7;  
		    border-top: 1px solid #C1DAD7;  
		    letter-spacing: 2px;  
		    text-transform: uppercase;  
		    text-align: left;  
		    padding: 6px 6px 6px 12px;  
		}  
		td {  
		    border-right: 1px solid #C9DAD7;  
		    border-bottom: 1px solid #C9DAD7;  
		    background: #fff;  
		    padding: 6px 6px 6px 12px;  
		    color: #4f6b72;  
		}
    </style> 
</head>  
<body onload="load()">  
	<!--header采用mui中封装好的组件“导航栏包含文字和图标”,-->
	<header class="mui-bar mui-bar-nav">
		<h1 class="mui-title">Hello World</h1>
	</header>
    <div class="mui-content">     
        <label for="username">姓名:</label>  
        <input type="text" id="username" name="username" class="text"/>  
        <br/>  
        <label for="userno">学号:</label>  
        <input type="text" id="userno" name="userno"/>  
        <br/>  
        <label for="userno">学校:</label>  
        <input type="text" id="school" name="school"/>  
        <br/>  
        <input type="button" onclick="save()" value="添加学生信息"/>  
    </div>  
    <br/>  
    <div id="list">  
    </div>  
</body>  
</html>  
实现界面如下图所示:
结果图

        有好的想法或内容欢迎交流学习,本人邮箱bin470398393+@qq.com/@163.com/@126.com。

没有更多推荐了,返回首页