最近看到一个使用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(/\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>

js -- 操作sqlite数据库的更多相关文章

  1. Electron中使用sql.js操作SQLite数据库

    推荐sql.js——一款纯js的sqlite工具. 一.关于sql.js sql.js(https://github.com/kripken/sql.js)通过使用Emscripten编译SQLite ...

  2. Java操作Sqlite数据库-jdbc连接

    Java操作Sqlite数据库步骤: 1. 导入Sqlite jdbc 本文使用sqlite-jdbc-3.7.2.jar,下载地址 http://pan.baidu.com/s/1kVHAGdD 2 ...

  3. 无废话Android之android下junit测试框架配置、保存文件到手机内存、android下文件访问的权限、保存文件到SD卡、获取SD卡大小、使用SharedPreferences进行数据存储、使用Pull解析器操作XML文件、android下操作sqlite数据库和事务（2）

    1.android下junit测试框架配置 单元测试需要在手机中进行安装测试 (1).在清单文件中manifest节点下配置如下节点 <instrumentation android:name= ...

  4. 使用node js 操作 Mysql 数据库

    使用node js 操作 Mysql 数据库 http://www.nodejs.org/ //node js 数据库操作 MySQL //使用https://github.com/felixge/n ...

  5. EF6操作Sqlite数据库的项目兼容性问题

    vs2010无法正确打开2015创建的项目里面操作Sqlite数据库时使用EF6创建的edmx文件(会显示空白)   但是可以正常查询 vs2015无法正确打开2010创建的项目里面操作Sqlite数 ...

  6. EF操作sqlite数据库时的项目兼容性问题

    问题:vs2015打不开vs2010建的操作sqlite的实体数据模型edmx文件 原因: 当前电脑必须先安装:驱动库及sqlite的vs拓展 正常情况下安装驱动和拓展后,vs2015就应该可以正常打 ...

  7. JDBC访问及操作SQLite数据库

    SQLite 是一个开源的嵌入式关系数据库,其特点是高度便携.使用方便.结构紧凑.高效.可靠. 与其他数据库管理系统不同,SQLite 的安装和运行非常简单,在大多数情况下,只要确保SQLite的二进 ...

  8. UWP: 在 UWP 中使用 Entity Framework Core 操作 SQLite 数据库

    在应用中使用 SQLite 数据库来存储数据是相当常见的.在 UWP 平台中要使用 SQLite,一般会使用 SQLite for Universal Windows Platform 和 SQLit ...

  9. Android中操作SQLite数据库

    我又回到了安卓的学习当中,忙来忙去终于忙的差不多有时间做自己的事情了,这感觉实在是太棒了!!本来想写android的控件以及他们的监视器的,但是我查了查android的手册,基本上都能查到,但是查有些 ...

随机推荐

  1. malloc分配内存的结构

    在C/C++,我们都可以使用malloc进行分配大小,单位是字节.   malloc实际分配的内存大小和传入的参数其实是不同的.   实际分配的内存大小>传入的参数大小. malloc分配的内存 ...

  2. H5_0026：使用CSS里的user-select属性控制用户在页面上选中的内容

    CSS里的user-select属性用来禁止用户用鼠标在页面上选中文字.图片等,也就是,让页面内容不可选.也可以只允许用户选中文字,或者全部都放开,用户可以同时选中文字.还包括文本里的图片.视频等其它 ...

  3. JS变量+作用域

    基本类型-栈内存 保存基本类型的变量保存的是值本身 引用类型-堆内存 保存引用类型的变量保存的并不是对象本身,而是一个指向该对象的引用地址 引用类型判断对象是否相等 function equalObj ...

  4. ASP.NET Identity系列教程-2【Identity入门】

    https://www.cnblogs.com/r01cn/p/5177708.html13 Identity入门 Identity is a new API from Microsoft to ma ...

  5. ArcScene 创建三维模型数据

    1. 拉伸 添加面元素图层 在图层上右键----属性 , 设置拉伸值,可以输入固定值或者选择字段值. 2. 导入   3DMAX 的 3ds 文件,和 Google SketchUp 的skp文件, ...

  6. 关于Django图片上传

    首先要设置settings # 上传文件 MEDIA_ROOT = 'media' # 项目下的目录 MEDIA_URL = "/media/" # 跟STATIC_URL类似,指 ...

  7. gazebo仿真踩坑--rviz中设定机器人的目标位置，move_base后台日志报错

    启动仿真环境及各种节点(amcl,move_base,map_server)后,在rviz中设定机器人的目标位置,后台日志报错 [ INFO] [1571974242.864525935, 40.51 ...

  8. centos 7 源码安装openresty

    Openresty 官网 http://openresty.org Openresty源码下载页面 http://openresty.org/en/download.html Openresty 简易 ...

  9. 记录 Docker 的学习过程 （日志篇）

    日志收集 elk 在node3上操作 docker pull sebp/elk:5610 node3# sysctl vm.max_map_count=262144 node3# docker run ...

  10. vue里使用elementUI里的下拉树表格，如何定义个性化的子表格？

    最近项目写到一个业务,首先需要展示各类分组的基本信息,然后需要点击每个分组展示该分组下子的所有具体信息 一开始我是打算用tab来展示就是首先父分组的名称就是各个不同的tab按钮,然后点击按钮再展示不同 ...