数字天堂HBuilder+MUI（一）websql数据库操作

时间： 2023-06-18 admin 文学

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

<!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" /> <title>websql数据存储</title>  <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>  <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='删除' οnclick='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 οnlοad="load()">  <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" οnclick="save()" value="添加学生信"/> </div> <br/> <div id="list"> </div> </body> </html> 实现界面如下图所示：

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