使用CSS連接數據庫的方式

第使用CSS連接數據庫的方式某公司招聘需求如下:

我們正在尋求可以使用CSS連接數據庫的前端伙伴~

自從我上次開始一個高質量的發(fā)帖以來，已經有很長一段時間了，事實上，它已經很長一段時間了，那時候我的詞匯表中可能還沒有水帖這個詞。

為此，我受到了一個早期項目的啟發(fā)，該項目基于區(qū)塊鏈初創(chuàng)公司將投資者的臉投影到3D立方體上讓我想起了以前的互聯(lián)網，那時一切都很奇怪。

好漢不提當年勇。所以今天，我將討論如何管理我自己的新項目:sqlcss.xyz[1]

顧名思義，這就是使用CSS連接數據庫的方式。不幸的是，它只能在Chrome中工作，但你可以提供任何你喜歡的SQLite數據庫，并通過CSS查詢它。

它是如何工作的

首先我們需要用到一組被親切地稱為Houdini[2]的api，它讓你的瀏覽器能夠通過Javascript對象模型來控制CSS。換言之，這意味著您可以定制CSS樣式、添加定制屬性，等等。

可能這個作品最大的特性是CSSPaintWorklet[3]，它允許你在一個元素上繪制，就像你知道和喜歡的畫布一樣，并讓瀏覽器把它當作CSS中的圖像。這里有一些例子可以用來演示Houdini[4]。

然而，這個工作集只提供了WorkerAPI的一個子集，而且畫布上下文本身也被大量剝離。這樣做的實際結果是，您的自定義CSS繪制代碼提供了一個比您預期的更小的沙盒。

這意味著什么沒有網絡訪問權限，因此可以和fetch和XmlHttpRequest說再見了。在繪制上下文上沒有drawText功能。其他各種JSapi也消失了，以防你希望解決這些問題。

不過，不用擔心。并非一切都完了。讓我們把它分解成幾個步驟。

1.設置數據庫

這必須是第一步，以便理解概念證明是否可行。

首先我們會借助于sql.js[5]。它實際上是一個通過emscripten編譯成WebAssembly和老式ASM.js的SQLite版本。不幸的是，我們不能使用WASM版本，因為它必須通過網絡獲取二進制文件。ASM版本沒有這個限制，因為所有的代碼都可以在一個模塊中使用。

雖然PaintWorklet限制了worker內部的網絡訪問，但你仍然可以導入代碼，只要它是一個ES6模塊。這意味著文件中必須有一個導出語句。不幸的是，sql.js沒有ES6的版本，所以我自己修改了sql.js，使其能夠順利的被import進入項目。

現(xiàn)在到了關鍵時刻:我可以在我的工作包中建立一個數據庫嗎

constSQL=awaitinitSqlJs({

locateFile:file=`./${file}`,

constDB=newSQL.Database();

**成功了!**但沒有任何數據，所以我們來解決這個問題。

2.查詢數據庫

一開始最簡單的方法就是設置一些假數據,sql.js有兩個函數可以做到這一點。

DB.run('CREATETABLEtest(nameTEXTNOTNULL)')

DB.run(

'INSERTINTOtestVALUES(),(),(),()',

['A','B','C','D']

)

我有了測試表，里面有一些值。我應該能夠查詢這個并獲得這些值，盡管我不確定得到什么樣的結構化查詢結果。

constresult=DB.exec('SELECT*FROMtest')

console.log(result)

正如預期的那樣，結果已經出來了。不過，渲染展示通過CSS查詢數據庫的結果會更好。

3.渲染結果，最簡單的方法

我認為這就像在畫布上寫文本一樣。這有多難，對吧

classSqlDB{

asyncpaint(ctx,geom,properties){

constresult=DB.exec('SELECT*FROMtest');

ctx.font='32pxmonospace';

ctx.drawText(JSON.stringify(result),0,0,geom.width);

}

不，那樣就太簡單了。這里的上下文與畫布元素的上下文不同，它只提供了功能的一個子集。

當然，它仍然可以繪制路徑和曲線，所以缺乏方便的API是一個障礙，但這一切都不是問題。

4.不使用文本API創(chuàng)建文本

幸運的是，我們可以借助于opentype.js[6]所提供的解決方案。它可以解析一個字體文件，然后，給定一個文本字符串，生成每個字符的字母形式。這個操作的實際結果是一個表示字符串的路徑對象，然后可以將其呈現(xiàn)到上下文中。

這次我不必修改opentype庫來導入它，因為它已經可以從JSPM[7]中獲得。所以，如果你給JSPM一個npm包，它會自動生成一個ES6模塊，你可以直接導入到你的瀏覽器中。這是非常棒的，因為我真的不想為了一個有趣的項目而使用打包工具。

importopentypefrom'https://ga.jspm.io/npm:opentype.js@1.3.4/dist/opentype.module.js'

opentype.load('fonts/firasans.otf')

但這里有一個問題它想通過網絡加載字體，而我不能這樣做!嗨,挫敗了!

而且它還有一個接受數組緩沖區(qū)的解析方法。我將用base64編碼字體，然后在我的模塊中解碼它。

importopentypefrom'https://ga.jspm.io/npm:opentype.js@1.3.4/dist/opentype.module.js'

importbase64from'https://ga.jspm.io/npm:base64-js@1.5.1/index.js'

constfont='T1RUTwAKAIAAAwA...3dayslater...wAYABkAGgAbABwAIAKM'

exportdefaultopentype.parse(base64.toByteArray(font).buffer)

我告訴過你worklet也沒有處理base64字符串的api嗎atob和btoa都沒有!我也不得不為此找到一個普通的JS實現(xiàn)。

我把這段代碼放在它自己的文件中，因為它不太符合人體工程學必須在剩下的代碼旁邊使用大約200kb的編碼字體字符串。

這就是我為何要濫用ES模塊來加載我的字體的原因。

5.渲染結果，另一種簡單的方式

從現(xiàn)在起，所有繁重的工作都由opentype庫來完成，所以我所需要做的就是用一點數學知識來對齊。

importfontfrom'./font.js'

constSQL=awaitinitSqlJs({

locateFile:file=`./${file}`,

constDB=newSQL.Database();

DB.run('CREATETABLEtest(nameTEXTNOTNULL)')

DB.run(

'INSERTINTOtestVALUES(),(),(),()',

['A','B','C','D']

classSqlDB{

asyncpaint(ctx,geom,properties){

constquery=DB.exec('SELECT*FROMtest')

constresult=query[0].values.join(',')

constsize=48

constwidth=font.getAdvanceWidth(queryResults,size)

constpoint={

x:(geom.width/2)-(width/2),

y:geom.height/2

constpath=font.getPath(result,point.x,point.y,size)

path.draw(ctx)

registerPaint('sql-db',SqlDb)

最好再來一些HTML和CSS看看發(fā)生了什么。

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來查詢數據庫，那就更好了。事實上，這是我們可以在PaintWorker的上下文之外與其通信的唯一方式，因為沒有與Webworker一樣的消息傳遞API。

為此，需要一個定制的CSS屬性。定義inputProperties的好處是可以訂閱該屬性的更改，因此如果該屬性的值發(fā)生更改，它將重新呈現(xiàn)。不需要設置任何訂閱者自己。

classSqlDb{

staticgetinputProperties(){

return[

'--sql-query',

asyncpaint(ctx,geom,properties){

//...

constquery=DB.exec(String(properties.get('--sql-query')))

}

這些CSS屬性被稱為類型化屬性，但它們本質上被封裝在一個特殊的CSSProperty類中，而這個類本身并不是很有用。因此，你必須手動將其轉換為字符串或數字或其他類似的使用它，如上所述。

現(xiàn)在對CSS做一個快速調整。

main{

//...

--sql-query:SELECTnameFROMtest;

}

引號在這里被故意省略了，因為否則在將字符串傳遞給數據庫之前，我必須將它們從字符串中刪除。也就是說，這很有效!

任務完成!

如果你玩過sqlcss。你會注意到我并沒有滿足于此。在進行了一些重構之后，又進行了一些更改。

7.導入數據庫文件

硬編碼數據庫模式和實際數據，有點糟糕。它證明了這個概念，但我們肯定可以做得更好。

如果您可以查詢任何您喜歡的數據庫，只要您手邊有數據庫文件，那就太棒了。我只需要讀取這個文件并對其進行base64編碼，就像我對字體文件所做的那樣。

constfileInput=document.getElementById('db-file')

fileInput.onchange=()={

constreader=newFileReader()

reader.readAsDataURL(fileInput.files[0])

reader.onload=()={

document.documentElement.style.setProperty(

'--sql-database',

`url('${reader.result}')`

}

我為此做了一個額外的CSS屬性，在這個屬性中，您可以將SQLite數據庫作為base64編碼的數據URI提供。dataURI只是為了顯示并確保它對DOM是有效的,我將在Worker層面解析這些東西。

最后一步是使其更易于查詢，因為否則您必須進入調試器來操作元素的CSS。

8.編寫查詢語句

這可能是項目中最簡單的部分。自定義屬性對于分號有一點問題，而SQLite并不關心末尾的分號是否被省略，所以最簡單的做法是，如果在輸入中找到它，就刪除它。

constqueryInput=document.getElementById('db-query')

queryInput.onchange=()={

letquery=queryInput.value;

if(query.endsWith(';')){

query=query.slice(0,-1)

document.documentElement.style.setProperty(

'--sql-query',

queryInput.value

}

從現(xiàn)在開始，您可以使用CSS導入和瀏覽您自己的數據庫了!

我遺漏了一件事，就是所有這些查詢結果特別多的時候，如何更好的渲染展示的問題。如果查詢結果有很多，他們需要分開到單獨的行。這與本文的主題--使用CSS連接到數據庫并沒有太大關系，所以我認為在這里談論這個問題并不合適，但如果你想進一步了解這個荒謬的概念，git上的代碼都是可用的[8