web前端培训如何使用CSS连接数据库

以下文章来源于前端开发

它是如何工作的?

首先我们需要用到一组被亲切地称为Houdini的api，它让你的浏览器能够通过Javascript对象模型来控制CSS。换言之，这意味着您可以定制CSS样式、添加定制属性，等等。

可能这个作品最大的特性是CSS Paint Worklet，它允许你在一个元素上绘制，就像你知道和喜欢的画布一样，并让浏览器把它当作CSS中的图像。这里有一些例子可以用来演示Houdini。

然而，这个工作集只提供了Worker API的一个子集，而且画布上下文本身也被大量剥离。这样做的实际结果是，您的自定义CSS绘制代码提供了一个比您预期的更小的沙盒。

这意味着什么? 没有网络访问权限，因此可以和fetch和XmlHttpRequest说再见了。在绘制上下文上没有drawText功能。其他各种JS api也消失了，以防你希望解决这些问题。

不过，不用担心。并非一切都完了。让我们把它分解成几个步骤。

1. 设置数据库

这必须是第一步，以便理解概念证明是否可行。

首先我们会借助于sql.js。它实际上是一个通过emscripten编译成WebAssembly和老式ASM.js的SQLite版本。不幸的是，我们不能使用WASM版本，因为它必须通过网络获取二进制文件。ASM版本没有这个限制，因为所有的代码都可以在一个模块中使用。

虽然PaintWorklet限制了worker内部的网络访问，但你仍然可以导入代码，只要它是一个ES6模块。这意味着文件中必须有一个导出语句。不幸的是，sql.js没有ES6的版本，所以我自己修改了sql.js，使其能够顺利的被import进入项目。

现在到了关键时刻:我可以在我的工作包中建立一个数据库吗?

const SQL = await initSqlJs({

locateFile: file =