宣武做网站:使用WebSQL和jQuery构建Todo应用程序

2019.05.27 宣武做网站

155

宣武做网站本教程将引导您逐步开发构建TODO应用程序完全由WebSQL。您将了解如何开始使用WebSQL、了解事务、遵循最佳实践以及如何编写可重用的函数。

请注意:Web SQL数据库API并不是HTML 5规范的一部分,尽管它在一套规范中,可以帮助您构建复杂的Web应用程序。

这就是我们将要建设的:

宣武做网站


目录

  1. Web SQL简介

    -了解WebSQL的关键特性,包括浏览器支持。
  2. 创建静态HTML/CSS模板

    -将应用程序开发划分为不同模块始终是一种良好做法。例如:设计、客户端逻辑和后端逻辑.在本教程中,我们将创建一个静态模板,以了解应用程序(TodoApp)的设计工作流程。
  3. 添加功能

    -最后,我们宣武做网站将使用jQuery创建函数,并运行事务来向应用程序(TodoMaker)添加所需的功能。

所需

  1. Web SQL支持浏览器。当前,以下浏览器支持WebSQL。
    • 铬4+
    • 狩猎4+
    • 歌剧11+
    • iOS Safari 5+
    • Android 3+
    • Opera Mobile 11+
  2. 的副本

    jQuery库

  3. 对jQuery和SQL的基本理解

选择合适的应用程序

在使用WebSQL时,选择正确的应用程序构建非常重要。例如,如果您计划使用WebSQL创建一个博客或网站,这可能不是最好的选择。由于Web SQL数据库由用户的浏览器承载,用户可以删除表或删除整个数据库。TODO应用程序或便笺可以是WebSQL在工作中的完美示例,因为用户将输入与日常活动相关的数据,如果他们选择删除输入的数据,这几乎不会有什么区别。

Web SQL核心方法

我们将使用WebSQLAPI提供的三种主要方法来维护TODO应用程序.

  1. 开放数据库

    -此方法将使用数据库名称创建数据库对象的实例。此外,如果还不存在,它将创建一个新的数据库。
  2. 交易

    -此方法将允许您在特定数据库上执行和提交事务。
  3. ExecuteSql

    -ExecuteSql将允许您运行SQL查询,如读、插入和删除。

上述方法的实例

开放数据库

		openDatabase("speckyboy","1.0","My First database",5 * 1024 * 1024);

openDatabase将采用由逗号(,)分隔的4个参数,如下所述

  1. 鬼小子

    *数据库名称。
  2. 1.0

    *数据库版本。
  3. 我的第一个数据库

    *数据库说明。
  4. 5*1024*1024

    :5MB的存储空间。

交易

		db.transaction(function (tx) {
			// here goes the SQL query
		});

transaction需要执行不同的SQL查询,它将接受一个参数,该参数将附加到实际查询中。

ExecuteSql

		tx.executeSql('CREATE TABLE IF IT DOES NOT EXIST FOO (id INTEGER, foo TEXT)');

上面的例子只是对WebSQL的介绍。在创建功能应用程序时,还有很多需要理解的地方。现在,我们将使用HTML和CSS设置设计模板,并为我们的Todo应用程序创建一个简单的设计:

文件结构

上面的图像显示了创建Todo制造者申请。

  1. Style.css

    -该文件将包含我们的应用程序设计。
  2. jquery.js

    -这将是jQuery库的副本,它将帮助我们编写jQuery函数。
  3. ManageTodo.js

    -在这个文件中,我们将从头开始编写我们自己的代码。
  4. index.html – index.html

    将是包含HTML代码的实际文件。

创建一个新文件index.html并将下面的代码粘贴到其中。

<html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head>
  <meta name="generator" content=
  "HTML Tidy for Linux/x86 (vers 11 February 2007), see www.w3.org" />

  <title>Html5 WebSql Todo Maker</title>
  <meta charset="utf-8" />
  <link rel="stylesheet" href="css/style.css" type="text/css" />
  <script type="text/javascript" src="js/jquery.js"></script>
  <script type="text/javascript" src="js/manageTodo.js"></script></head><body>
  <div id="wrapper">
    <div id="header">
      <h2><a href="#">TodoMaker</a></h2>
    </div><!-- end header -->

    <div id="bodyWrapper">
      <div id="todo_wrapper" class="white_bg">
        <h2>List of created todo</h2>

        <ul class="list"></ul>
      </div><!-- end todo_wrapper -->

      <div id="todo_form" class="white_bg">
        <div id="form_wrapper">
          <textarea id="todo_item_text" placeholder="Enter todo here"></textarea> <input type="text" id="todo_due_date" placeholder="Due Date" />
        </div><!-- end form_wrapper --><input type="submit" id="create_todo" value=
        "Add Todo" class="button" />
      </div><!-- end todo_form -->
    </div><!-- end bodyWrapper -->
  </div><!-- end wrapper --></body></html>

上面的代码将创建一个简单的HTML文档,其中包含一个待办事项和表单元素的无序列表,以及一个文本区域、文本输入和提交按钮。

理解HTML结构

  1. 在头部分,我们包含了所需的CSS和jQuery文件。
  2. ul.list

    将包含列表-项(Li)中创建的所有TODO项,并带有一个隐藏的输入字段,其中包含每个TODO项的唯一ID。
  3. 最后,我们将使用TextArea(用于编写TodoItem文本)、输入框(用于截止日期)和一个Submit按钮来设置表单元素。

让我们使用CSS向这些死HTML元素添加一些样式。打开文件style.css在CSS文件夹中粘贴下面的标记:

/*
     /////////  General Styling Rules On Body and Other Page Elements ///////////////
*/body{
	background: #f7f7f7;
	font-family: Arial, "MS Trebuchet", sans-serif;
	font-size: 12px;
	color: #3a3a3a;}*{
	margin: 0;
	padding: 0;}a{
	text-decoration: none;}ul, ol{
	list-style: none outside none;}.clear{
	clear: both;}/*
	///////// Body Header Rules with header sticked on top with absolute positioning ///////
*/#header{
	background: none repeat scroll 0 0 #33363B;
	color: #999999;
	padding: 10px;
	position: absolute;
	left: 0;
	right: 0;}#header h2{
	padding-left: 10px;}#header h2 a{
	color: #999999;
	text-transform: uppercase;
	font-size: 12px;}/*
	//////////////   Main Body Div Styles Including List Of Created ToDo ///////////////

*//*  Body wrapper holding all page elements except header */#bodyWrapper{
	width: 500px;
	margin: auto;
	padding-top: 50px;}/* todo div and all todo inside a list */.white_bg{
	background: #fff;
	padding: 20px;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	margin-bottom: 20px;}#todo_wrapper h2{
	color: #555;
	border-bottom: 1px dotted #999;
	margin-bottom: 30px;
	padding-bottom: 10px;}#todo_wrapper ul li{
	border-bottom: 1px solid 
	#E8E8E8;
	font-size: 11px;
	margin: 0;
	padding: 4px;
	padding-left: 0px;
	padding-bottom: 3px;
	padding-top: 5px;}#todo_wrapper ul li .todo_text{
	float: left;
	padding: 3px;}#todo_wrapper ul li .due_date{
	background: none repeat scroll 0 0 #FFD5E3;
	border: 1px solid #FCB7CE;
	float: right;
	padding: 1px 8px 1px 6px;
	border-radius: 20px;
	-moz-border-radius: 20px;
	-webkit-border-radius: 20px;}#form_wrapper{
	border: 1px solid #CCCCCC;
	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	box-shadow: 1px 1px 13px #EEEEEE;
	-webkit-box-shadow: 1px 1px 13px #EEEEEE;
	-moz-box-shadow: 1px 1px 13px #EEEEEE;}#todo_form textarea{
	border: 0px solid #ccc;
	border-bottom: 1px solid #ccc;
	width: 98%;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	line-height: 15px;
	height: 15px;
	display: block;
	min-height: 50px;
	background-color:transparent;
	resize: none;
	overflow-y: scroll;
	padding: 5px;}#todo_form input[type="text"]{
	border: 0px solid #ccc;
	width: 95%;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	display: block;
	background-color:transparent;
	padding: 5px;}.button {
	-moz-box-shadow:inset 0px 1px 0px 0px #bbdaf7;
	-webkit-box-shadow:inset 0px 1px 0px 0px #bbdaf7;
	box-shadow:inset 0px 1px 0px 0px #bbdaf7;
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #79bbff), color-stop(1, #378de5) );
	background:-moz-linear-gradient( center top, #79bbff 5%, #378de5 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#79bbff', endColorstr='#378de5');
	background-color:#79bbff;
	-moz-border-radius:26px;
	-webkit-border-radius:26px;
	border-radius:26px;
	border:1px solid #84bbf3;
	display:inline-block;
	color:#ffffff;
	font-family:arial;
	font-size:13px;
	font-weight:bold;
	padding:4px 12px;
	text-decoration:none;
	text-shadow:1px 1px 0px #528ecc;
	margin-top: 20px;
	cursor: pointer;}.button:hover {
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #378de5), color-stop(1, #79bbff) );
	background:-moz-linear-gradient( center top, #378de5 5%, #79bbff 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#378de5', endColorstr='#79bbff');
	background-color:#378de5;}.button:active {
	position:relative;
	top:1px;}.highlight{
	background: yellow;}#delete{
	float: right;
	margin-left: 10px;
	margin-top: 3px;}.error_message{
	padding-top: 50px;
	color: #888;
	font-size: 80px;
	text-align: center;	}

因为CSS没有什么特别之处,所以我们不会花时间去理解它。

接下来,我们将编写JS代码,为我们的TodoMaker添加功能。

如您所知,HTML 5仍在开发中,而且浏览器之间非常不一致。因此,我们需要编写一个函数来确定最终用户的浏览器是否支持WebSQL。如果浏览器不支持WebSQL,我们将在一些静态HTML文本中显示一个错误。

打开文件manageTodo.js并将下面的代码粘贴到其中

$(function(){
	function init(){
		if(typeof(openDatabase) !== 'undefined')
		{
			// We will write something here later
		}
		else
		{
			$('#bodyWrapper').html('<h2 class="error_message"> Your browser does not support webSql</h2>');
		}
	}
	init();});

我们将创建一个函数init与if-and-etc语句,以确定浏览器是否支持WebSQL数据库。如果typeof(openDatabase) == 'undefined'我们将显示用户的浏览器不支持WebSQL的消息。

您可以在MozillaFirefox中测试上述代码,并得到相同的错误消息。

在创建整个应用程序时,使用最佳实践(如创建函数和使用带有名称空间的变量)是很重要的。在我们继续前进的过程中,我将解释代码的每一部分。

注意:删除ManageTodo.js中的所有内容并从头开始;不要担心上面的代码。另外,所有的代码都在domReady函数中。

$(function() {
	var speckyboy = {}
	speckyboy.init = {}
	speckyboy.init.db = {}});

在执行任何操作之前,我们将对domReady函数中的所有内容进行包装,以确保页面已加载。此外,我们使用默认为NULL的命名空间创建了3个变量。

我们为什么要使用命名空间?

  1. 命名空间用于防止名称冲突。
  2. 比方说,不要用

    speckyboy.init

    ,您创建了一个名为

    init

    稍后,您希望使用第三方插件来扩展这个Todo应用程序。如果插件也使用了一个名为

    init.

创建数据库

		// Holding database instance inside a global variable
		speckyboy.init.open = function(){
			speckyboy.init.db = openDatabase("speckyboy","1.0","My First database",5 * 1024 * 1024);
			// dbname, verison, desc, size
		}

创建表

	speckyboy.init.createTable = function(){
		var database = speckyboy.init.db;
		database.transaction(function(tx){
			tx.executeSql("CREATE TABLE IF IT DOES NOT EXIST todo (ID INTEGER PRIMARY KEY ASC,todo_item TEXT,due_date VARCHAR)", []);
		});
	}		

我们将执行CREATETable命令来创建一个名称为todo和下列领域:

  1. ID

    :它将是一个主键,每次有新条目时都会自动增加。
  2. TODO项目

    它将是包含我们TODO文本的实际字段。
  3. 到期日期

    :到期日将是一个VARCHAR字段(字符字段),保存我们的Todo项目到期日。

现在去哪找?

如果您刷新页面,您将不会注意到屏幕上的任何更改。原因如下:

  1. 首先,我们宣武做网站尚未执行任何将在屏幕上进行更改的操作。
  2. 其次,我们只创建了函数,但没有调用它们。我们现在开始行动吧!
	function init(){
		if(typeof(openDatabase) !== 'undefined')
		{
			speckyboy.init.open();
			speckyboy.init.createTable();
		}
		else
		{
			$('#bodyWrapper').html('<h2 class="error_message"> Your browser does not support webSql</h2>');
		}
	}
		init();

我们将使用条件语句创建init函数,查找浏览器支持。如果浏览器支持WebSQL,那么它将执行上述两个函数来创建数据库和表。否则,它将引发一个错误,告知用户浏览器不受支持。

单击F12(假设您在Chrome和Windows上)打开Chrome检查器并转到参考资料。如果您能够找到一个数据库名称和一个类似于下面给出的屏幕截图的表,那么您就可以继续前进了。否则,您需要在检查器控制台中查找错误。

添加Todo

	// passing values as parameters
		speckyboy.init.addTodo = function(todoItem,dueDate){
			var database = speckyboy.init.db;
			database.transaction(function(tx){
				 tx.executeSql("INSERT INTO todo (todo_item,due_date) VALUES (?,?)", [todoItem,dueDate]);
			});
		}<pre class="prettyprint">&lt;p&gt;We will run prepared statement to add a new item to our existing SQL table. In this function, we will pass &lt;code&gt;todo_item&lt;/code&gt; and &lt;code&gt;due_date&lt;/code&gt; values as parameters.&lt;/p&gt;&lt;p&gt;As this is just a function, we need to find a way to grab textarea and input field values and pass them as parameters while calling this function.&lt;/p&gt;&lt;h2&gt;Adding OnClick Event Handler To Add ToDo&lt;/h2&gt;<pre class="prettyprint">
		$('#create_todo').click(function(){
			var todo_item_text = $('#todo_item_text').val();
			var todo_due_date = $('#todo_due_date').val();
			
			if(todo_item_text.length == '' || todo_due_date.length == '')
			{
				alert('Both fields are required');
			}
			else
			{
				speckyboy.init.addTodo(todo_item_text,todo_due_date);
				$('#todo_item_text').val('');
				$('#todo_due_date').val('');
			}
		});

如果您一直在使用jQuery选择器,那么乍一看,您将了解这些代码。然而,我们将逐行讨论上述代码。

  1. 每次单击Submit按钮时,它都会运行上述代码块。
  2. 接下来,我们创建了包含TextArea和输入框值的两个变量。
  3. 在将字段插入到数据库之前,有条件的if和etc语句将确保字段不为空。
  4. 内部

    else

    块,我们将调用该函数。

    speckyboy.init.addTodo

    并将通过2个必需的参数。
  5. 最后两行将使文本区域和输入框为空。

测试时间

复制上述代码并将其添加到manageTodo.js档案。打开index.html文件在浏览器中,让我们创建一个新的Todo:

再次打开检查器(F12),转到参考资料并单击表名(Todo)。如果你能看到你创造的TODO,你就可以走了!否则,只需跳转到控制台并执行一些错误处理。

获得创建的Todo

	speckyboy.init.getTodo = function(){
		var database = speckyboy.init.db;
		var output = '';
		database.transaction(function(tx){
			tx.executeSql(&quot;SELECT * FROM todo&quot;, [], function(tx,result){
				for (var i=0; i &lt; result.rows.length; i++) {
					todo_item = result.rows.item(i).todo_item;
					todo_due_date = result.rows.item(i).due_date;
					todo_id = result.rows.item(i).ID;
					showAllTodo(todo_item,todo_due_date,todo_id);
				}
			});
		});
	}

现在,我们将学习如何列出创建的TODO。让我们理解上面的代码,因为它有点复杂。

  1. SELECT语句将从表中获取所有内容。

    todo

    ,并将这些值添加到数组中。

    []

  2. 接下来,我们将运行一个回调函数,其参数为

    result.

  3. result.rows.length

    将包含表中的行数。根据我们的例子,它将是2。
  4. 我们将运行一个for循环来获取表中的项,并将它们作为参数传递给一个名为showAllTodo()的新函数;

创建显示AllTodo的函数

		function showAllTodo(todo_item,todo_due_date,todo_id){
		$('ul.list').append(
			'&lt;li&gt;&lt;div class=&quot;todo_item&quot;&gt;&lt;span class=&quot;todo_text&quot;&gt;' + todo_item + '&lt;/span&gt;' + 
			'&lt;a href=&quot;#&quot; id=&quot;delete&quot;&gt; Delete &lt;/a&gt;&lt;span class=&quot;due_date&quot;&gt;' + todo_due_date + '&lt;/span&gt;' + 
			'&lt;input type=&quot;hidden&quot; id=&quot;this_id&quot; value=&quot;' + todo_id + '&quot;&gt;&lt;div class=&quot;clear&quot;&gt;&lt;/div&gt;&lt;/div&gt;&lt;/li&gt;');	
			$('li:last').addClass('highlight').delay(1000).queue(function(next){ $(this).removeClass('highlight'); next(); });
		}

在上面的代码中,我们所做的就是将列表项(Li)附加到无序列表中。让我们把密码分解。

  1. 我们在每个Todo旁边创建了一个DELETE链接,以便以后可以添加DELETE功能。
  2. 由于我们不确定用户将单击哪个删除链接,以及应该删除哪个TODO,因此我们需要找到一种方法来保持与DELETE链接和TODO ID的连接。
  3. 为了保持这样的连接,我们创建了一个隐藏的输入字段,其中包含TODO项ID,它是所有TODO项的唯一。
  4. 最后,为了添加突出显示动画,我们将类突出显示添加到创建的Todo中,并将在1秒后删除该类。

让我们继续打电话给这个函数speckyboy.init.getTodo();在我们创建的init函数中。在刷新页面时,您将能够看到从WebSQL表中创建的所有Todo项。

	
	function init(){
		if(typeof(openDatabase) !== 'undefined')
		{
			speckyboy.init.open();
			speckyboy.init.createTable();
			speckyboy.init.getTodo();
		}
		else
		{
			$('#bodyWrapper').html('&lt;h2 class=&quot;error_message&quot;&gt; Your browser does not support webSql&lt;/h2&gt;');
		}
	}

删除Todo

	speckyboy.init.deleteTodo = function(id){
		var database = speckyboy.init.db;
		database.transaction(function(tx){
			tx.executeSql(&quot;DELETE FROM todo WHERE ID=?&quot;,[id]);
		});
	}

删除Todo非常简单。我们所需要做的就是传递要删除的Todo的ID。现在,我们需要编写一个单击处理程序,每次单击DELETE链接时都会运行上述功能。

在单击“删除事件处理程序”上写入

		$('#delete').live(&quot;click&quot;,function(){
			var id = $(this).closest('li').find('#this_id').val();
			$(this).closest('li').addClass('highlight').delay(1000).queue(function(next){ $(this).remove(); next(); });
			speckyboy.init.deleteTodo(id);
		});
  1. 首先,我们将从列表项中获取隐藏的输入值。
  2. 同样,我们将添加一些突出显示动画,以更改我们要删除的项目的背景。
  3. 最后,我们将调用此功能。

    speckyboy.init.deleteTodo

    若要删除选定项,请执行以下操作。

我们宣武做网站现在离创建一个稳定的应用程序只有一步之遥。让我们检查仍然缺少的以下要点:

  1. 每次我们创建一个新的Todo时,我们都需要刷新页面以获得活动列表。
  2. 由于截止日期输入是一个开放字段,因此有可能出现格式错误。

解决上述两个问题

就页面刷新而言,我们可以通过对现有功能进行小修改来解决这个问题。speckyboy.init.addTodo.

	speckyboy.init.addTodo = function(todoItem,dueDate){
		var database = speckyboy.init.db;
		database.transaction(function(tx){
			tx.executeSql(&quot;INSERT INTO todo (todo_item,due_date) VALUES (?,?)&quot;, [todoItem,dueDate],
			showAllTodo(todoItem,dueDate));
		});
	}

有什么变化?

在运行INSERT查询并传递值之后,我们添加了showAllTodo作为回调函数。它将抓取所有TODO项目,并在不刷新页面的情况下列出它们。

此外,对于到期日,我们可以使用jQueryUI日历,确保日期在任何地方都是相同的格式。打开index.html再次文件,并在文件的头部分添加以下代码。

&lt;script type=&quot;text/javascript&quot; src=&quot;https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js&quot;&gt;&lt;/script&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/themes/redmond/jquery-ui.css&quot; type=&quot;text/css&quot;&gt;

以上两行是对jQueryUI库的引用。现在我们可以在输入字段上调用Datepicker方法。

		$('#todo_due_date').datepicker();	

宣武做网站


寒枫总监

来电咨询

18868949445

微信咨询

寒枫总监

TOP