正文
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(/\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>
