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>