zoukankan      html  css  js  c++  java
  • js -- 操作sqlite数据库

    最近看到一个使用js来操作sqlite数据库的,测试了一下,具体使用的是

    js操作类: https://github.com/kripken/sql.js/(sqlite js 驱动)

    异步请求:http://npm.taobao.org/package/axios(异步请求插件,只有12.6k)

    这里使用的js驱动是和服务器端使用方法一致,sql标准语法都支持,可以用第三方管理工具来管理数据文件

    目前我使用的是 Navicat Premium 12

    下面是测试的源代码:

    1. 数据库sql(自己运行生成test.db,和html页面放在同一目录下):

    PRAGMA foreign_keys = false;
    
    -- ----------------------------
    -- Table structure for sys_user
    -- ----------------------------
    DROP TABLE IF EXISTS "sys_user";
    CREATE TABLE "sys_user" (
      "id" bigint(11) NOT NULL,
      "role_id" bigint(11) NOT NULL,
      "user_name" varchar(255) NOT NULL,
      "user_pass" varchar(64) NOT NULL,
      "nick_name" varchar(255) NOT NULL,
      "register_time" datetime NOT NULL,
      "status" int(11) NOT NULL DEFAULT 1,
      "sort" decimal(16,2) NOT NULL DEFAULT 0.00,
      PRIMARY KEY ("id")
    )
    WITHOUT ROWID;
    
    -- ----------------------------
    -- Records of sys_user
    -- ----------------------------
    INSERT INTO "sys_user" VALUES (1, 1, 'lxw', 123456, '李兴武', '2019-01-07 11:22:30', 0, 1);
    INSERT INTO "sys_user" VALUES (2, 1, 'lwq', 123456, '浏览器', '2019-01-08 11:11:11', 0, 2);
    INSERT INTO "sys_user" VALUES (3, 1, 'tjun', 123123, '田俊', '2018-01-01 12:22:35', 1, 3);
    INSERT INTO "sys_user" VALUES (4, 1, 'tttt', 123456, '通天塔', '', 1, 4);
    
    -- ----------------------------
    -- Indexes structure for table sys_user
    -- ----------------------------
    CREATE UNIQUE INDEX "pk"
    ON "sys_user" (
      "id" COLLATE BINARY ASC
    );
    
    PRAGMA foreign_keys = true;
    
    

    2. html(可直接复制下来运行)

    <!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>sqlite数据库测试,使用js操作sqlite数据库</p>
    <p>这里使用axios读取test.db文件,进行初始化数据库连接,</p>
    <p>查询速度不快,除非不想写后台要直接操作数据库,不然没什么用。</p>
    <p>具体效果可查看代码和控制台打印的数据。</p>
    
    <script>
    
        // 读取数据库数据
        axios.get("test.db", {responseType: 'arraybuffer'})
            .then(function (response) {
                let db = new window.SQL.Database(new Uint8Array(response.data));
                // 执行查询
                let s = new Date().getTime();
                let r = db.exec("SELECT * FROM sys_user WHERE status = 1;");
                let e = new Date().getTime();
                console.info("查询数据耗时:" + (e - s) + "ms");
                // 解析数据
                let obj = dbToObj(r);
                console.info(obj);
            })
            .catch(function (error) {
                console.info(error);
            });
    
        // 方法传入两个数组,第一个数组为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(/(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>
    
  • 相关阅读:
    1062 Talent and Virtue (25 分)
    1083 List Grades (25 分)
    1149 Dangerous Goods Packaging (25 分)
    1121 Damn Single (25 分)
    1120 Friend Numbers (20 分)
    1084 Broken Keyboard (20 分)
    1092 To Buy or Not to Buy (20 分)
    数组与链表
    二叉树
    时间复杂度与空间复杂度
  • 原文地址:https://www.cnblogs.com/lixingwu/p/10236640.html
Copyright © 2011-2022 走看看