charles_wang8888
charles_wang8888

HTML5 本地数据库（SQLite） 示例

 按照国内一HTML5先行者的例子仿写了一个用HTML5 API来操作本地SQLite数据库的例子，感觉这个功能蛮好玩的，但是还不够强大，尤其浏览器支持力度不够：

HTML代码：

  
  
  
  
    
   
   
   
   
  1. <!DOCTYPE html> 
    2. 
   
   
   
   
  2. <head> 
    3. 
   
   
   
   
  3. <meta charset="UTF-8"> 
    4. 
   
   
   
   
  4. <title>使用HTML5本地数据库DEMO</title> 
    5. 
   
   
   
   
  5. <script type="text/javascript" src="js/operateDB.js"></</script> 
    6. 
   
   
   
   
  6. </head> 
    7. 
   
   
   
   
  7.  
    8. 
   
   
   
   
  8. <body onload="init();"> 
    9. 
   
   
   
   
  9. <h1>使用HTML5本地数据库DEMO</h1> 
    10. 
   
   
   
   
  10. <table> 
    11. 
   
   
   
   
  11.     <tr><td>姓名：</td><td><input type="text" id="name"></td></tr> 
    12. 
   
   
   
   
  12.     <tr><td>资料：</td><td><input type="text" id="info"></td></tr> 
    13. 
   
   
   
   
  13.     <tr> 
    14. 
   
   
   
   
  14.         <td></td> 
    15. 
   
   
   
   
  15.         <td><input type="button" value="保存" onclick="saveData();"></td> 
    16. 
   
   
   
   
  16.     </tr> 
    17. 
   
   
   
   
  17. </table> 
    18. 
   
   
   
   
  18. <hr> 
    19. 
   
   
   
   
  19. <table id="datatable" border="1"></table> 
    20. 
   
   
   
   
  20. <p id="msg"></p> 
    21. 
   
   
   
   
  21. </body> 
    22.

javascript 封装了许多方法，比如保存数据到数据库，更新，同步下方的列表等。

  
  
  
  
    
   
   
   
   
  1. /* 
    2. 
   
   
   
   
  2.  * This file is confidential by Charles.Wang Copyright belongs to Charles.wang 
    3. 
   
   
   
   
  3.  * You can make contact with Charles.Wang (charles_wang888@126.com) 
    4. 
   
   
   
   
  4.  */ 
    5. 
   
   
   
   
  5.   
    6. 
   
   
   
   
  6.  //这个是下方的表格元素 
    7. 
   
   
   
   
  7.  var datatable = null; 
    8. 
   
   
   
   
  8.   
    9. 
   
   
   
   
  9.  //创建一个数据库对象 
    10. 
   
   
   
   
  10.  //4个参数分别是 数据库名,版本号，数据库的描述，数据库大小 
    11. 
   
   
   
   
  11.  var db = openDatabase('MyData','','My Database',102400); 
    12. 
   
   
   
   
  12.   
    13. 
   
   
   
   
  13.  //init()方法，用于页面下方表格元素的引用，并且显示所有的数据库记录 
    14. 
   
   
   
   
  14.  function init(){ 
    15. 
   
   
   
   
  15.     //取得下方的表格元素，并且赋值给全局变量 
    16. 
   
   
   
   
  16.     datatable = document.getElementById("datatable"); 
    17. 
   
   
   
   
  17.      
    18. 
   
   
   
   
  18.     //显示所有已经在数据库中存储的记录 
    19. 
   
   
   
   
  19.     showAllData(); 
    20. 
   
   
   
   
  20.  } 
    21. 
   
   
   
   
  21.   
    22. 
   
   
   
   
  22.  //removeAllData()方法，用于移除所有的表格中的当前显示数据（它并不去除数据库记录） 
    23. 
   
   
   
   
  23.  function removeAllData(){ 
    24. 
   
   
   
   
  24.     //首先，它将<table>下面的所有子元素全部清除 
    25. 
   
   
   
   
  25.     //所以，这里它对于datatable组件进行遍历 
    26. 
   
   
   
   
  26.     for(var i=datatable.childNodes.length-1;i>=0;i--){ 
    27. 
   
   
   
   
  27.         datatable.removeChild(datatable.childNodes(i)); 
    28. 
   
   
   
   
  28.     } 
    29. 
   
   
   
   
  29.      
    30. 
   
   
   
   
  30.     //全部去除之后，现在需要显示这个表头部分<tr>里面有多个<th> 
    31. 
   
   
   
   
  31.     //创建表头行到文档树中 
    32. 
   
   
   
   
  32.     var tr= document.createElement('tr'); 
    33. 
   
   
   
   
  33.     //表头行的第一个表头 
    34. 
   
   
   
   
  34.     var th1=document.createElement('th'); 
    35. 
   
   
   
   
  35.     //表头行的第二个表头 
    36. 
   
   
   
   
  36.     var th2=document.createElement('th'); 
    37. 
   
   
   
   
  37.     //表头行的第三个表头 
    38. 
   
   
   
   
  38.     var th3=document.createElement('th'); 
    39. 
   
   
   
   
  39.     //设置这3个表头的文本 
    40. 
   
   
   
   
  40.     th1.innerHTML="姓名"; 
    41. 
   
   
   
   
  41.     th2.innerHTML="资料"; 
    42. 
   
   
   
   
  42.     th3.innerHTML="时间"; 
    43. 
   
   
   
   
  43.     //将这些表头依次放在表头行中 
    44. 
   
   
   
   
  44.     tr.appendChild(th1); 
    45. 
   
   
   
   
  45.     tr.appendChild(th2); 
    46. 
   
   
   
   
  46.     tr.appendChild(th3); 
    47. 
   
   
   
   
  47.     //将这个新创建的表头行挂到表格中 
    48. 
   
   
   
   
  48.     datatable.appendChild(tr); 
    49. 
   
   
   
   
  49.  } 
    50. 
   
   
   
   
  50.   
    51. 
   
   
   
   
  51.  //构建指定数据库行的数据对应的HTML文本。传入参数：数据库结果集中的某一行记录 
    52. 
   
   
   
   
  52.  function showData(row){ 
    53. 
   
   
   
   
  53.      //构建一个表行用于取得当前所要的信息 
    54. 
   
   
   
   
  54.      var tr= document.createElement('tr'); 
    55. 
   
   
   
   
  55.      //创建第一列，这一列是姓名 
    56. 
   
   
   
   
  56.      var td1=document.createElement('td'); 
    57. 
   
   
   
   
  57.      //填充第一列的信息为该行的name 
    58. 
   
   
   
   
  58.      td1.innerHTML=row.name; 
    59. 
   
   
   
   
  59.      //创建第二列，这一列是留言 
    60. 
   
   
   
   
  60.      var td2=document.createElement('td'); 
    61. 
   
   
   
   
  61.      //填充第一列的信息为该行的message 
    62. 
   
   
   
   
  62.      td2.innerHTML=row.info; 
    63. 
   
   
   
   
  63.     //创建第三列，这一列是日期 
    64. 
   
   
   
   
  64.      var td3=document.createElement('td'); 
    65. 
   
   
   
   
  65.      //创建一个日期对象 
    66. 
   
   
   
   
  66.      var t = new Date(); 
    67. 
   
   
   
   
  67.      t.setTime(row.time); 
    68. 
   
   
   
   
  68.      //将日期的标准形式和国际化日期形式分别设置给当前列 
    69. 
   
   
   
   
  69.      td3.innerHTML=t.toLocaleString()+" "+t.toLocaleTimeString(); 
    70. 
   
   
   
   
  70.      //吧这三列挂到当前行中 
    71. 
   
   
   
   
  71.      tr.appendChild(td1); 
    72. 
   
   
   
   
  72.      tr.appendChild(td2); 
    73. 
   
   
   
   
  73.      tr.appendChild(td3); 
    74. 
   
   
   
   
  74.      //让这个表格在后面加上这一行 
    75. 
   
   
   
   
  75.      datatable.appendChild(tr); 
    76. 
   
   
   
   
  76.  } 
    77. 
   
   
   
   
  77.   
    78. 
   
   
   
   
  78.  //这个函数用于显示所有的行到表格中，这些行是从数据库中拿出来的 
    79. 
   
   
   
   
  79.  function showAllData(){ 
    80. 
   
   
   
   
  80.     //开启SQLite数据库事务,它用一个回调函数作为参数表明要执行的语句 
    81. 
   
   
   
   
  81.     db.transaction(function(tx){ 
    82. 
   
   
   
   
  82.         //首先它创建一个数据库表，里面有3个字段 
    83. 
   
   
   
   
  83.         tx.executeSql('CREATE TABLE IF NOT EXISTS InfoData(name TEXT,info TEXT,time INTEGER)',[]); 
    84. 
   
   
   
   
  84.         //创建一个查询语句用来查询数据库表的所有记录（这个由于是所有查询，所以不需要预编译语句和参数 (第二个参数)） 
    85. 
   
   
   
   
  85.         //然后定义了一个回调函数，表明对于结果集的处理 
    86. 
   
   
   
   
  86.         tx.executeSql('SELECT * FROM InfoData',[],function(tx,rs){ 
    87. 
   
   
   
   
  87.              
    88. 
   
   
   
   
  88.             //对于结果集，首先，在获取它之前移除页面上的<table>的所有数据 
    89. 
   
   
   
   
  89.             removeAllData(); 
    90. 
   
   
   
   
  90.             //遍历结果集，对于每一行，依次调用showData来在table上创建对于的html文本 
    91. 
   
   
   
   
  91.             for(var i=0;i<rs.rows.length;i++){ 
    92. 
   
   
   
   
  92.                 //对于item(i)，也就是某一行记录，我们显示其内容到页面的表格中（构建对应的HTML片断） 
    93. 
   
   
   
   
  93.                 showData(rs.rows.item(i)); 
    94. 
   
   
   
   
  94.             } 
    95. 
   
   
   
   
  95.         }); 
    96. 
   
   
   
   
  96.     } 
    97. 
   
   
   
   
  97.   
    98. 
   
   
   
   
  98.     ); 
    99. 
   
   
   
   
  99.  } 
    100. 
   
   
   
   
  100.   
    101. 
   
   
   
   
  101.  //这个函数用于添加一条记录到数据库中，这些信息有些是从页面获得的，有些是系统生成的。 
    102. 
   
   
   
   
  102.  function addData(name,info,time){ 
    103. 
   
   
   
   
  103.     //开启一个数据库事务 
    104. 
   
   
   
   
  104.     //回调函数是一个有参数的插入语句，可以看到我们插入到表InfoData中，插入的内容也就是参数传递进来的内容 
    105. 
   
   
   
   
  105.     db.transaction(function(tx){ 
    106. 
   
   
   
   
  106.          
    107. 
   
   
   
   
  107.         //插入的语句是个模板语句 
    108. 
   
   
   
   
  108.         //插入成功的回调就是在控制台上输入一行日志 
    109. 
   
   
   
   
  109.         tx.executeSql('INSERT INTO InfoData VALUES(?,?,?)' , [name,info,time],function(tx,rs){ 
    110. 
   
   
   
   
  110.             console.log("成功保存数据!"); 
    111. 
   
   
   
   
  111.         }, 
    112. 
   
   
   
   
  112.         //插入失败的回调就是在控制台上输入一行错误日志 
    113. 
   
   
   
   
  113.         function(tx,error){ 
    114. 
   
   
   
   
  114.             console.log(error.source+"::"+error.message); 
    115. 
   
   
   
   
  115.         }); 
    116. 
   
   
   
   
  116.     } 
    117. 
   
   
   
   
  117.      
    118. 
   
   
   
   
  118.     ); 
    119. 
   
   
   
   
  119.  } 
    120. 
   
   
   
   
  120.   
    121. 
   
   
   
   
  121.  //保存用户的当前输入，这个是作为点击页面上”保存“按钮的事件处理函数 
    122. 
   
   
   
   
  122.  function saveData(){ 
    123. 
   
   
   
   
  123.     //从HTML页面中取得2个输入框的文本 
    124. 
   
   
   
   
  124.     var name=document.getElementById('name').value; 
    125. 
   
   
   
   
  125.     var info=document.getElementById('info').value; 
    126. 
   
   
   
   
  126.     //得到当前的系统时间 
    127. 
   
   
   
   
  127.     var time= new Date().getTime(); 
    128. 
   
   
   
   
  128.     //将用户名，用户信息，当前时间存到数据库中 
    129. 
   
   
   
   
  129.     addData(name,info,time); 
    130. 
   
   
   
   
  130.     //更新下方<p id="msg">的表格显示 
    131. 
   
   
   
   
  131.     showAllData(); 
    132. 
   
   
   
   
  132.  } 
    133.

 

我在Google Chrome上做了测试，以下是截图：

Chrome我使用的版本是最新版的，假定我安装到了C:\Documents and Settings\charles.wang\Local Settings\Application Data\Google\Chrome

那么SQLite数据库就安装到了$CHROME_HOME\User Data\Default\databases中

这个目录中databases.db是当前用户的所有创建的数据库的配置，而file__0目录则是数据库表文件目录：

 

 

我们使用SQLite管理工具打开这2个文件，就可以很清楚的看到：

 

在Databases.db中配置了所用到的数据库：

这和我们js中的设定一样：

  
  
  
  
    
   
   
   
   
  1. //创建一个数据库对象 
    2. 
   
   
   
   
  2.  //4个参数分别是 数据库名,版本号，数据库的描述，数据库大小 
    3. 
   
   
   
   
  3.  var db = openDatabase('MyData','','My Database',102400); 
    4. 
   
   
   
   
  4.   
    5.

 

而当我们打开数据库文件，则可以看到：

这些数据库中的记录正是我们在页面上所展示的。

 

 

局限性：

可惜，我测试了下程序员最喜欢用的Firefox浏览器（版本号12），可惜它并不支持这种本地数据库SQLite，如图(我打开了Firebug的console)：

希望以后这个问题可以得到改善，毕竟用Firefox的人还是很多的，尤其程序员。

你可能感兴趣的:(html5,sqlite,本地数据库)

  • 金融、教育等行业如何高效利用wangEditor实现word文档网页化编辑？ 2501_90699850 金融wordumeditor粘贴wordueditor粘贴wordueditor复制wordueditor上传word图片ueditor导入word
    要求：开源，免费，技术支持编辑器：wangEditor前端：vue2,vue3,vue-cli,html5后端：java,jsp,springboot,asp.net,php,asp,.netcore,.netmvc,.netform群体：学生,个人用户,外包,自由职业者,中小型网站,博客,场景：数字门户,数字中台,站群,内网，外网，信创国产化环境，web截屏行业：医疗，教育，建筑，政府，党政，国
  • 网页编辑器能否满足Word公式与图片的直接复制粘贴？ 2501_90699800 编辑器wordumeditor粘贴wordueditor粘贴wordueditor复制wordueditor上传word图片ueditor导入word
    要求：开源，免费，技术支持编辑器：百度ueditor前端：vue2,vue3,vue-cli,react,html5用户体验：Ctrl+V快捷键操作功能：导入Word,导入Excel,导入PPT(PowerPoint),导入PDF,复制粘贴word,导入微信公众号内容,web截屏平台：Windows,macOS,Linux,RedHat,CentOS,Ubuntu,中标麒麟,银河麒麟,统信UOS,
  • HTML5响应式使用css媒体查询 前段技术人 html5css媒体
    HTML负责搭建页面结构，CSS负责样式设计，并且通过媒体查询实现了较好的响应式效果，能够适应不同屏幕尺寸下面就是写了一个详细的实例。CSS部分*{margin:0;padding:0;box-sizing:border-box;}*是通配选择器，会选中页面上的所有元素。margin:0;将所有元素的外边距设置为0。padding:0;将所有元素的内边距设置为0。box-sizing:border
  • linux自律 第 40 天 嵌入式大大白 数据库
    在学习了sqlite3数据库的增删改查之后，我开始做了一个基于web服务端的商品查询系统，将商品的图片，名称，id，详细描述和关键词等都放入了该数据库中，利用该数据库和html构建的网页来完成该项目。该项目首先需要设计出登录系统，登录需要密码和账号，所以需要注册，我打算在注册的时候使用数据库，将注册的信息放在数据库中。然后使用账号密码登录的时候，输入的账号密码在请求报文中，以post的形式发出来，
  • sql与html 就很对 sqlhtmljvm
    sql与htmlsqlite3sqlsql_callbacksql_dicthtmlhtml01ser02sersql_workhtml_ser03.htmlwebser06ser012.html011.html013.html015.html03.html04.html05.html06.htmlsqlite3sql//sqlite3_open//sqlite3_exec//sqlite3_cl
  • localStorage在上面位置？数据存放文件名是什么？ 2301_79698214 htmljava
    在上述代码中，数据并不是以传统文件的形式存放在某个具体的文件里，而是存储在浏览器的localStorage中。localStorage是HTML5新增的一个会话存储对象，它用于临时保存同一窗口（或标签页）的数据，在关闭窗口或标签页后数据仍然存在。数据存储位置和文件名存储位置：localStorage是浏览器提供的一个存储机制，数据存储在浏览器的本地存储区域，不同的浏览器存储位置不同，例如：Chro
  • 移动端IOS的H5页面被键盘顶起后，底部有一大片空白区域的解决方法 不怕麻烦的鹿丸 浏览器HTML5JavaScript前端html5javascript
    在移动端开发中，当使用HTML5(特别是在Vue.js框架下)构建应用时，经常会遇到键盘弹出导致页面内容被顶起的问题。当键盘收起后，页面未能自动恢复到原来的位置。当键盘弹出时，你可以通过JavaScript监听键盘的显示和隐藏事件，并相应地调整页面的滚动位置。exportdefault{mounted(){window.addEventListener('focusin',this.handleF
  • 使用sqlite创建数据库 @云初 sqlite数据库database
    使用sqlite创建数据库#sqlite3.exe数据库名.dbSQLiteversion3.36.02021-06-1818:36:39Enter".help"forusagehints.sqlite>在sqlite里面创建一张表并添加数据#.databases#.tables#createtableperson(idint,namevarchar(20),addressvarchar(20))
  • 能否在编辑器中一键导入Word文档？ 2501_90646763 umeditor粘贴wordueditor粘贴wordueditor复制wordueditor上传word图片ueditor导入wordueditor导入pdfueditor导入ppt
    要求：开源，免费，技术支持编辑器：百度ueditor前端：vue2,vue3,vue-cli,react,html5用户体验：Ctrl+V快捷键操作功能：导入Word,导入Excel,导入PPT(PowerPoint),导入PDF,复制粘贴word,导入微信公众号内容,web截屏平台：Windows,macOS,Linux,RedHat,CentOS,Ubuntu,中标麒麟,银河麒麟,统信UOS,
  • 超越传统！wangEditor编辑器如何实现excel、ppt、pdf及word一键导入？ 2501_90699780 编辑器excelpowerpointumeditor粘贴wordueditor粘贴wordueditor复制wordueditor上传word图片
    要求：开源，免费，技术支持编辑器：wangEditor前端：vue2,vue3,vue-cli,html5后端：java,jsp,springboot,asp.net,php,asp,.netcore,.netmvc,.netform群体：学生,个人用户,外包,自由职业者,中小型网站,博客,场景：数字门户,数字中台,站群,内网，外网，信创国产化环境，web截屏行业：医疗，教育，建筑，政府，党政，国
  • qt子线程读取读取数据库 skywalker818__ 数据库qt
    这里写自定义目录标题主要目的是为了记录自己踩过的坑。在子线程中读取数库内容时，按照在子线程中的run函数中创造数据的链接并查询，在第一次使用子线程的时候，可以正常运行，在重复使用的时候，则可能会报错：下面为子线程的run函数：```cppvoidrun(){QSqlDatabase*db=newQSqlDatabase(QSqlDatabase::addDatabase("QSQLITE"));Q
  • HTML 元素和有效 DOCTYPES 智慧浩海 HTMLhtml前端
    HTML元素-有效DOCTYPES下面的表格列出了所有的HTML5/HTML4.01/XHTML元素，以及它们会出现在什么文档类型(!DOCTYPE)中：HTML4.01/XHTML1.0TagHTML5TransitionalStrictFramesetXHTML1.1YesYesYesYesYesYesYesYesYesYesNoYesYesYesYesYesYesYesYesYesNoYes
  • Python 视频爬取教程 小白教程 pythonPythonPython视频爬取教程Python视频爬取Python教程Python视频教程
    文章目录前言基本原理环境准备Python安装选择Python开发环境安装必要库示例1：爬取简单直链视频示例2：爬取基于HTML5的视频（以某简单视频网站为例）前言以下是一个较为完整的Python视频爬取教程，包含基本原理、不同网站的爬取示例以及注意事项。基本原理视频爬取本质上是模拟浏览器向服务器发送请求，获取包含视频信息的网页内容，解析出视频的真实下载地址，然后将视频文件下载到本地。一般会用到re
  • 基于.NET MVC实现H5页面调用手机摄像头扫描二维码完整方案 Bart_Lu .netmvc
    一、前言在移动端Web开发中，二维码扫描功能已成为常见需求。本文将介绍如何在ASP.NETMVC框架下，通过HTML5技术调用手机摄像头实现二维码扫描功能，并提供完整的代码实现方案。二、技术选型前端库：使用ZXing-js（支持浏览器二维码解析）后端框架：ASP.NETMVC5浏览器API：MediaDevicesAPI三、实现步骤1.准备工作在MVC项目中引入所需库：html运行HTML2.创建
  • 芯片制造、汽车制造行业网站，如何用插件增强富文本编辑器的WORD粘贴功能？ 全武凌(荆门泽优) 金融编辑器wordumeditor粘贴wordueditor粘贴wordueditor复制wordueditor上传word图片
    要求：开源，免费，技术支持编辑器：百度ueditor前端：vue2,vue3,vue-cli,react,html5用户体验：Ctrl+V快捷键操作功能：导入Word,导入Excel,导入PPT(PowerPoint),导入PDF,复制粘贴word,导入微信公众号内容,web截屏平台：Windows,macOS,Linux,RedHat,CentOS,Ubuntu,中标麒麟,银河麒麟,统信UOS,
  • 金融行业网页编辑器对WORD图文混排有哪些特殊需求？ 全武凌(荆门泽优) 金融编辑器wordumeditor粘贴wordueditor粘贴wordueditor复制wordueditor上传word图片
    要求：开源，免费，技术支持编辑器：百度ueditor前端：vue2,vue3,vue-cli,react,html5用户体验：Ctrl+V快捷键操作功能：导入Word,导入Excel,导入PPT(PowerPoint),导入PDF,复制粘贴word,导入微信公众号内容,web截屏平台：Windows,macOS,Linux,RedHat,CentOS,Ubuntu,中标麒麟,银河麒麟,统信UOS,
  • 金融行业Vue应用如何利用wangEditor实现WORD文档高效上传？ 2501_90699640 金融vue.jswordumeditor粘贴wordueditor粘贴wordueditor复制wordueditor上传word图片
    要求：开源，免费，技术支持编辑器：百度ueditor前端：vue2,vue3,vue-cli,react,html5用户体验：Ctrl+V快捷键操作功能：导入Word,导入Excel,导入PPT(PowerPoint),导入PDF,复制粘贴word,导入微信公众号内容,web截屏平台：Windows,macOS,Linux,RedHat,CentOS,Ubuntu,中标麒麟,银河麒麟,统信UOS,
  • 【新生必会】30个较难Python脚本，建议收藏。 .Boss. 信息可视化python人工智能算法开发语言机器学习
    本篇较难，建议优先学习上篇；20个硬核Python脚本-CSDN博客接上篇文章，对于Pyhon的学习，上篇学习的结束相信大家对于Pyhon有了一定的理解和经验，学习完上篇文章之后再研究研究剩下的30个脚本你将会有所成就！加油！目录21、数据库连接-SQLite22、图像处理-Pillow23、图形界面-Tkinter24、文本生成-Faker25、加密和解密-cryptography26、Sock
  • 前端学习路线：从零基础到初级工程师的完整指南（2025最新版） 超浪的晨 前端学习
    前言作为连接设计与技术的核心岗位，前端开发在数字化时代持续释放强大生命力。本路线图专为初学者设计，通过「渐进式学习路径」+「实战项目驱动」的模式，助你系统掌握现代前端开发技能体系。一、基础筑基阶段（4-6周）三大核心基石HTML5语义化标签（）表单验证与多媒体支持SEO基础与无障碍访问CSS3Flex/Grid布局（重点掌握）动画与过渡（@keyframes+transition）响应式设计（媒体
  • 数据库：SQLite/MySQL/PostgreSQL 的破圈之战 程序员
    数据库类型对比维度SQLiteMySQLPostgreSQL类型嵌入式数据库关系型数据库管理系统(RDBMS)对象-关系型数据库(ORDBMS)架构无服务端，单文件存储客户端-服务器架构客户端-服务器架构事务支持ACID兼容（默认启用）ACID兼容（需使用InnoDB引擎）完整ACID兼容并发处理写操作全局锁行级锁+MVCC(InnoDB)多版本并发控制(MVCC)扩展性单机，适合轻量级应用支持主
  • 2025前端面试题超全面解析（附答案与深度扩展） 北辰alk 前端前端
    文章目录一、HTML篇（扩展版）1.**HTML5语义化标签的实际应用场景**2.**WebComponents实战：如何封装一个自定义按钮组件？**3.**WebWorker的用途与限制**二、CSS篇（扩展版）1.**CSS盒模型详解：border-boxvscontent-box**2.**CSS动画性能优化技巧**3.**CSS预处理器（Sass/Less）核心功能对比**三、JavaSc
  • SQLite？低调不是小众... 架构文摘JGWZ sqlite数据库学习后端
    前几天在一个群里看到一位同学说：“SQLite这么小众的数据库，到底是什么人在用啊？”首先要说的是SQLite可不是小众的数据库，相反，SQLite是世界上装机量最多的数据库，远超MySQL，只不过比较低调而已。低调到我想在官网上找一个好看的用来当插图的图片都找不到，只能截一张官网首页来撑一撑，看起来十分朴素。我最早听说SQLite是刚毕业工作的时候，我们部门做微软内容管理产品的二次开发，其中有一
  • HTML深度解读 Small踢倒coffee_氕氘氚 经验分享笔记
    ##引言HTML（HyperTextMarkupLanguage）是构建网页的基础语言。自1991年由TimBerners-Lee发明以来，HTML已经经历了多次版本更新，从HTML1.0到HTML5，每一次更新都带来了新的特性和功能。本文将深入探讨HTML的核心概念、结构、标签、语义化以及HTML5的新特性。##一、HTML的核心概念###1.1什么是HTML？HTML是一种标记语言，用于创建和
  • PyQt6嵌入HTML5内容教程 mosquito_lover1 pythonpyqthtml5
    在PyQt6中嵌入HTML5内容可以通过QWebEngineView实现。QWebEngineView是一个基于Chromium的浏览器引擎，能够渲染HTML5内容。以下是一个简单的示例，展示如何在PyQt6中嵌入HTML5页面：1.安装PyQt6和PyQt6-WebEnginepipinstallPyQt6PyQt6-WebEngine2.创建PyQt6应用程序并嵌入HTML5内容imports
  • Python+Peewee 中 Model 操作的常见方法 爱搬砖的程序猿. python数据库
    Peewee是一个轻量级的PythonORM（对象关系映射）库，它允许开发者使用Python类和对象来与数据库进行交互。在Peewee中，Model是一个核心概念，代表数据库中的一张表，下面详细介绍Peewee中Model操作的常见方法。1.创建表（create_table）该方法用于在数据库中创建与Model类对应的物理表。frompeeweeimport*#连接SQLite数据库db=Sqli
  • 《恐龙餐厅菜单页面代码说明文档》 欣然～ html5
    一、整体概述此HTML文件构建了一个恐龙餐厅的菜单页面，用户能够浏览菜品、将菜品添加到购物车，并进行支付操作。页面运用HTML搭建结构，CSS进行样式设计，JavaScript实现交互功能。二、HTML结构1.文档头部（）html恐龙餐厅菜单/*CSS样式代码*/：声明文档类型为HTML5。：指定文档语言为中文（中国大陆）。：设置字符编码为UTF-8，确保中文等字符能正确显示。：让页面在不同设备上
  • 基于html5QrCode实现的H5扫码功能（uni-app v2版本） _虾仁不眨眼_ 移动端H5uni-apphtml5
    1.安装（选择一种方式）使用npmHtml5Qrcodenpm链接npmihtml5-qrcode直接引入html5-qrcode.min.js文件（本例使用此方法）2.扫码组件代码（先引入Html5Qrcode资源）exportdefault{name:'Scan',model:{props:'value',event:'close'},props:{value:{type:Boolean,de
  • input限制只能输入正整数 _虾仁不眨眼_ javascripthtml5
    要限制input元素只能输入正整数，可以使用以下几种方法：1.使用HTML5的type="number"属性这种方式可以限制输入框只接受数字输入，并且可以通过min和step属性设置最小值和步长。2.使用正则表达式进行输入验证使用@input事件监听输入框的输入事件，并在validateInput方法中使用正则表达式过滤掉非数字和非正整数的字符。//html//jsmethods:{validat
  • 移动端Canvas实现手写签名 不知名靓仔 canvas
    引言在移动应用开发中，手写签名功能的集成已经成为许多业务场景的标配，比如电子合同签署、医疗记录确认或是物流配送签收等。本文将详细阐述如何在移动端实现手写签名，包括技术选型、具体实现步骤以及优化建议，帮助开发者快速上手并构建高质量的手写签名体验。技术选型1.使用CanvasAPIHTML5的CanvasAPI提供了在网页上绘制图形的能力，包括路径、文本、图像等，非常适合用来捕捉和展示手写签名。在移动
  • 最新微信小程序面试题集结 江湖二哥 微信小程序前端面试小程序
    1、微信小程序与H5的区别?第一条是运行环境的不同传统的HTML5的运行环境是浏览器，包括webview，而微信小程序的运行环境并非完整的浏览器，是微信开发团队基于浏览器内核完全重构的一个内置解析器，针对小程序专门做了优化，配合自己定义的开发语言标准，提升了小程序的性能。第二条是开发成本的不同只在微信中运行，所以不用再去顾虑浏览器兼容性，不用担心生产环境中出现不可预料的奇妙BuG第三条是获取系统级
  • 关于旗正规则引擎中的MD5加密问题 何必如此 jspMD5规则加密
    一般情况下，为了防止个人隐私的泄露，我们都会对用户登录密码进行加密，使数据库相应字段保存的是加密后的字符串，而非原始密码。 在旗正规则引擎中，通过外部调用，可以实现MD5的加密，具体步骤如下： 1.在对象库中选择外部调用，选择“com.flagleader.util.MD5”，在子选项中选择“com.flagleader.util.MD5.getMD5ofStr({arg1})”； 2.在规
  • 【Spark101】Scala Promise/Future在Spark中的应用 bit1129 Promise
    Promise和Future是Scala用于异步调用并实现结果汇集的并发原语，Scala的Future同JUC里面的Future接口含义相同，Promise理解起来就有些绕。等有时间了再仔细的研究下Promise和Future的语义以及应用场景，具体参见Scala在线文档：http://docs.scala-lang.org/sips/completed/futures-promises.html
  • spark sql 访问hive数据的配置详解 daizj spark sqlhivethriftserver
    spark sql 能够通过thriftserver 访问hive数据，默认spark编译的版本是不支持访问hive，因为hive依赖比较多，因此打的包中不包含hive和thriftserver,因此需要自己下载源码进行编译，将hive，thriftserver打包进去才能够访问，详细配置步骤如下：   1、下载源码   2、下载Maven,并配置 此配置简单，就略过
  • HTTP 协议通信 周凡杨 javahttpclienthttp通信
                            一：简介  HTTPCLIENT，通过JAVA基于HTTP协议进行点与点间的通信！     二： 代码举例      测试类： import java
  • java unix时间戳转换 g21121 java
    把java时间戳转换成unix时间戳： Timestamp appointTime=Timestamp.valueOf(new SimpleDateFormat("yyyy-MM-dd HH:mm:ss").format(new Date())) SimpleDateFormat df = new SimpleDateFormat("yyyy-MM-dd hh:m
  • web报表工具FineReport常用函数的用法总结（报表函数） 老A不折腾 web报表finereport总结
    说明：本次总结中，凡是以tableName或viewName作为参数因子的。函数在调用的时候均按照先从私有数据源中查找，然后再从公有数据源中查找的顺序。   CLASS CLASS(object):返回object对象的所属的类。   CNMONEY CNMONEY(number,unit)返回人民币大写。 number:需要转换的数值型的数。 unit:单位，
  • java jni调用c++ 代码 报错 墙头上一根草 javaC++jni
    # # A fatal error has been detected by the Java Runtime Environment: # #  EXCEPTION_ACCESS_VIOLATION (0xc0000005) at pc=0x00000000777c3290, pid=5632, tid=6656 # # JRE version: Java(TM) SE Ru
  • Spring中事件处理de小技巧 aijuans springSpring 教程Spring 实例Spring 入门Spring3
    Spring 中提供一些Aware相关de接口，BeanFactoryAware、 ApplicationContextAware、ResourceLoaderAware、ServletContextAware等等，其中最常用到de匙ApplicationContextAware.实现ApplicationContextAwaredeBean，在Bean被初始后，将会被注入 Applicati
  • linux shell ls脚本样例 annan211 linuxlinux ls源码linux 源码
    #! /bin/sh - #查找输入文件的路径 #在查找路径下寻找一个或多个原始文件或文件模式 # 查找路径由特定的环境变量所定义 #标准输出所产生的结果 通常是查找路径下找到的每个文件的第一个实体的完整路径 # 或是filename :not found 的标准错误输出。 #如果文件没有找到 则退出码为0 #否则 即为找不到的文件个数 #语法 pathfind [--
  • List,Set,Map遍历方式 (收集的资源,值得看一下) 百合不是茶 listsetMap遍历方式
    List特点：元素有放入顺序，元素可重复 Map特点：元素按键值对存储，无放入顺序 Set特点：元素无放入顺序，元素不可重复（注意：元素虽然无放入顺序，但是元素在set中的位置是有该元素的HashCode决定的，其位置其实是固定的） List接口有三个实现类：LinkedList，ArrayList，Vector LinkedList：底层基于链表实现，链表内存是散乱的，每一个元素存储本身
  • 解决SimpleDateFormat的线程不安全问题的方法 bijian1013 javathread线程安全
    在Java项目中，我们通常会自己写一个DateUtil类，处理日期和字符串的转换，如下所示： public class DateUtil01 { private SimpleDateFormat dateformat = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss"); public void format(Date d
  • http请求测试实例（采用fastjson解析） bijian1013 http测试
            在实际开发中，我们经常会去做http请求的开发，下面则是如何请求的单元测试小实例，仅供参考。 import java.util.HashMap; import java.util.Map; import org.apache.commons.httpclient.HttpClient; import
  • 【RPC框架Hessian三】Hessian 异常处理 bit1129 hessian
    RPC异常处理概述   RPC异常处理指是，当客户端调用远端的服务，如果服务执行过程中发生异常，这个异常能否序列到客户端？   如果服务在执行过程中可能发生异常，那么在服务接口的声明中，就该声明该接口可能抛出的异常。   在Hessian中，服务器端发生异常，可以将异常信息从服务器端序列化到客户端，因为Exception本身是实现了Serializable的
  • 【日志分析】日志分析工具 bit1129 日志分析
    1. 网站日志实时分析工具 GoAccess http://www.vpsee.com/2014/02/a-real-time-web-log-analyzer-goaccess/ 2. 通过日志监控并收集 Java 应用程序性能数据(Perf4J) http://www.ibm.com/developerworks/cn/java/j-lo-logforperf/ 3.log.io 和
  • nginx优化加强战斗力及遇到的坑解决 ronin47 nginx 优化
    　　　先说遇到个坑，第一个是负载问题，这个问题与架构有关，由于我设计架构多了两层，结果导致会话负载只转向一个。解决这样的问题思路有两个：一是改变负载策略，二是更改架构设计。 　　　由于采用动静分离部署，而nginx又设计了静态，结果客户端去读nginx静态，访问量上来，页面加载很慢。解决：二者留其一。最好是保留apache服务器。   　　　来以下优化：   　　　
  • java-50-输入两棵二叉树A和B，判断树B是不是A的子结构 bylijinnan java
    思路来自： http://zhedahht.blog.163.com/blog/static/25411174201011445550396/ import ljn.help.*; public class HasSubtree { /**Q50. * 输入两棵二叉树A和B，判断树B是不是A的子结构。 例如，下图中的两棵树A和B，由于A中有一部分子树的结构和B是一
  • mongoDB 备份与恢复 开窍的石头 mongDB备份与恢复
    Mongodb导出与导入 1: 导入/导出可以操作的是本地的mongodb服务器,也可以是远程的. 所以,都有如下通用选项: -h host   主机 --port port    端口 -u username 用户名 -p passwd   密码 2: mongoexport 导出json格式的文件
  • [网络与通讯]椭圆轨道计算的一些问题 comsci 网络
         如果按照中国古代农历的历法，现在应该是某个季节的开始，但是由于农历历法是3000年前的天文观测数据，如果按照现在的天文学记录来进行修正的话，这个季节已经过去一段时间了。。。。。       也就是说，还要再等3000年。才有机会了，太阳系的行星的椭圆轨道受到外来天体的干扰，轨道次序发生了变
  • 软件专利如何申请 cuiyadll 软件专利申请
    软件技术可以申请软件著作权以保护软件源代码，也可以申请发明专利以保护软件流程中的步骤执行方式。专利保护的是软件解决问题的思想，而软件著作权保护的是软件代码（即软件思想的表达形式）。例如，离线传送文件，那发明专利保护是如何实现离线传送文件。基于相同的软件思想，但实现离线传送的程序代码有千千万万种，每种代码都可以享有各自的软件著作权。申请一个软件发明专利的代理费大概需要5000-8000申请发明专利可
  • Android学习笔记 darrenzhu android
    1.启动一个AVD 2.命令行运行adb shell可连接到AVD,这也就是命令行客户端 3.如何启动一个程序   am start -n package name/.activityName   am start -n com.example.helloworld/.MainActivity 启动Android设置工具的命令如下所示： # am start -
  • apache虚拟机配置，本地多域名访问本地网站 dcj3sjt126com apache
    现在假定你有两个目录，一个存在于 /htdocs/a，另一个存在于 /htdocs/b 。 现在你想要在本地测试的时候访问 www.freeman.com 对应的目录是 /xampp/htdocs/freeman ,访问 www.duchengjiu.com 对应的目录是 /htdocs/duchengjiu。 1、首先修改C盘WINDOWS\system32\drivers\etc目录下的
  • yii2 restful web服务[速率限制] dcj3sjt126com PHPyii2
    速率限制 为防止滥用，你应该考虑增加速率限制到您的API。 例如，您可以限制每个用户的API的使用是在10分钟内最多100次的API调用。 如果一个用户同一个时间段内太多的请求被接收， 将返回响应状态代码 429 (这意味着过多的请求)。 要启用速率限制, [[yii\web\User::identityClass|user identity class]] 应该实现 [[yii\filter
  • Hadoop2.5.2安装——单机模式 eksliang hadoophadoop单机部署
    转载请出自出处：http://eksliang.iteye.com/blog/2185414 一、概述        Hadoop有三种模式 单机模式、伪分布模式和完全分布模式，这里先简单介绍单机模式 ，默认情况下，Hadoop被配置成一个非分布式模式，独立运行JAVA进程，适合开始做调试工作。   二、下载地址 Hadoop 网址http:
  • LoadMoreListView+SwipeRefreshLayout（分页下拉）基本结构 gundumw100 android
    一切为了快速迭代 import java.util.ArrayList; import org.json.JSONObject; import android.animation.ObjectAnimator; import android.os.Bundle; import android.support.v4.widget.SwipeRefreshLayo
  • 三道简单的前端HTML/CSS题目 ini htmlWeb前端css题目
    使用CSS为多个网页进行相同风格的布局和外观设置时，为了方便对这些网页进行修改，最好使用（ ）。http://hovertree.com/shortanswer/bjae/7bd72acca3206862.htm   在HTML中加入<table style=”color:red; font-size:10pt”>，此为（ ）。http://hovertree.com/s
  • overrided方法编译错误 kane_xie override
    问题描述： 在实现类中的某一或某几个Override方法发生编译错误如下： Name clash: The method put(String) of type XXXServiceImpl has the same erasure as put(String) of type XXXService but does not override it   当去掉@Over
  • Java中使用代理IP获取网址内容（防IP被封，做数据爬虫） mcj8089 免费代理IP代理IP数据爬虫JAVA设置代理IP爬虫封IP
    推荐两个代理IP网站：   1. 全网代理IP：http://proxy.goubanjia.com/   2. 敲代码免费IP：http://ip.qiaodm.com/   Java语言有两种方式使用代理IP访问网址并获取内容，   方式一，设置System系统属性   // 设置代理IP System.getProper
  • Nodejs Express 报错之 listen EADDRINUSE qiaolevip 每天进步一点点学习永无止境nodejs纵观千象
    当你启动 nodejs服务报错： >node app Express server listening on port 80 events.js:85 throw er; // Unhandled 'error' event ^ Error: listen EADDRINUSE at exports._errnoException (
  • C++中三种new的用法 _荆棘鸟_ C++new
    转载自：http://news.ccidnet.com/art/32855/20100713/2114025_1.html 作者: mt 其一是new operator，也叫new表达式；其二是operator new，也叫new操作符。这两个英文名称起的也太绝了，很容易搞混，那就记中文名称吧。new表达式比较常见，也最常用，例如： string* ps = new string("
  • Ruby深入研究笔记1 wudixiaotie Ruby
    module是可以定义private方法的 module MTest def aaa puts "aaa" private_method end private def private_method puts "this is private_method" end end
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他