实用demo！sqlite数据库测试。只能操作数据库缓存，不能持久化的修改数据库文件。

水手启航

于 2023-02-24 17:26:42 发布

阅读量168

点赞数

文章标签：数据库 js sqlite html

本文链接：https://blog.csdn.net/weixin_69134486/article/details/129205273

版权

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>sqlite数据库测试(只能操作数据库缓存，不能持久化的修改数据库文件)</title>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://cdn.bootcss.com/sql.js/0.5.0/js/sql-optimized.js"></script>
</head>
<body>
 <p>(只能操作数据库缓存，不能持久化的修改数据库文件)</p>
 <label>输入姓名：</label><input type="text" id="content" value="" />
 <button id="btn" onclick="add_article()">添加文章</button>
<script>
 	function add_article(){
	    axios.get("sqlite3demo.db3", {responseType: 'arraybuffer'})
	        .then(function (response) {
	            let db = new window.SQL.Database(new Uint8Array(response.data));
	            // 执行查询
	            let s = new Date().getTime();
	            let content = document.getElementById("content").value;
	            //let r = db.exec("SELECT * FROM sys_user;");
	            //let sql = "delete from  'sys_user' where status =1;";
	            //console.log(sql);
	           // let r = db.exec(sql);
	            let e = new Date().getTime();
	            console.info("插入数据耗时：" + (e - s) + "ms");
	            s = new Date().getTime();
	            r = db.exec("update sys_user set user_name=000 ;");
	            r = db.exec("SELECT * FROM sys_user;");
	            e = new Date().getTime();
			console.info("查询数据耗时：" + (e - s) + "ms");
	            // 解析数据
	            let obj = dbToObj(r);
	            console.info(obj);
	        })
	        .catch(function (error) {
	            console.info(error);
	        });
         	//alert("添加文章成功!");
 	}
    // 读取数据库数据
    

 
    // 方法传入两个数组，第一个数组为key，第二个数组对应位置为value，此方法在Python中为zip()函数。
    const ArraytoObj = (keys = [], values = []) => {
        if (keys.length === 0 || values.length === 0) return {};
        const len = keys.length > values.length ? values.length : keys.length;
        const obj = {};
        for (let i = 0; i < len; ++i) {
            obj[keys[i]] = values[i]
        }
        return obj;
    };
 
    // 转驼峰表示：func.camel('USER_ROLE',true) => UserRole
    // 转驼峰表示：func.camel('USER_ROLE',false) => userRole
    const camel = (str, firstUpper = false) => {
        let ret = str.toLowerCase();
        ret = ret.replace(/_([\w+])/g, function (all, letter) {
            return letter.toUpperCase();
        });
        if (firstUpper) {
            ret = ret.replace(/\b(\w)(\w*)/g, function ($0, $1, $2) {
                return $1.toUpperCase() + $2;
            });
        }
        return ret;
    };
 
    // 把数组里面的所有转化为驼峰命名
    const camelArr = (arrs = []) => {
        let _arrs = [];
        arrs.map(function (item) {
            _arrs.push(camel(item));
        });
        return _arrs;
    };
 
    // 读取数据库
    // 1.把columns转化为驼峰；
    // 2.把columns和values进行组合；
    const dbToObj = (_data = {}) => {
        let _res = [];
        _data.map(function (item) {
            let _columns = camelArr(item.columns);
            item.values.map(function (values) {
                _res.push(ArraytoObj(_columns, values));
            });
        });
        return _res;
    };
</script>
</body>
</html>