mui中的WebSql使用

mui中的WebSql使用

MUI是Dcloud官方推出的一个基于html5+标准的框架，同时拥有h5组件和原生组件。所以mui可以使用WebSql进行数据存储等操作。

1.WebSql的核心方法

以下是规范中定义的三个核心方法：

openDatabase：这个方法使用现有的数据库或者新建的数据库创建一个数据库对象。
transaction：这个方法让我们能够控制一个事务，以及基于这种情况执行提交或者回滚。
executeSql：这个方法用于执行实际的 SQL 查询。

2.WebSql文件的创建

我们可以在mui跨平台项目中创建一个js文件，用来编写WebSql对应的数据库操作方法

然后在对应的页面中导入js文件

3.数据库的连接及创建

我们可以使用 openDatabase() 方法来打开已存在的数据库，如果数据库不存在，则会创建一个新的数据库。
openDatabase() 方法对应的五个参数说明：
数据库名称
版本号
描述文本
数据库大小
创建回调
第五个参数，创建回调会在创建数据库后被调用。

var dbname = 'MyApp';  //数据库名称
var varsion = '1.0';  //数据库版本
var dbdesc = 'H5跨平台项目应用的数据';  //数据库描述
var dbsize = 5*1024*1024;  //数据库的大小，字节为单位
var dataBase = null;  //暂无数据库对象
var webSqlTable = 'myuserinfo';  //表名
var uname = '';

//连接数据库
function websqlOpenDB(){
	//连接数据库，如果数据库不存在就创建
	if(dataBase==null){
		dataBase = window.openDatabase(dbname,varsion,dbdesc,dbsize,function(){});
		if(dataBase){
			//alert('数据库已连接');
		}else{
			//alert('数据库连接失败');
		}
	}
	return dataBase;
}

当方法成功调用后，我们可以在浏览器的开发者模式中的应用程序看到对应的数据库

4.数据库操作

数据库的数据操作无非是增删改查，我们通过database.transaction() 函数来执行sql语句

创建表

//创建表
function createTable(tableName){
	//通过方法执行SQL语句
	var sql = 'create table if not exists '+tableName
	+'(uid integer primary key autoincrement,'
	+'username text,'  //用户名
	+'pwd text,'  //密码  
	+'bday text,'  //生日 
	+'constellation text,'  //星座
	+'race text,'  //种族
	+'professional text,'  //职业
	+'address text'  //地址
	+')';
	dataBase.transaction(function(ctx,result){
		ctx.executeSql(sql,[],function(ctx,result){
			//alert(tableName+'表创建成功！');
		},function(tx,error){
			//alert(tableName+'表创建失败，错误信息为：'+error.message);
		});
	});
}

注册界面

其中种族，职业，地址为选择器

注册功能本质上为insert操作，同时已存在的用户名不允许注册

//插入数据，需要考虑用户名相同的情况
function addUser(tableName,username,pwd,bday,star,zhongzu,zhiye,adress){
	createTable(webSqlTable);
	var sql = 'select * from '+tableName+' where username=?';
	dataBase.transaction(function(ctx){
		ctx.executeSql(sql,[username],function(ctx,result){
			var len = result.rows.length;
			if(len>0){
				alert('用户名已存在！');
				return;
			}else{
				var sql = 'insert into '+tableName+' (username,pwd,bday,constellation,race,professional,address) values (?,?,?,?,?,?,?)';
				dataBase.transaction(function(ctx){
					ctx.executeSql(sql,[username,pwd,bday,star,zhongzu,zhiye,adress],function(ctx,result){
						alert('注册成功！');
						//window.location.href='login.html';
						window.history.back();
					},function(tx,error){
						alert('注册失败，错误信息为：'+error.message);
					});
				});
			}
		});
	});
}

登录界面

进行查询操作

//用户登录
function login(tableName,username,pwd){
	createTable(webSqlTable);
	//判断用户名是否存在
	var sql = 'select * from '+tableName+' where username=?';
	
	dataBase.transaction(function(ctx){
		ctx.executeSql(sql,[username],function(ctx,result){
			var len = result.rows.length;
			if(len>0){
				//只有在用户名正确的情况下，才会进入该if条件
				var sql = 'select * from '+tableName+' where username=? and pwd=?';
				dataBase.transaction(function(ctx){
					ctx.executeSql(sql,[username,pwd],function(ctx,result){
						var len = result.rows.length;
						if(len>0){
							alert('登录成功！');
							window.localStorage.setItem('username',username);
							window.location.href='main.html';
							//window.location.href='main.html?username='+username;
						}else{
							alert("登录失败，密码错误");
						}
					});
				});
			}else{
				alert('用户名不存在！');
				return;
			}
		});
	});
}