HTML 纯前端实现认证功能

一段前端代码，通过运用前端查询SQL，实现前端数据库检索输出等功能。

1.新建db.js数据库文件

let db = openDatabase("database", "1.0", "my database", 1024 * 1024);

const USER_TABLE_SQL = "create table if not exists UserDB (id integer primary key autoincrement,username varchar(32)," +
        "birthday varchar(32),udata varchar(32),serial varchar(32),level varchar(128))";

//创建数据表
db.transaction(tx => {
	tx.executeSql(USER_TABLE_SQL, [],
		(tx, result) => {
		}, (tx, error) => {
		})
})

// 插入数据测试
const INSERT_USER_SQL = "insert into UserDB (username, birthday, udata, serial, level) values(?,?,?,?,?)";

db.transaction(tx => {
	tx.executeSql(INSERT_USER_SQL,
		["lyshark","1999-10-10","2022-12-12","121-121-121","高级 (100%)"],
		(tx, result) => {
		}, (tx, error) => {
		})
})
db.transaction(tx => {
	tx.executeSql(INSERT_USER_SQL,
		["admin","1997-10-10","2022-12-12","121-445-111","高级 (100%)"],
		(tx, result) => {
		}, (tx, error) => {
		})
})

//查询数据
function queryData(sn) {
	const QUERY_USER_SQL = "select * from UserDB where serial=?";
	db.transaction(tx => {
		tx.executeSql(QUERY_USER_SQL, [sn],
			(tx, result) => {
			
				// console.log("用户名: " + result.rows[0].username);
				document.getElementById("username").innerHTML = "姓名: " + result.rows[0].username;
				document.getElementById("birthday").innerHTML = "日期: " + result.rows[1].birthday;
				document.getElementById("serial").innerHTML = "SN: " + result.rows[2].serial;
			},
			(tx, error) => {
			})
	})
}

2.证书查询页面

<input type="text" id="token" />
<button id="btn-create">查询证书</button>

<li id="username"></li>
<li id="birthday"></li>
<li id="udata"></li>
<li id="serial"></li>
<li id="level"></li>

<script type="text/javascript">
	function createTable() {
		var serial_number=document.getElementById('token').value;
		queryData(serial_number);
	}

	let findId = id => document.getElementById(id);
	let btnCreate = findId("btn-create");
	btnCreate.onclick = () => createTable();
</script>

3.数据库查询过程

<script type="text/javascript" src="db.js"></script>
<script type="text/javascript">
    let db = openDatabase("MySql", "1.0", "my databases", 1024 * 1024);
    let result = db ? "数据库创建成功" : "数据库创建失败";
    // console.log(result);

	// 创建数据表
    const USER_TABLE_SQL = "create table if not exists CountTable (id integer primary key autoincrement,pv_count integer)";
    function createTable() {
        db.transaction(tx => {
            tx.executeSql(USER_TABLE_SQL, [],
                (tx, result) => {
                    //console.log('创建user表成功:' + result);
                }, (tx, error) => {
                    //console.log('创建user表失败:' + error.message);
                })
        })
    }

    //插入数据
	const INSERT_USER_SQL = "insert into CountTable(pv_count) values(?)";
    function insertData(user) {
        db.transaction(tx => {
            tx.executeSql(INSERT_USER_SQL,
                [1024],
                (tx, result) => {
                    //console.log('添加数据成功:');
                }, (tx, error) => {
                    //console.log('添加数据失败:' + error.message);
                })
        })
    }


// 查询数据,并加1后写回
    const QUERY_USER_SQL = "select pv_count from CountTable where id = 1";
	const UPDATE_USER_SQL = "update CountTable set pv_count = ? where id = ?";
	
	var pv_count_value = 0;
	
	db.transaction(tx => {
		tx.executeSql(QUERY_USER_SQL, [],
			(tx, result) => {
				//console.log("查询出PVCount: " + result.rows[0].pv_count);
				pv_count_value = result.rows[0].pv_count;
				pv_count_value = pv_count_value + 1;
				
				//console.log(pv_count_value);
			},
			(tx, error) => {
				//console.log('查询失败: ' + error.message)
			})
	})

    //修改数据
	db.transaction(tx => {
		tx.executeSql(UPDATE_USER_SQL, [pv_count_value, 1],
			(tx, result) => {
				//console.log(pv_count_value);
				document.write(pv_count_value);
			}, (tx, error) => {
				//console.log("error");
			})
	})

	createTable();
	insertData();
</script>