SQL.js：在浏览器中创建和查询关系数据库

SQL锛屾垨缁撴瀯鍖栨煡璇㈣瑷€锛屾槸涓€绉嶇壒瀹氫簬棰嗗煙鐨勮瑷€锛屾棬鍦ㄨ闂拰鎿嶄綔鍏崇郴鏁版嵁搴撲腑鐨勬暟鎹€傚€熷姪SQL璇彞锛屾偍鍙互瀵瑰叧绯绘暟鎹簱鎵ц鍒涘缓銆佹洿鏂般€佹绱㈠拰鍒犻櫎鏁版嵁绛夋搷浣溿€傚叧绯绘暟鎹簱鏄竴绉嶆暟鎹ā鍨嬶紝瀹冧娇鐢ㄨ鍜屽垪鍦ㄨ〃涓粍缁囨暟鎹€傝櫧鐒跺彲鑳芥湁澶氱浣跨敤SQL鐨勫叧绯绘暟鎹簱绠＄悊绯荤粺锛屼絾鍑犱箮鎵€鏈夌郴缁熼兘璁捐涓烘湇鍔″櫒绔繘绋嬨€傚叾涓寘鎷細MySQLPostgreSQLSQLiteMSSQL鍦ㄦ湰鏁欑▼涓紝鎴戜滑灏嗚璁篠QL.js锛岃繖鏄竴涓狫avaScriptSQL搴擄紝鍙鎮ㄥ畬鍏ㄥ湪娴忚鍣ㄤ腑鍒涘缓鍜屾煡璇㈠叧绯绘暟鎹簱銆傛垜浠皢閫氳繃浠ヤ笅姝ラ鏉ヨВ閲婁粈涔堟槸SQL.js锛熸瘡涓儴鍒嗛兘鏈夎缁嗙殑渚嬪瓙銆備娇鐢⊿QL.js瀹夎锛堟祻瑙堝櫒鍜孨ode.js锛夌殑浼樼偣鍜岀己鐐圭紪鍐橲QL鏌ヨ鍜屽噯澶囧ソ鐨勮鍙ヤ粈涔堟槸SQL.js锛烻QL.js鏄竴涓狫avaScript搴擄紝鍏佽鎮ㄥ畬鍏ㄥ湪娴忚鍣ㄤ腑鍒涘缓鍜屾煡璇㈠叧绯绘暟鎹簱銆傚畠浣跨敤瀛樺偍鍦ㄦ祻瑙堝櫒鍐呭瓨涓殑铏氭嫙鏁版嵁搴撴枃浠讹紝鍥犳涓嶄細鎸佷箙淇濆瓨瀵规暟鎹簱鐨勬洿鏀广€傝搴撹繕浣跨敤Emscripten灏哠QLite缂栬瘧涓篧ebAssembly(Wasm)銆備娇鐢ㄦ鍔熻兘锛屾偍鍙互杞绘澗鍦板皢鐜版湁鐨凷QLite鏁版嵁搴撳鍏QL.js锛屽苟灏嗗湪SQL.js涓垱寤虹殑鏁版嵁搴撹浆鎹负SQLite銆備娇鐢⊿QL.js鐨勪紭鐐瑰拰缂虹偣浣跨敤SQL.js鏈夊嚑涓ソ澶勩€傚畠鏄负瀹㈡埛绔瀯寤虹殑锛屽畬鍏ㄥ湪瀹㈡埛绔伐浣滐紝杩欐剰鍛崇潃瀹冧笉闇€瑕佷换浣曟湇鍔″櫒绔繘绋嬪嵆鍙伐浣溿€傚畠姣擬ySQL銆丳ostgreSQL鍜屽叾浠栭渶瑕佺涓夋柟杞欢鎵嶈兘浣跨敤鐨勫伐鍏锋洿瀹规槗璁剧疆銆傚紑濮嬩娇鐢⊿QL.js灏卞儚鍦ㄧ幇鏈塇TML椤圭洰涓畨瑁卝Query涓€鏍风畝鍗曘€傚苟涓擲QL.js鎻愪緵浜嗗鎵ц鍖呭惈澶氫釜璇彞鐨勫崟涓猄QL瀛楃涓茬殑鏀寔锛屽涓嬪浘鎵€绀恒€俿qlstr="CREATETABLEtableName(colA,colB);";sqlstr+="INSERTINTOhelloVALUES(0,'hello');"...浣嗕篃鏈変竴涓噸瑕佺殑缂虹偣锛氬綋浣跨敤SQL.js鏃讹紝鏇存敼涓嶆槸鎸佷箙鐨勩€傚啀璇讳竴閬嶏細褰撴偍閲嶆柊鍔犺浇娴忚鍣ㄦ椂锛屽鏁版嵁搴撴墍鍋氱殑鎵€鏈夋洿鏀归兘灏嗘秷澶便€傝繖鏄洜涓篠QL.js浣跨敤瀛樺偍鍦ㄦ祻瑙堝櫒鍐呭瓨涓殑铏氭嫙鏁版嵁搴撴枃浠躲€備絾鏄紝鎮ㄥ彲浠ュ鍏ヤ换浣曠幇鏈夌殑SQLite鏂囦欢骞跺皢鍒涘缓鐨勬暟鎹簱瀵煎嚭涓篔avaScript绫诲瀷鐨勬暟缁勩€傚畨瑁匰QL.js娴忚鍣ㄥ畨瑁呭皢SQL.js闆嗘垚鍒颁竴涓柊鐨勫熀浜庡鎴风鐨勯」鐩腑闈炲父瀹规槗銆傛偍鍙互浠庡寘鍚獵DN鎴栦笅杞芥簮鏂囦欢骞跺皢瀹冧滑閾炬帴鍒版偍鐨勬爣璁伴〉闈㈠紑濮嬨€傞粯璁ゆ儏鍐典笅锛孲QL.js浣跨敤WebAssembly锛岄櫎浜咼avaScript搴撲箣澶栵紝瀹冭繕闇€瑕佸姞杞戒竴涓?wasm鏂囦欢銆傛偍鍙互浠庣綉缁滀笂涓嬭浇姝ゆ枃浠跺苟浣跨敤locateFile鍑芥暟灏嗘鏂囦欢鍔犺浇鍒版偍鐨勭綉椤典腑锛屽涓嬫墍绀恒€?!DOCTYPEhtml>鍦ㄤ笂闈㈢殑浠ｇ爜鍧椾腑锛屾垜浠娇鐢╥nitSqlJs寮傛鍔犺浇Wasm浜岃繘鍒舵枃浠跺苟鍦ㄥ姞杞芥墍闇€鏂囦欢鍚庡垵濮嬪寲SQL.js銆侼ode.js瀹夎鍦ㄥ熀浜嶯ode鐨勯」鐩腑瀹夎SQL.js涔熼潪甯哥畝鍗曘€傝瀹夎瀹冿紝鎮ㄥ彧闇€杩愯锛歯pminstallsql.js鎴栬€咃紝鎮ㄥ彲浠ヤ粠鍓嶉潰鐨勯摼鎺ヤ笅杞絪ql-wasm.js鍜宻ql-wasm.wasm锛屽苟浣跨敤Node.js鐨剅equire鍑芥暟灏嗗畠浠姞杞藉埌鎮ㄧ殑椤圭洰涓€傛澶栵紝鍦ㄥ熀浜庤妭鐐圭殑椤圭洰涓紝鎮ㄥ彲浠ヨ烦杩噇ocateFile鏂规硶鏉ュ姞杞絪ql-wasm.wasm鏂囦欢锛屽洜涓哄鏋滃畠涓庢偍姝ｅ湪澶勭悊鐨勬枃浠朵綅浜庡悓涓€鏂囦欢澶逛腑锛屽畠灏嗚嚜鍔ㄥ姞杞姐€傛墍浠ユ垜浠殑浠ｇ爜鐪嬭捣鏉ュ儚杩欐牱銆倂arinitSqlJs=require("./sql-wasm.js");initSqlJs().then(function(SQL){console.log("sql.js鍒濆鍖栶煄?);});缂栧啓SQL鏌ヨ鍜屽噯澶囧ソ鐨勮鍙ョ幇鍦ㄦ垜浠凡缁忓畬鎴愪簡瀹夎鍜屽垵濮嬪寲SQL.js鐨勬墍鏈夊繀瑕佹楠わ紝璁╂垜浠繁鍏ヤ簡瑙ｅ畠鐨勭敤娉曘€傚垱寤烘暟鎹簱涓嬮潰鐨勪唬鐮佸垱寤轰竴涓柊鐨勬暟鎹簱锛歝onstdb=newSQL.Database();鍊煎緱娉ㄦ剰鐨勬槸SQL.Database()鏂规硶鎺ュ彈涓€涓彲閫夊弬鏁版暟鎹紝瀹冨繀椤绘槸涓€涓猆int8Array浠ｈ〃涓€涓猄QLite鏁版嵁搴撴枃浠躲€備緥濡傦紝鍦∟ode.js涓紝鎴戜滑鍙互鍍忚繖鏍峰姞杞界幇鏈夌殑.sqlite鏂囦欢锛歭etfs=require("fs");letinitSqlJs=require("./sql-wasm.js");letfilebuffer=fs.readFileSync("/path/to/sample.sqlite");initSqlJs().then(function(SQL){//浣跨敤鎴戜滑鐜版湁鐨剆ample.sqlite鏂囦欢鍒涘缓涓€涓柊鏁版嵁搴揷onstdb=newSQL.Database(filebuffer);});鍦ㄤ笂闈㈢殑浠ｇ爜涓紝鎴戜滑浣跨敤鍐呯疆鐨凬ode.jsfs鍜岃矾寰勬ā鍧楁潵璇诲彇鎴戜滑鐜版湁鐨剆ample.sqlite鏂囦欢銆傝繍琛孲QL璇彞SQL璇彞鍙互鏄湪鏁版嵁搴撲腑鍒涘缓鎴栨绱竴鏉′俊鎭垨瀵圭幇鏈夋暟鎹墽琛屾搷浣滅殑璇锋眰銆備娇鐢⊿QL.js锛屾偍鍙互杞绘澗鍦拌繍琛屼竴鏉¤鍙ヨ€屾棤闇€璇诲彇鍏剁粨鏋溿€傝娉曞涓嬨€傛暟鎹簱杩愯锛坰tmt锛夛紱褰撶劧锛屽弬鏁皊tmt灏辨槸浣犵殑SQL璇彞銆備笅闈㈡槸涓€涓ず渚嬶紝璇存槑濡備綍鍦ㄦ垜浠殑鏁版嵁搴撲腑鍒涘缓涓€涓悕涓簎sers鐨勬柊琛紝鍏朵腑鍖呭惈ID銆佸鍚嶃€佺數璇濆彿鐮佸拰鍦板潃鍒椼€傚畠杩樺皢鍚戣琛ㄤ腑鎻掑叆涓€涓柊琛屻€俵etinitSqlJs=require("./sql-wasm.js");initSqlJs().then(function(SQL){constdb=newSQL.Database();//杩愯SQL鏌ヨ馃憞db.run("CREATETABLEusers(id,name,phone,address);");db.run(`INSERTINTOusers(id,name,phone,address)VALUES(1,'JohnDoe','+234-907788','12Igodan琛楅亾锛孫kitipupa')`);});PreparedSQLstatements鎮ㄥ彲浠ヤ娇鐢╬reparedstatements楂樻晥鍦伴噸澶嶆墽琛岀浉鍚屾垨鐩镐技鐨凷QL璇彞銆傚噯澶囧ソ鐨勮鍙ユ瘮杩愯SQL璇彞鐨勮В鏋愭椂闂存洿鐭紝鍥犱负鏌ヨ鐨勫噯澶囧彧瀹屾垚涓€娆°€傚畠浠浜庨槻姝QL娉ㄥ叆涔熼潪甯告湁鐢紝鍥犱负鎮ㄤ笉闇€瑕佽浆涔夊弬鏁板€硷紝鐒跺悗浣跨敤涓嶅悓鐨勫崗璁紶杈撹繖浜涘€笺€備娇鐢⊿QL.js锛屾垜浠繕鍙互浣跨敤.prepare()鏂规硶缂栧啓鍑嗗濂界殑璇彞锛歷arstmt=db.prepare(preparedStatement);涓嬮潰鑾峰彇鎴戜滑涔嬪墠鏁版嵁搴撲腑ID浠嬩簬1鍜?0涔嬮棿鐨勬墍鏈夌敤鎴风ず渚嬶細varstmt=db.prepare("SELECT*FROMusersWHEREidBETWEEN$startAND$end");stmt.bind({$start:1,$缁撴潫:2});while(stmt.step()){varrow=stmt.getAsObject();console.log("Hereisauserrow:"+JSON.stringify(row));}缂栧啓濂芥垜浠噯澶囧ソ鐨凷QL璇彞鍚庯紝鎴戜滑浣跨敤.bind()鏂规硶缁戝畾鎴戜滑璇彞闇€瑕佺殑鍊硷紙寮€濮嬪拰缁撴潫鍦ㄤ笂闈㈢殑渚嬪瓙涓級銆傛帴涓嬫潵锛屾垜浠皢浣跨敤while寰幆杩斿洖鎵€鏈夊彲鑳界殑琛屽苟灏嗗畠浠褰曞埌鎺у埗鍙般€傚皢鏁版嵁搴撳啓鍏ョ鐩楽QL.js杩樻彁渚涗簡涓€涓€夐」锛屽彲浠ラ€氳繃db.export()鏂规硶灏嗘暟鎹簱浣滀负.sqlite鏂囦欢瀵煎嚭/鍐欏叆纾佺洏銆傜粨鏋滃皢浣滀负Uint8Array杩斿洖锛屾偍鍙互浣跨敤Node.jsBuffer绫诲拰鏂囦欢绯荤粺鍖呭皢鏁版嵁搴撳啓鍏ョ鐩樸€倂arfs=require("fs");/***姝ゅ鍒涘缓鏁版嵁搴撶殑浠ｇ爜***///瀵煎嚭鏁版嵁搴擆煈噕ardata=db.export();varbuffer=newBuffer(data);fs.writeFileSync("new-db.sqlite",缂撳啿鍣?;杩愯涓婇潰鐨勪唬鐮佸悗锛屾偍搴旇浼氬湪椤圭洰鏍规枃浠跺す涓湅鍒颁竴涓悕涓簄ew-db.sqlite鐨勬柊鏂囦欢銆傛€荤粨鍦ㄦ湰鏂囦腑锛屾垜浠粙缁嶄簡SQL.js銆佸畠鎻愪緵鐨勭壒鎬т互鍙婂浣曞湪瀹為檯搴旂敤绋嬪簭涓娇鐢ㄥ畠銆傝櫧鐒禨QL.js鍙兘闈炲父閫傚悎鏋勫缓绂荤嚎浼樺厛鐨勫簲鐢ㄧ▼搴忥紝渚嬪璁颁簨鏈簲鐢ㄧ▼搴忥紝浣嗗鏋滄偍鎯充粠绠＄悊闈㈡澘绠＄悊鐢ㄦ埛鏁版嵁锛屾偍鍙兘闇€瑕佽€冭檻鍏朵粬鍏崇郴鏁版嵁搴擄紙MySQL銆丳ostgreSQL锛夈€?/p>