123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105 |
- <!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>
|