|
|
@@ -0,0 +1,105 @@
|
|
|
+<!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("chinese.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 chinese WHERE id between 13000 and 13010;");
|
|
|
+ let e = new Date().getTime();
|
|
|
+ document.write("查询数据耗时：" + (e - s) + "ms");
|
|
|
+ // 解析数据
|
|
|
+ let obj = dbToObj(r);
|
|
|
+ console.info(obj);
|
|
|
+ document.write('<table border="1">');
|
|
|
+ obj.forEach(
|
|
|
+ function (value) {
|
|
|
+ document.write('<tr>');
|
|
|
+ document.write('<td>'+value.id+'</td>');
|
|
|
+ document.write('<td>'+value.font+'</td>');
|
|
|
+ document.write('<td>'+value.type+'</td>');
|
|
|
+ document.write('<td>'+value.time+'</td>');
|
|
|
+ document.write('<td>'+value.author+'</td>');
|
|
|
+ var path='../res/';
|
|
|
+ path+=value.font+"_"+value.time+"_"+value.author+'_'+value.type;
|
|
|
+ path+='.png';
|
|
|
+ document.write('<td><img src='+path+"></td>");
|
|
|
+ document.write('</tr>');
|
|
|
+
|
|
|
+ }
|
|
|
+ );
|
|
|
+
|
|
|
+ document.write('</table>');
|
|
|
+
|
|
|
+ })
|
|
|
+ .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>
|
