使用CSS连接数据库的方式(2)-木庄网络博客

这就是我为何要滥用ES模块来加载我的字体的原因。

5. 渲染结果，另一种简单的方式

从现在起，所有繁重的工作都由opentype库来完成，所以我所需要做的就是用一点数学知识来对齐。

import font from './font.js'

const SQL = await initSqlJs({
  locateFile: file => `./${file}`,
});
const DB = new SQL.Database();
DB.run('CREATE TABLE test (name TEXT NOT NULL)')
DB.run(
  'INSERT INTO test VALUES (?), (?), (?), (?)',
  ['A', 'B', 'C', 'D']
)
class SqlDB {
  async paint(ctx, geom, properties) {
    const query = DB.exec('SELECT * FROM test')
    const result = query[0].values.join(', ')
    const size = 48
    const width = font.getAdvanceWidth(queryResults, size)
    const point = {
      x: (geom.width / 2) - (width / 2),
      y: geom.height / 2
    }
    const path = font.getPath(result, point.x, point.y, size)
    path.draw(ctx)
  }
}
registerPaint('sql-db', SqlDb)

最好再来一些HTML和CSS看看发生了什么。

<html>
  <head>
    <script>
      CSS.paintWorklet.addModule('./cssdb.js')
    </script>
    <style>
      main {
        width: 100vw;
        height: 100vh;
        background: paint(sql-db);
      }
    </style>
  </head>
  <body>
    <main></main>
  </body>
</html>

成功了!但这里没有足够的CSS，而且查询是硬编码的。

6. 通过CSS查询

如果必须使用CSS来查询数据库，那就更好了。事实上，这是我们可以在Paint Worker的上下文之外与其通信的唯一方式，因为没有与Web worker一样的消息传递API。

为此，需要一个定制的CSS属性。定义inputProperties的好处是可以订阅该属性的更改，因此如果该属性的值发生更改，它将重新呈现。不需要设置任何订阅者自己。

class SqlDb {
  static get inputProperties() {
    return [
      '--sql-query',
    ]
  }
  async paint(ctx, geom, properties) {
    // ...
    const query = DB.exec(String(properties.get('--sql-query')))
}

这些CSS属性被称为类型化属性，但它们本质上被封装在一个特殊的CSSProperty类中，而这个类本身并不是很有用。因此，你必须手动将其转换为字符串或数字或其他类似的使用它，如上所述。

现在对CSS做一个快速调整。

main {
  // ...
  --sql-query: SELECT name FROM test;
}

引号在这里被故意省略了，因为否则在将字符串传递给数据库之前，我必须将它们从字符串中删除。也就是说，这很有效!

任务完成!

如果你玩过sqlcss。你会注意到我并没有满足于此。在进行了一些重构之后，又进行了一些更改。

7. 导入数据库文件

硬编码数据库模式和实际数据，有点糟糕。它证明了这个概念，但我们肯定可以做得更好。

如果您可以查询任何您喜欢的数据库，只要您手边有数据库文件，那就太棒了。我只需要读取这个文件并对其进行base64编码，就像我对字体文件所做的那样。

const fileInput = document.getElementById('db-file')

fileInput.onchange = () => {
  const reader = new FileReader()
  reader.readAsDataURL(fileInput.files[0])
  reader.onload = () => {
    document.documentElement.style.setProperty(
        '--sql-database',
        `url('${reader.result}')`
    )
  }
}

我为此做了一个额外的CSS属性，在这个属性中，您可以将SQLite数据库作为base64编码的数据URI提供。data URI只是为了显示并确保它对DOM是有效的,我将在Worker层面解析这些东西。

最后一步是使其更易于查询，因为否则您必须进入调试器来操作元素的CSS。

8. 编写查询语句

这可能是项目中最简单的部分。自定义属性对于分号有一点问题，而SQLite并不关心末尾的分号是否被省略，所以最简单的做法是，如果在输入中找到它，就删除它。

const queryInput = document.getElementById('db-query')

queryInput.onchange = () => {
  let query = queryInput.value;
  if (query.endsWith(';')) {
    query = query.slice(0, -1)
  }
    document.documentElement.style.setProperty(
    '--sql-query',
    queryInput.value
  )
}

从现在开始，您可以使用CSS导入和浏览您自己的数据库了!

我遗漏了一件事，就是所有这些查询结果特别多的时候，如何更好的渲染展示的问题。如果查询结果有很多，他们需要分开到单独的行。这与本文的主题-- 使用CSS连接到数据库并没有太大关系，所以我认为在这里谈论这个问题并不合适，但如果你想进一步了解这个"荒谬"的概念， git上的代码都是可用的 [8] 。

译者补充

SQLite是由C语言编写的嵌入式轻量级数据库，广泛用于IOS和Android的App中。若有读者想要在浏览器端应用SQLite，推荐使用SQLite的WebAssembly版--sql.js，基本与SQLite的使用没有太多区别。在实际项目使用中，还需特别注意SQLite的安全性问题。
为方便展示，特此截取本文作者所实现的CSS连接SQLite的部分demo如下:

关于文中所提到的jspm,这里引用其官网的介绍如下:jspm为导入映射提供了模块CDN和包管理，允许任何来自NPM的包都可以直接在浏览器中加载，无需进一步的处理。