搜索
首页web前端H5教程HTML 5离线存储之Web SQL
HTML 5离线存储之Web SQL
WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
May 17, 2016 am 09:09 AM
admin

本篇没有考虑异步,多线程及SQL注入

WebDatabase 规范中说这份规范不再维护了,原因是同质化(几乎实现者都选择了Sqlite),

且不说这些,单看在HTML5中如何实现离线数据的CRUD,最基本的用法(入门级别)

1,打开数据库

2,创建表

3,新增数据

4,更新数据

5,读取数据

6,删除数据

事实上,关键点在于如何拿到一个可执行SQL语句的上下文,

像创建表,删除表,CRUD操作等仅区别于SQL语句的写法.OK,貌似"SqlHelper"啊,换个名字,dataBaseOperator就它了

executeReader,executeScalar两个方法与executeNonQuery严重同质,

下边的代码产生定义了我们的dataBaseOperator"类",第二行

3-5行则定义打开数据库连接方法,"类方法",效果类似C#中的静态方法,直接类名.方法调用

6-15行则定义executeNonQuery方法,意指查询数据库,与executeReader方法和executeScalar方法同质,均可返回记录集

整个 dataBaseOperator就完整了,很简单,唯一要指出的是,测试以下代码时请选择一个支持HTML5的浏览器!如Google Chrome

<ol class="dp-xml">
<li class="alt"><span><span>//TODO;SQL注入   </span></span></li>
<li><span>  function dataBaseOperator() {};   </span></li>
<li class="alt">
<span> </span><span class="attribute">dataBaseOperator.openDatabase</span><span> = </span><span class="attribute-value">function</span><span> () {   </span>
</li>
<li><span>     return window.openDatabase("dataBaseUserStories", "1.0", "dataBase used for user stories", 2 * 1024 * 1024);   </span></li>
<li class="alt"><span> }   </span></li>
<li>
<span> </span><span class="attribute">dataBaseOperator.executeNonQuery</span><span> = </span><span class="attribute-value">function</span><span> (sql, parameters, callback) {   </span>
</li>
<li class="alt">
<span>     var </span><span class="attribute">db</span><span> = </span><span class="attribute-value">this</span><span>.openDatabase();   </span>
</li>
<li><span>     db.transaction(function (trans) {   </span></li>
<li class="alt"><span>         trans.executeSql(sql, parameters, function (trans, result) {  </span></li>
<li><span>             callback(result);  </span></li>
<li class="alt"><span>         }, function (trans, error) {  </span></li>
<li><span>             throw error.message;  </span></li>
<li class="alt"><span>         });  </span></li>
<li><span>     });  </span></li>
<li class="alt"><span> }  </span></li>
<li>
<span> </span><span class="attribute-value">dataBaseOperator</span><span class="attribute">dataBaseOperator.executeReader</span><span> = dataBaseOperator.executeNonQuery;  </span>
</li>
<li class="alt">
<span> </span><span class="attribute-value">dataBaseOperator</span><span class="attribute">dataBaseOperator.executeScalar</span><span> = dataBaseOperator.executeNonQuery; </span>
</li>
</ol>

有了"SqlHeper",再看业务处理层(Business Logic Layer)

业务处理类包括了创建表,删除表,新增记录,删除记录以及读取记录,这里没有写更新,实际上先删后增一样滴,即使要写也不复杂

<ol class="dp-xml">
<li class="alt"><span><span>function userStoryProvider() {   </span></span></li>
<li>
<span>     </span><span class="attribute">this.createUserStoryTable</span><span> = </span><span class="attribute-value">function</span><span> () {   </span>
</li>
<li class="alt"><span>         dataBaseOperator.executeNonQuery("CREATE TABLE tbUserStories(id integer primary key autoincrement,role,ability,benefit,name,importance,estimate,notes)");   </span></li>
<li><span>     };   </span></li>
<li class="alt">
<span>     </span><span class="attribute">this.dropUserStoryTable</span><span> = </span><span class="attribute-value">function</span><span> () {   </span>
</li>
<li><span>         dataBaseOperator.executeNonQuery("DROP TABLE tbUserStories");   </span></li>
<li class="alt"><span>     };   </span></li>
<li>
<span>     </span><span class="attribute">this.addUserStory</span><span> = </span><span class="attribute-value">function</span><span> (role, ability, benefit, name, importance, estimate, notes) {   </span>
</li>
<li class="alt"><span>         dataBaseOperator.executeNonQuery("INSERT INTO tbUserStories(role,ability,benefit,name,importance,estimate,notes) SELECT ?,?,?,?,?,?,?",  </span></li>
<li><span>              [role, ability, benefit, name, importance, estimate, notes], function (result) {  </span></li>
<li class="alt"><span>                  //alert("rowsAffected:" + result.rowsAffected);  </span></li>
<li><span>               });  </span></li>
<li class="alt"><span>     };  </span></li>
<li>
<span>     </span><span class="attribute">this.removeUserStory</span><span> = </span><span class="attribute-value">function</span><span> (id) {  </span>
</li>
<li class="alt">
<span>         dataBaseOperator.executeNonQuery("DELETE FROM tbUserStories WHERE </span><span class="attribute">id</span><span> = ?", [id], function (result) {  </span>
</li>
<li><span>             //alert("rowsAffected:" + result.rowsAffected);  </span></li>
<li class="alt"><span>          });  </span></li>
<li><span>     };  </span></li>
<li class="alt">
<span>     </span><span class="attribute">this.loadUserStories</span><span> = </span><span class="attribute-value">function</span><span> (callback) {  </span>
</li>
<li><span>         dataBaseOperator.executeReader("SELECT * FROM tbUserStories", [], function (result) {  </span></li>
<li class="alt"><span>             callback(result);  </span></li>
<li><span>         });  </span></li>
<li class="alt"><span>         //result.insertId,result.rowsAffected,result.rows24      };  </span></li>
<li><span> } </span></li>
</ol>

createUserStoryTable,dropUserStoryTable,addUserStory,removeUserStory又是严重同质,不说了,仅SQL语句不同而已

但loadUserStories与上述四个方法均不同,是因为它把SQLResultSetRowList返回给了调用者,这里仍然是简单的"转发",页面在使用的时候需要首先创建provider实例(使用类似C#中的类实例上的方法调用)

<ol class="dp-xml"><li class="alt"><span><span>var </span><span class="attribute">_userStoryProvider</span><span> = </span><span class="attribute-value">new</span><span> userStoryProvider(); </span></span></li></ol>

之后就可以调用该实例的方法了,仅举个例子,具体代码省去

<ol class="dp-xml">
<li class="alt"><span><span>function loadUserStory() {      </span></span></li>
<li><span>try {          </span></li>
<li class="alt"><span>_userStoryProvider.loadUserStories(function (result) {             </span></li>
<li>
<span> var </span><span class="attribute">_userStories</span><span> = </span><span class="attribute-value">new</span><span> Array();              </span>
</li>
<li class="alt">
<span>for (var </span><span class="attribute">i</span><span> = </span><span class="attribute-value">0</span><span>; i </span><span class="tag"><span> </span><span class="tag-name">result.rows.length</span><span>; i++) {                 </span></span>
</li>
<li>
<span> var </span><span class="attribute">o</span><span> = </span><span class="attribute-value">result</span><span>.rows.item(i);                </span>
</li>
<li class="alt">
<span> var </span><span class="attribute">_userStory</span><span> = </span><span class="attribute-value">new</span><span> userStory(o.id, o.name, o.role, o.ability, o.benefit, o.importance, o.estimate, o.notes);                 </span>
</li>
<li><span> _userStories.push(_userStory);           </span></li>
<li class="alt"><span>   }//...      </span></li>
<li><span>} catch (error) {       </span></li>
<li class="alt"><span>   alert("_userStoryProvider.loadUserStories:" + error);      </span></li>
<li><span>}} </span></li>
</ol>

得到_userStories这个数组后,就没有下文了,是自动创建HTML还是绑定到EXT,发挥想象力吧...继续

userStory是一个自定义的"Model" "类"·

<ol class="dp-xml">
<li class="alt"><span><span>function userStory(id, name, role, ability, benefit, importance, estimate, notes) {   </span></span></li>
<li>
<span>     </span><span class="attribute">this.id</span><span> = id;   </span>
</li>
<li class="alt">
<span>     </span><span class="attribute">this.name</span><span> = name;   </span>
</li>
<li>
<span>     </span><span class="attribute">this.role</span><span> = role;   </span>
</li>
<li class="alt">
<span>     </span><span class="attribute">this.ability</span><span> = ability;   </span>
</li>
<li>
<span>     </span><span class="attribute">this.benefit</span><span> = benefit;   </span>
</li>
<li class="alt">
<span>     </span><span class="attribute">this.importance</span><span> = importance;   </span>
</li>
<li>
<span>     </span><span class="attribute">this.estimate</span><span> = estimate;   </span>
</li>
<li class="alt">
<span>     </span><span class="attribute">this.notes</span><span> = notes;  </span>
</li>
<li><span> }; </span></li>
</ol>

最后贴出应用的代码,业务相关的代码,不看也罢,谁家与谁家的都不同

<ol class="dp-xml">
<li class="alt"><span><span>/*    </span></span></li>
<li><span>     http://stackoverflow.com/questions/2010892/storing-objects-in-html5-localstorage    </span></li>
<li class="alt"><span>     http://www.w3.org/TR/webdatabase/#sqlresultset    </span></li>
<li><span>     http://html5doctor.com/introducing-web-sql-databases/    </span></li>
<li class="alt"><span>     http://stackoverflow.com/questions/844885/sqlite-insert-into-with-unique-names-getting-id    </span></li>
<li><span>  */    </span></li>
<li class="alt">
<span> var </span><span class="attribute">_userStoryProvider</span><span> = </span><span class="attribute-value">new</span><span> userStoryProvider();    </span>
</li>
<li><span> $(document).ready(function () {    </span></li>
<li class="alt"><span>     loadUserStory();   </span></li>
<li><span>    </span></li>
<li class="alt"><span>     /* 添加用户故事 */   </span></li>
<li><span>     $("#btnAdd").click(function () {   </span></li>
<li class="alt">
<span>         var </span><span class="attribute">item</span><span> = { role: $("#role").val(), ability: $("#ability").val(), benefit: $("#benefit").val(), name: $("#Name").val(), importance: $("#Importance").val(), estimate: $("#Estimate").val(), notes: $("#Notes").val() };   </span>
</li>
<li><span>         try {   </span></li>
<li class="alt"><span>             _userStoryProvider.addUserStory(item.role, item.ability, item.benefit, item.name, item.importance, item.estimate, item.notes);   </span></li>
<li><span>             loadUserStory();   </span></li>
<li class="alt"><span>         } catch (error) {   </span></li>
<li><span>             alert("_userStoryProvider.addUserStory:" + error);   </span></li>
<li class="alt"><span>         }   </span></li>
<li><span>     });   </span></li>
<li class="alt"><span>    </span></li>
<li><span>     /* 创建用户故事表 */   </span></li>
<li class="alt"><span>     $("#btnCreateTable").click(function () {          try {   </span></li>
<li><span>             _userStoryProvider.createUserStoryTable();   </span></li>
<li class="alt"><span>         } catch (error) {   </span></li>
<li><span>             alert("_userStoryProvider.createUserStoryTable:" + error);   </span></li>
<li class="alt"><span>         }   </span></li>
<li><span>     });   </span></li>
<li class="alt"><span>    </span></li>
<li><span>     /* 删除用户故事表 */   </span></li>
<li class="alt"><span>     $("#btnDropTable").click(function () {   </span></li>
<li><span>         try {   </span></li>
<li class="alt"><span>             _userStoryProvider.dropUserStoryTable();   </span></li>
<li><span>         } catch (error) {   </span></li>
<li class="alt"><span>             alert("_userStoryProvider.dropUserStoryTable:" + error);   </span></li>
<li><span>         }   </span></li>
<li class="alt"><span>     });   </span></li>
<li><span> });   </span></li>
<li class="alt"><span>    </span></li>
<li><span> /* 加载用户故事 */   </span></li>
<li class="alt"><span> function loadUserStory() {   </span></li>
<li><span>     try {   </span></li>
<li class="alt"><span>         _userStoryProvider.loadUserStories(function (result) {   </span></li>
<li>
<span>             var </span><span class="attribute">_userStories</span><span> = </span><span class="attribute-value">new</span><span> Array();   </span>
</li>
<li class="alt">
<span>             for (var </span><span class="attribute">i</span><span> = </span><span class="attribute-value">0</span><span>; i </span><span class="tag"><span> </span><span class="tag-name">result.rows.length</span><span>; i++) {   </span></span>
</li>
<li>
<span>                 var </span><span class="attribute">o</span><span> = </span><span class="attribute-value">result</span><span>.rows.item(i);   </span>
</li>
<li class="alt">
<span>                 var </span><span class="attribute">_userStory</span><span> = </span><span class="attribute-value">new</span><span> userStory(o.id, o.name, o.role, o.ability, o.benefit, o.importance, o.estimate, o.notes);   </span>
</li>
<li><span>                 _userStories.push(_userStory);   </span></li>
<li class="alt"><span>             }   </span></li>
<li><span>    </span></li>
<li class="alt"><span>             if (!_userStories) return;   </span></li>
<li>
<span>             var </span><span class="attribute">table</span><span> = </span><span class="attribute-value">document</span><span>.getElementById("user_story_table");   </span>
</li>
<li class="alt"><span>             if (!table) return;   </span></li>
<li>
<span>             var </span><span class="attribute">_trs</span><span> = </span><span class="attribute-value">table</span><span>.getElementsByTagName("tr");   </span>
</li>
<li class="alt">
<span>             var </span><span class="attribute">_len</span><span> = </span><span class="attribute-value">_trs</span><span>.length;   </span>
</li>
<li>
<span>             for (var </span><span class="attribute">i</span><span> = </span><span class="attribute-value">0</span><span>; i </span><span class="tag"><span> </span><span class="tag-name">_len</span><span>; i++) {   </span></span>
</li>
<li class="alt"><span>                 table.removeChild(_trs[i]);   </span></li>
<li><span>             }   </span></li>
<li class="alt"><span>             {   </span></li>
<li>
<span>                 var </span><span class="attribute">tr</span><span> = </span><span class="attribute-value">document</span><span>.createElement("tr");   </span>
</li>
<li class="alt"><span>                 tr.setAttribute("class", "product_backlog_row header");   </span></li>
<li><span>                 {   </span></li>
<li class="alt"><span>                     tr.appendChild(CreateTd("id", "id"));   </span></li>
<li><span>                     tr.appendChild(CreateTd("name", "name"));   </span></li>
<li class="alt"><span>                     tr.appendChild(CreateTd("importance", "importance"));   </span></li>
<li><span>                     tr.appendChild(CreateTd("estimate", "estimate"));   </span></li>
<li class="alt"><span>                     tr.appendChild(CreateTd("description", "role"));   </span></li>
<li><span>                     tr.appendChild(CreateTd("notes", "notes"));   </span></li>
<li class="alt"><span>                     tr.appendChild(CreateTd("delete", "delete"));   </span></li>
<li><span>                 };   </span></li>
<li class="alt"><span>                 table.appendChild(tr);   </span></li>
<li><span>             }   </span></li>
<li class="alt">
<span>             for (var </span><span class="attribute">i</span><span> = </span><span class="attribute-value">0</span><span>; i </span><span class="tag"><span> </span><span class="tag-name">_userStories.length</span><span>; i++) {   </span></span>
</li>
<li><span>                 CreateRow(table, _userStories[i]);   </span></li>
<li class="alt"><span>             }   </span></li>
<li><span>         });   </span></li>
<li class="alt"><span>     } catch (error) {   </span></li>
<li><span>         alert("_userStoryProvider.loadUserStories:" + error);   </span></li>
<li class="alt"><span>     }   </span></li>
<li><span> }   </span></li>
<li class="alt"><span> function CreateRow(table, userStory) {   </span></li>
<li><span>     if (!table) return;  </span></li>
<li class="alt"><span>     if (!userStory) return;   </span></li>
<li><span>     {   </span></li>
<li class="alt">
<span>         var </span><span class="attribute">tr</span><span> = </span><span class="attribute-value">document</span><span>.createElement("tr");   </span>
</li>
<li><span>         tr.setAttribute("class", "product_backlog_row");   </span></li>
<li class="alt"><span>         {   </span></li>
<li><span>             tr.appendChild(CreateTd("id", userStory.id));   </span></li>
<li class="alt"><span>             tr.appendChild(CreateTd("name", userStory.name));   </span></li>
<li><span>             tr.appendChild(CreateTd("importance", userStory.importance));   </span></li>
<li class="alt"><span>             tr.appendChild(CreateTd("estimate", userStory.estimate));   </span></li>
<li><span>             tr.appendChild(CreateTd("description", userStory.role));   </span></li>
<li class="alt"><span>             tr.appendChild(CreateTd("notes", userStory.notes));   </span></li>
<li><span>             tr.appendChild(CreateDeleteButton("delete_button", userStory.id));   </span></li>
<li class="alt"><span>         };   </span></li>
<li><span>         table.appendChild(tr);   </span></li>
<li class="alt"><span>     }   </span></li>
<li><span> }  </span></li>
<li class="alt"><span> function CreateTd(name, value) {  </span></li>
<li>
<span>     var </span><span class="attribute">td</span><span> = </span><span class="attribute-value">document</span><span>.createElement("td");  </span>
</li>
<li class="alt"><span>     td.setAttribute("class", "user_story " + name);  </span></li>
<li>
<span>     </span><span class="attribute">td.innerText</span><span> = </span><span class="attribute-value">value</span><span>;  </span>
</li>
<li class="alt"><span>     return td;  </span></li>
<li><span> };  </span></li>
<li class="alt"><span> function CreateDeleteButton(name, id) {  </span></li>
<li>
<span>     var </span><span class="attribute">td</span><span> = </span><span class="attribute-value">document</span><span>.createElement("td");  </span>
</li>
<li class="alt"><span>     td.setAttribute("class", "user_story " + name);  </span></li>
<li><span>     /* 删除用户故事 */  </span></li>
<li class="alt">
<span>     </span><span class="attribute">td.innerHTML</span><span> = </span><span class="attribute-value">"<a><span>###\" </span><span class="attribute">title</span><span>=\"delete\" </span><span class="attribute">onclick</span><span>=\"javascript:_userStoryProvider.removeUserStory(\'" + id + "');removeRow(this);\"</span><span class="tag">></span><span class="tag">></span><span class="tag">></span><span>delete</span><span class="tag"></span><span class="tag-name">a</span><span class="tag">></span><span>";  </span></a></span>
</li>
<li><span>     return td;  </span></li>
<li class="alt"><span> }  </span></li>
<li><span> function removeRow(obj) {  </span></li>
<li class="alt"><span>     document.getElementById("user_story_table").deleteRow(obj.parentNode.parentNode.rowIndex);  </span></li>
<li><span>     //obj.parentNode.parentNode.removeNode(true);  </span></li>
<li class="alt"><span> }   </span></li>
</ol>

看完代码复习下基本功课

1,WindowDatabase接口,注意openDatabase方法

<ol class="dp-xml">
<li class="alt"><span><span>[Supplemental, NoInterfaceObject]  </span></span></li>
<li><span>interface WindowDatabase {   </span></li>
<li class="alt"><span> Database openDatabase(in DOMString name, in DOMString version, in DOMString displayName, in unsigned long estimatedSize, in optional DatabaseCallback creationCallback);};  </span></li>
<li><span>Window implements WindowDatabase;  </span></li>
<li class="alt"><span>[Supplemental, NoInterfaceObject]  </span></li>
<li><span>interface WorkerUtilsDatabase {   </span></li>
<li class="alt"><span> Database openDatabase(in DOMString name, in DOMString version, in DOMString displayName, in unsigned long estimatedSize, in optional DatabaseCallback creationCallback);  DatabaseSync openDatabaseSync(in DOMString name, in DOMString version, in DOMString displayName, in unsigned long estimatedSize, in optional DatabaseCallback creationCallback);};  </span></li>
<li><span>WorkerUtils implements WorkerUtilsDatabase;  </span></li>
<li class="alt">
<span>[</span><span class="attribute">Callback</span><span>=</span><span class="attribute-value">FunctionOnly</span><span>, NoInterfaceObject]  </span>
</li>
<li><span>interface DatabaseCallback {    </span></li>
<li class="alt"><span>void handleEvent(in Database database);  </span></li>
<li><span>}; </span></li>
</ol>

2,SQLTransaction接口,关注executeSql方法

<ol class="dp-xml">
<li class="alt"><span><span>typedef sequence</span><span class="tag"><span class="tag-name">any</span><span class="tag">></span><span> ObjectArray;  </span></span></span></li>
<li><span>interface SQLTransaction {   </span></li>
<li class="alt"><span> void executeSql(in DOMString sqlStatement, in optional ObjectArray arguments, in optional SQLStatementCallback callback, in optional SQLStatementErrorCallback errorCallback);};  </span></li>
<li>
<span>[</span><span class="attribute">Callback</span><span>=</span><span class="attribute-value">FunctionOnly</span><span>, NoInterfaceObject]  </span>
</li>
<li class="alt"><span>interface SQLStatementCallback {  </span></li>
<li><span>  void handleEvent(in SQLTransaction transaction, in SQLResultSet resultSet);};  </span></li>
<li class="alt">
<span>[</span><span class="attribute">Callback</span><span>=</span><span class="attribute-value">FunctionOnly</span><span>, NoInterfaceObject]  </span>
</li>
<li><span>interface SQLStatementErrorCallback {   </span></li>
<li class="alt"><span> boolean handleEvent(in SQLTransaction transaction, in SQLError error);  </span></li>
<li><span>}; </span></li>
</ol>

3,最后看下SQLResultSetRowList定义

<ol class="dp-xml">
<li class="alt"><span><span>interface SQLResultSetRowList {  </span></span></li>
<li><span>  readonly attribute unsigned long length;    </span></li>
<li class="alt"><span>getter any item(in unsigned long index);  </span></li>
<li><span>}; </span></li>
</ol>

和SQLResultSet定义

<ol class="dp-xml">
<li class="alt"><span><span>interface SQLResultSet {  </span></span></li>
<li><span>   readonly attribute long insertId;  </span></li>
<li class="alt"><span>   readonly attribute long rowsAffected;  </span></li>
<li><span>   readonly attribute SQLResultSetRowList rows;  </span></li>
<li class="alt"><span> }; <br></span></li>
</ol>
声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
相关文章
如何将音频添加到我的HTML5网站上？如何将音频添加到我的HTML5网站上？Mar 10, 2025 pm 03:01 PM

本文解释了如何使用＆lt; audio＆gt;元素，包括用于格式选择的最佳实践（MP3，OGG Vorbis），文件优化和JavaScript控件用于播放。 它强调使用多个音频f

如何使用HTML5页面可见性API检测页面何时可见？如何使用HTML5页面可见性API检测页面何时可见？Mar 13, 2025 pm 07:51 PM

本文讨论了使用HTML5页面可见性API来检测页面可见性，提高用户体验并优化资源使用情况。关键方面包括暂停媒体，减少CPU负载以及基于可见性变化管理分析。

如何使用视口元标记来控制移动设备上的页面缩放？如何使用视口元标记来控制移动设备上的页面缩放？Mar 13, 2025 pm 08:00 PM

本文讨论了使用视口元标记来控制移动设备上的页面缩放，重点是宽度和初始尺度之类的设置，以获得最佳响应和性能。

如何将HTML5表单用于用户输入？如何将HTML5表单用于用户输入？Mar 10, 2025 pm 02:59 PM

本文解释了如何创建和验证HTML5表格。 它详细介绍了＆gt;元素，输入类型（文本，电子邮件，编号等）和属性（必需，模式，最小，最大）。 HTML5的优势比旧方法形成

如何使用地理位置API处理用户位置隐私和权限？如何使用地理位置API处理用户位置隐私和权限？Mar 18, 2025 pm 02:16 PM

本文讨论了使用GeOlocation API管理用户位置隐私和权限，并强调要求权限，确保数据安全性并遵守隐私法律的最佳实践。

如何使用HTML5和JavaScript创建互动游戏？如何使用HTML5和JavaScript创建互动游戏？Mar 10, 2025 pm 06:34 PM

本文使用JavaScript详细介绍了创建Interactive HTML5游戏。 它涵盖了游戏设计，HTML结构，CSS样式，JavaScript逻辑（包括事件处理和动画）以及音频集成。 必需的JavaScript库（Phaser，Pi

如何将HTML5拖放API用于交互式用户界面？如何将HTML5拖放API用于交互式用户界面？Mar 18, 2025 pm 02:17 PM

本文介绍了如何使用HTML5拖放API来创建交互式用户界面，详细介绍了使元素可拖动的步骤，处理关键事件并通过自定义反馈来增强用户体验。它还讨论了一个常见的陷阱

如何使用HTML5 Websockets API进行客户端和服务器之间的双向通信？如何使用HTML5 Websockets API进行客户端和服务器之间的双向通信？Mar 12, 2025 pm 03:20 PM

本文解释了HTML5 Websockets API，用于实时双向客户服务器通信。 它详细详细介绍了客户端（JavaScript）和服务器端（Python/Flask）的实现，以应对可伸缩性，状态管理，一个挑战

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序，用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

显示更多

热门文章

R.E.P.O.能量晶体解释及其做什么（黄色晶体）
2 周前By尊渡假赌尊渡假赌尊渡假赌
仓库：如何复兴队友
4 周前By尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险：如何获得巨型种子
4 周前By尊渡假赌尊渡假赌尊渡假赌
击败分裂小说需要多长时间？
3 周前ByDDD
R.E.P.O.保存文件位置：在哪里以及如何保护它？
3 周前ByDDD
显示更多

热工具

DVWA

DVWA

Damn Vulnerable Web App (DVWA) 是一个PHP/MySQL的Web应用程序，非常容易受到攻击。它的主要目标是成为安全专业人员在合法环境中测试自己的技能和工具的辅助工具，帮助Web开发人员更好地理解保护Web应用程序的过程，并帮助教师/学生在课堂环境中教授/学习Web应用程序安全。DVWA的目标是通过简单直接的界面练习一些最常见的Web漏洞，难度各不相同。请注意，该软件中

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

PhpStorm Mac 版本

PhpStorm Mac 版本

最新（2018.2.1 ）专业的PHP集成开发工具

安全考试浏览器

安全考试浏览器

Safe Exam Browser是一个安全的浏览器环境，用于安全地进行在线考试。该软件将任何计算机变成一个安全的工作站。它控制对任何实用工具的访问，并防止学生使用未经授权的资源。

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

显示更多

热门话题

gmail邮箱登陆入口在哪里
7334
9
Java教程
1627
14
CakePHP 教程
1352
46
Laravel 教程
1264
25
PHP教程
1209
29
显示更多